UBC Farm Web Application Design Document & Report · Redux Store, Redux React Patterns It is no surprise that Redux and its services are highly connected with React. Redux is meant

UBCFarmWebApplicationDesignDocument&ReportUBCSustainabilityScholarsProgramProject: Stewardshipsciencetechnologyformonitoringthesocio-

ecologicaloutputsoffarmingactivities

XingyuTaoAugust2017

TableofContents

Abstract.......................................................................................................................................................1

SystemArchitectureandRationale.............................................................................................................2

MaterialUI&Bulma................................................................................................................................3

Express.....................................................................................................................................................3

Node........................................................................................................................................................3

Redux&React.........................................................................................................................................4

D3............................................................................................................................................................5

MongoDB.................................................................................................................................................5

DetailedDesign............................................................................................................................................6

DesignPatterns........................................................................................................................................7

ComponentContainerPattern............................................................................................................7

ReduxStore,ReduxReactPatterns.....................................................................................................7

IntroductiontoPages..............................................................................................................................8

Fields........................................................................................................................................................8

GoogleMapsAPI.................................................................................................................................8

Tasks........................................................................................................................................................9

VISTimelineAPI.................................................................................................................................10

Inventories.............................................................................................................................................10

D3API................................................................................................................................................11

Finances.................................................................................................................................................11

Users&Reports.....................................................................................................................................11

DesignChallengesandRecommendation.................................................................................................12

IntegratingModuleswithReact............................................................................................................12

Interconnectivity....................................................................................................................................12

Conclusion.................................................................................................................................................13

1

Acknowledgements

WithspecialthankstoProf.HannahWittmanandDrZiaMehrabiforallthesupportprovidedincompletingthisproject.

Abstract TheUBCFarmSocio-ecologicalMonitoringApplication(hereafter“UBCFarmApp”)isanongoingprojectthataimstodevelopadynamicmonitoringandreportingsystemforUBCFarmthatcanalsobeadaptedtootherscalesoffarmingoperations(local,regional,global).ItsultimategoalistomakefarmingmoresustainablebycloselytrackingandreportingoneveryaspectofaFarm’soperation,fromresourcesused,hoursworked,tobio-diversitylevels,climatechangeimpacts,finances,andfoodproduced.Throughseveralresearch,design,andimplementationcycles,ithasreacheditscurrentiterationwhichcombinesanarrayofintercommunicatingmodulestogethertoofferreal-timetrackingandreportingfunctions. Thisdocumentaimstoprovideadetailedreportonthesystemarchitectureanddesignchoicesoftheapplication’scurrentiteration(April–September2017).Itaccompaniestheonlinedocumentationandcodefortheapplicationfoundhttps://github.com/ubc-farmandincludesanoverviewofthefollowingfeaturescurrentlyintheimplementationqueueoftheproject:

1.Fields Completed2.Tasks Completed3.Inventories Completed4.Finances Completed5.Employees Implementing6.Reports Implementing

2

SystemArchitectureandRationale

Thisapplicationmakesuseofalayeredarchitecturetoseparatethedatabase,businesslogic,andUItohelpfacilitatecodedevelopment.Thisfollowsnaturallyfromthe“MERN”(MongoDB,Express,React,Node)stack’sdesignphilosophy.TherestrictionofimposinganestablishedframeworksuchasReactontheprojectimprovesthestabilityofthewebapplication,anditalsomakesincorporatingnewfeatureseasierduetoextensiveexistingreference.

Thefigurebelowgivesavisualrepresentationofeachcomponent’sroleinthecurrentUBCFarm

application.

EachcomponentintheUBCFarmApp’slayeredarchitecturefulfillsawell-definedrole.Thisseparationoftasksalsofacilitatesthecontrolforthedataflowingbetweeneachlayer,sothatsensitiveinformationcanbekeptsecureasrequiredforprivatefarmownersandasspecifiedbyUBC’sinformationsecuritypolicies.1Briefly,thespecificrolesofeachofthecomponentwillbeelaboratedinthefollowingpages.

