XAMARIN.FLUXArchitectinginXamarin
AlexDunnBlog:https://alexdunn.orgGitHub:@SuavePirateTwitter:@Suave_Pirate
TOPICS▪ WhatisFlux?
▪ WhyuseFlux?
▪ AlookataFluximplementationinC#
▪ Buildinganappfromscratch
ASSUMPTIONSANDEXPECTATIONS▪ KnowledgeofbuildingappswithXamarin
▪ FamiliaritywithXamarin.Forms
▪ FamiliaritywithXAML
▪ FamiliaritywithMVVMandBindings
RESOURCES▪ InitialProject:https://github.com/SuavePirate/XamU
▪ CompleteProject:https://github.com/SuavePirate/Xamarin.Flux
▪ Video:https://www.youtube.com/watch?v=CJh1kRXK2qI&t=1303s
▪ FluxDocs:https://facebook.github.io/flux/docs/overview.html#content
▪ FluxDemosandExamples:https://github.com/facebook/flux
WHATISFLUX?
OVERVIEW▪ Client-sideApplicationArchitecture/DesignPattern
▪ DesignedbyFacebook
▪ Usedforbuildingrobustdata-drivenUserInterfaces
▪ Focusonflowofdataandseparationofconcerns
▪ Unidirectionaldataflows
▪ BuiltforReact.js
FROMREACT.JS TOC#+XAMARINReact.js
▪ ComponentRender
▪ ComponentState
▪ ComponentProps
▪ ComponentLifecycle
C#+Xamarin +MVVM
▪ XAML/C#Page/View
▪ ViewModel
▪ ViewProperties
▪ PageLifecycleandtwowaybinding
BASICSTRUCTURE▪ Actions
▪ Dispatcher
▪ Stores
▪ Views
Viewtakesupdateddata
fromstoreandupdatesUI
View
Takesmessagefrom
dispatcherandupdatesdata.Emitschanges
downtoobserving
views
Store
Dispatchertakesdata
fromactionand
dispatchesittosubscribed
stores
DispatcherAnactiondoessomebusiness
logicandcommunicates
datatothedispatcher
Action
ADVANCEDSTRUCTURE▪ Actions
▪ Dispatcher
▪ Stores
▪ Views
▪ Actions
▪ Dispatcher
▪ Stores
▪ ….repeat
Repeatprocess
Action
Viewtakesupdateddata
fromstoreandupdates
UIViewfiresanotheraction
View
Takesmessagefrom
dispatcherandupdatesdata.Emits
changesdowntoobserving
views
Store
Dispatchertakesdata
fromactionand
dispatchesittosubscribed
stores
DispatcherAnaction
doessomebusinesslogic
andcommunicates
datatothedispatcher
Action
STRUCTUREADJUSTEDFORXAMARINANDMVVM▪ Actions
▪ Dispatcher
▪ Stores
▪ ViewModels
▪ Views
▪ ViewModels
▪ Actions
▪ ….repeat
Repeatprocess
Action
ViewModelfiresanaction
fromtheboundcommand
ViewModel
ViewautomaticallyupdatesfrombindingstoViewModelViewfires
anotheractiontothe
ViewModelthrougha
boundCommand
View
ViewModeltakesupdated
datafromstoreandupdates
bindableproperties
ViewModel
Takesmessagefromdispatcher
andupdatesdata.Emits
changesdowntoobserving
views
Store
Dispatchertakesdatafrom
actionanddispatchesitto
subscribedstores
DispatcherAnactiondoes
somesmallbusinesslogic
andcommunicates
datatothedispatcher
Action
WHYUSEFLUX?
PROBLEMSWITHPASTPATTERNS▪ Bidirectionaldesign,suchasMVC
▪ Allowedformultiplecontrollerstotalktoeachother
▪ Datapassedbetweencontrollersfrequently
▪ Hardtomaintainatanextremelylargescale
▪ Changesthattrickledowntomultiplecontrollersorviewsarehardtotrackandtest
▪ Generaldataflowisnotwelldefined
▪ Looserulesofdataflowcausedrasticallydifferentimplementations(seeCocoaMVCvsASP.NETMVCvs.RubyonRailsMVC)
SOLUTIONSFROMFLUX▪ DataFlow
▪ Dataflowsinasingledirection
▪ Trickledowncontrol▪ Allowsforviewstolistentochangesinmultiplestores▪ Allowsformultiplestorestolistentothesamedispatchedevents▪ Allowsformultipleviewstoinvokethesameaction
▪ Datahasasinglepoint– Stores▪ Dataofasingledomain/areacanbeaccessedbyanynumberofviews
▪ CanstilllivealongsideotherpatternssuchasMVVMbinding
▪ Playswellwithotherprojectarchitecturesandpatternssuchas▪ DDD▪ Onion▪ IoC/DI
COMPLEXDATAFLOWS
ViewsStoresActions
Action1Store1
View1
View2
Store2 View3
COMPLEXDATAFLOWS
ViewsStoresActionsViews
View1Action1
Store1View2
View1Store2
Action2
XAMARIN.FORMS:FLUX+MVVM+IOC/DISourceCode:https://github.com/SuavePirate/Xamarin.Flux
PROJECTSTRUCTUREXamarin.Forms XAMLPCLTemplate
PROJECTSTRUCTURE• FluxSpecificComponents
• TodoActions.cs
• TodoActionTypes.cs (eventidentifiers)
• TodoStore.cs
• Dispatcher(usingMessagingCenter fromXamarin.Forms)
• MVVMSpecificComponents• TodoListPageViewModel.cs
• TodoListPage.xaml
• IoC/DISpecificComponents• IoCConfig.cs
• ViewModelLocator.cs
• OtherfilesaremostlyforkeepingacleancodebaseandmaintainingbestC#practices
RUNNINGTHEAPP– CREATEITEM
RUNNINGTHEAPP– VIEWINGITEM
RUNNINGTHEAPP– UPDATINGANITEM
RUNNINGTHEAPP– VIEWINGDATA
RUNNINGTHEAPP– DELETINGANITEM
RUNNINGTHEAPP– DELETINGALLCOMPLETEDITEMS
RUNNINGTHEAPP– TOGGLINGALLITEMS
BUILDITFROMSCRATCHLet’swritesomecode.