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.