1AcceptableUseandSecurityofUBCElectronicInformationandSystems.PDF.Vancouver:TheUniversityofBritishColumbiaBoardofGovernors,June2013.

Figure1-LayeredComponentDiagram

3

MaterialUI&Bulma

Atthetoplevel,forstylingandresponsivedesign,thisappusestwoCSSFrameworks:MaterialUIandBulma.MaterialUIisamobile-firstdesignwidelyusedonAndroidandChrome,whichcontainsawidearrayofready-to-usecomponentssuchassearchbars,formfields,anddateselectors.Bulmaisawebframeworkusefulforitssleekfontsandresponsivecolumns.Togethertheyprovidethestylingforthisapplication’scomponentsandarethemostimportantfactorscontrollingtheaestheticappearanceoftheuserinterface.

Express AsaminimalistandflexibleNodeFrameworkforwebapplications,Expressoffersawaytostandardizedevelopmentofwebapplicationsinanobject-orientedway.ItisaservicethatabstractstheHTMLdocument’selementsintoobjectsbyusingJavaScript.ThewayitaccomplishesthisandmanagestoescapethepitfallsoftheclassicalHTML/CSS/JAVASCRIPTpatternisbytranspiling(translatingcode)fromobjectorientedsyntaxintopureJavaScriptcode,ontopoftherootHTMLdocument.Thisapproachtoprogrammingwebapplicationshasmanybenefitsincludingmoreaccuratemodelingofcomplexobjects,andmorereadablecodeforcollaborationpurposes.

Node

Figure2-NodeWorkflow

4

Nodeprovidesanevent-drivenJavaScriptruntimeforwebapplications.ItsInput/Outputmechanismisnon-blocking,whichallowstheUBCFarmApptosupportasynchronous(random)updates.Thisisanespeciallyimportantcomponentthatdrivesthereal-timeupdatingfeaturesoftheUBCFarmApp.Itspackageenvironmentandonlinelibraries(npm)containsthelargestrepositoryofopensourcecodesthatprovideservicessuchasauthenticationschemes,cssframeworks,anddatabaseAPIs(ApplicationProgrammingInterfaces).VirtuallyallservicesfromGoogleMapstoMongoDBhavetheirAPIsavailableintheformofnpmpackages.

Redux&React ReduxandReactaretwoseparatecomponentsthataretightlylinkedtogether.ReactisessentiallyaJavaScriptlibrarythatallowstheincorporationofstatesintoHTMLelements.Thisiscrucialforbuildinganinteractiveapplicationthatrequirescommunicationacrossdifferentmodules.Reactkeepstrackofeachelement’sstate,alertsmodulesofchanges,andupdatestheUserInterfaceaccordingly,mimickingthefunctionofastatemachine.Anelement’sstatecanbedefinedasanything,butmostoftenitcontainstheelement’scurrentattributes.

ReduxbuildsonReactbyprovidingthelinkbetweenReactstatesandathirdpartyDatabase(in

ourcaseMongoDB).ReduxusesReact’scontrolovertheDocumentObjectModel(DOM)elementtodynamicallyupdatetheUIaccordingthechangesintheDatabase,whichitkeepsacopyofintheStore.Indoingso,Reduxactsastheapplication’seventhandlerforusertriggeredactionssuchascreating,editing,anddeletinginformation.Reduxmaintainsconsistencyacrossallinstancesoftheapplication,soitavoidsracecasesanddeadlocks(twouserstrytochangeonevalueatthesametime,creatinginconsistencies).

2

2Goutay,Nicholas."ReduxWorkflow."Digitalimage.GettingStartedwithReact,ReduxandImmutable:aTest-DrivenTutorial(Part2).March30,2016.AccessedAugust3,2017.https://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/.

Figure3-ReduxReactWorkflow

5

D3 D3.jsisawell-knownJavaScriptlibrarythatprovidesvariousdatavisualizationfunctionalities.IntheUBCFarmApp,D3isusedtovisualizetime-seriesaswellasgeographicaldataandwiththehelpofReactReduxthevisualscreatedwithD3canbeupdateddynamicallywithuserinputs.

MongoDB MongoDBisadocument-based,object-orientedDatabase.Comparedtotable-basedstructuressuchasSQL,MongoDBoffersaneasierwaytostoredataasobjects,aswellascrossingandnestingthem.Ifneededitisalsoeasilytransformedintotabularform.Thisway,dataaboutobjectscanbestoredthesamewaytheyaremodeled.Thisinturnmakestheapplicationasawholemorescalable,andensuresconsistencyindatamodelsbetweenthefrontendandthebackendoftheapplication.ItalsomakesincorporatingthirdpartydatawithJSONformattingatriviallyeasytask.ForthisapplicationwewillbeinteractingwithMongoDBthroughMongoose.Mongooseisaschemabasedframeworkformodelingapplicationdata,streamlininginteractionswithMongoDB.

3

3Malaya,Victoria.SQLvs.MongoDBTerms/Concepts.Digitalimage.Sql-vs-nosql.November8,2013.AccessedAugust3,2017.http://sql-vs-nosql.blogspot.ca/2013/11/indexes-comparison-mongodb-vs-mssqlserver.html.

Figure4-SQLvs.MongoDBStructure

6

DetailedDesign

Withthehelpofthedifferentservicesandframeworksdiscussedintheprevioussection,theapplicationisbuiltinamodularizedfashion.ThevisualbelowprovidesanUMLdiagramviewoftheoverallrelationshipsbetweendifferentmodulesoftheUBCFarmApp.

Figure5–UBCFarmAppDetailedDesignUMLDiagram

7

DesignPatterns Severalwell-establisheddesignpatternsprovidethefoundationforaddingnewmodulestothecurrentproject.TheComponentContainerPatternseparatesfunctionalcomponentsfrompresentationalcomponentssothatthesetasksarehandledseparately.TheReduxStoreandReduxReactPatternlinkstheapptoathirdpartyDatabase,inthiscaseMongoDB,toperformDatastorageandretrieval.

ComponentContainerPattern TheComponentContainerPatternisamethodtoseparatethetasksofdatainteractionfromthoseconcernedwithUserInterface.Separatingcodebyfunctionisalsoawaytomakecollaborativedevelopmentanddebuggingeasier. ThediagramtotherightdescribesthebasicworkflowofamoduleconstructedaccordingtotheComponentContainerPattern.Asillustrated,theComponentinteractswiththedatasourcewhiletheContainerinteractswiththeUser.Mostofthecomponentsinthisapplicationareconstructedthisway,withaComponentJavaScriptfileinteractingwithMongoosefilesandaContainerJavaScriptfilespecifyingtheUserInterfacelayouts.

ReduxStore,ReduxReactPatterns

ItisnosurprisethatReduxanditsservicesarehighlyconnectedwithReact.Reduxismeanttoactasamiddle-manbetweenDatabasesandReactComponents.Itsmainconcernistokeepthefrontendandbackendconsistentwitheachother.OnedrawbackofReduxandReactworthmentioningisthatitinterruptsthenormalworkflowoftheDOMobject.ThismeansthatotherservicesthatalsointeractwiththeDOMobject(suchasD3)needtheirownReduxwrappersaswellinordertoworksmoothly.

Figure6-ComponentContainerPattern

Figure7-ReduxReactPattern

8

IntroductiontoPages ThemainfunctionalitiesoftheUBCFarmApparegroupedbypages,whichappearastabsinthetopnavigationbarofthewebpage.TheyareFields,Tasks,Inventories,Reports,Finances,andUsers.AllofthemareconnectedtotheReduxStoreviaReducerfiles,whichencapsulateactionsthateachobjecttriggerswhenUsersinteractwiththem.Asaresult,theyarealldynamic,andusercontrolled.DataupdatesandrenderingchangesontheUserInterfaceareinstantaneous,whichisacrucialadvantagethatReduxReactprovides.

Fields

TheFieldspagecontainsaprominentGoogleMapsComponentthatvisualizesthegeographicaldataassociatedwithfarmbuildingsandfields.Userscanusethelisttotherighttofocusonaspecificfieldorbuilding,whichhasitsassociatedattributesandactivetasksdisplayedbelowtheMap.Thepagealsocontainsaweathermodule,whichwillbeexpandedinthefuturetoincludemorefeatures.ThemainfieldsinaFieldobjectmodelareitsname,itsassociatedGEOJsonPolygonrepresentingitsgeographicalarea,andaTaskListrepresentingthecurrenttasksthatareassociatedwiththefield.StandardCRUDactionscanbeperformedonthefield,includingdeleting,fetching,andsaving.TheselectactionisaddedtosupportfieldselectionontheFieldspage.

GoogleMapsAPI

Figure8-FieldObjectModel

Figure9-FieldsPage

9

TheFieldspageusesGoogleMapsAPItovisualizethegeographicalinformationoffieldsandbuildings,includingcalculatingtheircoveragearea,aswellasperformingaccuratedistancemeasurements.TomaketheGoogleMapsAPIcompatiblewithReactComponents,ahelpernpmpackagecalledreact-google-mapsisused,aswellassomecustomJavaScriptcode.

Tasks Thereare8typesoftasksthatcanbesetinthecurrentprototype:seeding,irrigation,pest-control,transplanting,soil-sampling,scouting-harvest,scouting-pest,andfertilizing(additionaltasksfore.g.bedpreparation,weedcontrol,andcustomuserdefinedtasks,willbeincludedpriortorelease).Eachtaskisassociatedwithaspecificfieldorbuilding.Whenauserisloggingatask,resourcescanbesubtractedfromoraddedtoinventories.Thesechangesaretrackedbytheinventories,andformthebasisfromwhichdatacanbegatheredforreportgeneration.

TheTaskspagecontainstwotabsthatallowuserstoswitchbetweenaListviewofthetasksandaTimelineviewofthetasks.

Figure10-TasksListView

Thelistviewclearlyshowsthetype,dates,andfieldassociatedwitheachspecifictask.Buttonsforloggingtasksanddeletingthemarealsoeasilyaccessible.TaskscanalsobesetfromtheFieldspageaswell,whereeachfieldhasitsownTaskListdisplayed,containingonlytasksthatareassociatedwithit.

10

VISTimelineAPI

Figure11-TasksTimelineView

Toprovideamorevisualwayofrepresentingthetasks,thevis.js4Timelinepackagewasused.InordertomakethepackagecompatiblewithReactComponentsusingit,aReactwrapperfilewasnecessary.TheTimelineshowninthefigureaboveadjustsautomaticallytonewtasksbeingset,anduserscanfreelyzoominandouttoadjustthetimeframe.

Inventories TheInventoriespageisacollectionofListsrepresentingallresourcesbeingtracked.The7maincategoriesofresourcesidentifiedare:Seeds,Transplanting,Fertilizers,PestControl,Equipment,Vehicles,andHarvestedProduce. Eachobjectineachcollectionisfurthersubdividedbysupplierifapplicable,toseparatecaseswherethesameresourcehasseveraldifferentsources.Thisincreasesthegranularityofdataavailableandallowsformoreaccuratetrackingofresourceusage.

4Documentationavailableatvisjs.org

Figure12–InventoryItemModalExample

11

Figure13–InventoryPage

D3API InordertovisualizethecompositionofdifferentInventoryItems,D3isusedtocreatelineandpiechartsdetailingtheavailabilityofitemsovertime,asshowninfigure12.Althoughbeingadeclarativewaytobuildvisuals,becauseD3hasitsownupdateworkflowitishardertoincorporatewithReactcomparedtootherAPIssuchasGoogleMapsorVIS.Currently,theD3componentsareupdatedbymanuallytriggeringare-renderingofthecontainingReactcomponent.ThisissueisfurtherdiscussedintheDesignChallengesandRecommendationssectionofthisreport.

Finances TheFinancespageissubdividedinto5tabs:Summary,Clients,Suppliers,Invoice,andPurchaseForm.SummarypresentsanoverviewofthefinancialinputsandoutputsoftheFarmoveraspecifiedamountoftimeadjustablebytheuser.ClientsandSupplierseachmaintainalistofcurrentclientsandsuppliersandkeepsrecordoftheirhistoricactivitiesbytrackingpurchaseandsalesitems.InvoiceandPurchaseFormaretwoformpageswhereuserscreatenewinvoicesandpurchaseforms.

Users&Reports TheUserspagekeepsalistofactiveusers/employeesoftheFarm.Thesecanbeeditedwithadministratoraccess.TheReportspagecontainsvariousreportsgeneratedwithD3usingdatagatheredthroughallthedifferentapplicationmodules.Thedataisaggregatedandcalculatedautomatically.

12

DesignChallengesandRecommendation ThroughoutthedevelopmentofthecurrentiterationoftheUBCFarmApp,therehavebeenmanyobstaclestoovercome.Listedbelowaretwochallengesthathadsignificantimpactonthewaytheapplicationisbuilt.Thesepointsshouldbetakenintoaccountwhendesigningfuturecomponents.

IntegratingModuleswithReact Therearemanydifferentthirdpartypackagesandmodulesincorporatedintothisproject.IntegratingallofthemwithReactsmoothlyisthenveryimportantinordertoassureefficiencyandtoavoidbugs.Thisreportmentionsthreesuchmodules:GoogleMaps,VisTimeline,andD3.

D3inparticularwashardtointegratewithReactsinceithasitsownupdatecycleseparatefromthatoftheDOMobject(thebackboneofanywebsite).ItisthereforeseparatefromReact’sworkflowaswell.Inordertoensurethatupdatesfromoneofthesetwowilltriggerupdatesintheother,thereexiststwopossiblesolutions:

1) Re-rendertheSVGvisualgeneratedbyD3withnewdatawhenchangesoccurPros: DatawillbeconsistentlyupdatedCons: Updatesmightbecomechoppyifinternetisslow(affectsuserexperience)

2) Handthehandlingoftheon-clickeventcompletelytoD3Pros: Updateswillbesmooth,allowingbetteranimationandtransitionCons: Listenersmustbesetuponbothsidestorelayuserinputsandnewdata

Inthiscase,option2waschosenbecauseitcostslittleextraworktosetuplistenersanditprovidesabetteruserexperiencewithsmoothertransitions.

Interconnectivity ThisisanissuethattheReduxReactpatternisaimedatsolving.Withoutit,thestateofeachobjectneedstobemonitoredseparatelyandallmustcommunicatewithashareddatabase.ReduxReacttakescontrolofthisprocess,usingitsStoreasamockupofthedatabase.Whileitseemslikejustacopyofinformationformthedatabase,itfulfillstheimportantjobofkeepingthestateofeveryobjectveryorganizedfromthedeveloper’spointofview.Behindthescene,italsoupdatestheDOMelementaffectedbychangesautomatically,sonoJavaScripteventlistenersneedtobemanuallysetup.

13

Conclusion TheUBCFarmApppresentsgreatpotentialforbuildinganagricultureorientedtaskmanagementandreportingsystemthatincreasesthesustainabilityoffarmingpracticesbytrackingthesocio-ecologicalfootprintoffarming.Thisprojectisagreatopportunityforbothresearchintobuildingscalablesoftwareapplicationsandlearningmoreaboutsustainablefarmingpractices.ThemostimportantresultfromthisSustainabilityScholarsprojectisasolidfoundationonwhichmoreimprovementsandnewmodulescanbeaddedtointhefuture.