Flux and Redux on Mobile

Slide 1

Slide 1 text

Benjamin Encz @benjaminencz Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 1

Slide 2

Slide 2 text

Flux & Redux on Mobile The search for a repeatable pattern for UI heavy applications Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 2

Slide 3

Slide 3 text

On Repeatability » Most time in SW-dev spent on making decisions » Standardization -> fewer decisions, fewer mistakes » Standardization -> codebase easier to understand Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 3

Slide 4

Slide 4 text

The Repeatability Test Do we have a library/pattern for implementing functionality in a similar way for different features? ✅ Model Layer / Persistence Code ✅ Networking Code ❌ UI Related Code Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 4

Slide 5

Slide 5 text

Complexity due to State Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 5

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Accidental complexity vs Essential complexity Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 8

Slide 9

Slide 9 text

Essential Complexity » A large amount of different states and valid/ invalid state transitions Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 9

Slide 10

Slide 10 text

Accidental Complexity » Sources of state spread across a graph of objects » Error prone state update code » Manual UI updates » All of the above in one large controller object Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 10

Slide 11

Slide 11 text

Minimize accidental complexity Increase repeatability Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 11

Slide 12

Slide 12 text

Agenda » What is Flux/Redux? » Why Flux/Redux on Mobile? » Flux on iOS at PlanGrid » Post mortem & Future Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 12

Slide 13

Slide 13 text

What is Flux? Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 13

Slide 14

Slide 14 text

What is Flux? » Pattern for building UIs in Web applications » Born at Facebook due to issues with MVC Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 14

Slide 15

Slide 15 text

Source: Inspired by: "Hacker Way: Rethinking Web App Development at Facebook" 15

Slide 16

Slide 16 text

Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 16

Slide 17

Slide 17 text

Core Attributes of Flux » Make State & State Transitions Explicit » Strictly Separate Responsibilites » Enforce Unidirectional Data Flow Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 17

Slide 18

Slide 18 text

Flux vs Redux Flux: Original pattern from Facebook Redux: Flux pattern + additional constraints (single store, reducers for state updates) Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 18

Slide 19

Slide 19 text

Why Flux/Redux on Mobile? Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 19

Slide 20

Slide 20 text

Why Flux/Redux on Mobile? » Same problems » complexity due to multi-directional data ﬂow » No established patterns for building UI » MVC/MVP/MVVM are vaguely deﬁned Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 20

Slide 21

Slide 21 text

Can it work on mobile? Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 21

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Flux at PlanGrid Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 23

Slide 24

Slide 24 text

Main Reasons to Switch » Previously no good pattern for UI code » KVO / Notiﬁcations / Delegation ! » Large, hard to test, controller classes Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 24

Slide 25

Slide 25 text

Flux at PlanGrid » Incremental adoption » First feature implemented in December 2015 » Since then, all new UI features using Flux Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 25

Slide 26

Slide 26 text

Implementing Flux on iOS Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 26

Slide 27

Slide 27 text

Each Feature consists of: » State » Actions » Store » View Model Provider » View Controller Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 27

Slide 28

Slide 28 text

Boilerplate Code Not considered harmful! Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 28

Slide 29

Slide 29 text

Slide 30

Slide 30 text

1. State struct FilterState { let hideEverythingFilter: RepresentableFilter let shareStatusFilters: [RepresentableFilter] let issueFilters: [RepresentableFilter] let generalFilters: [RepresentableFilter] var selectedFilterGroup: FilterGroupType? = nil /// Indicates whether any ﬁlter is active right now var isFiltering: Bool = false } Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 30

Slide 31

Slide 31 text

2. Actions struct FilteringActions { /// Enables/disables a filter. struct ToggleFilterAction: AnyAction { let filter: FilterType } /// Disables all filters within a filter group. struct ResetFiltersInGroup: AnyAction { let filterGroup: FilterGroupType } // ... } Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 31

Slide 32

Slide 32 text

3. Store func handleFilterGroupReset(_ resetFilterGroupAction: FilteringActions.ResetFiltersInGroup) { for var filter in resetFilterGroupAction.filterGroup.filters { filter.enabled = false } self._applyFilter() // Updates `self.state` } Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 32

Slide 33

Slide 33 text

4. View Model Provider func tableViewModelForState(state: FilterState) -> FluxTableViewModel Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 33

Slide 34

Slide 34 text

4. View Model Provider func tableViewModelForState(state: FilterState) -> FluxTableViewModel { let hideEverythingSection = FluxTableViewModel.SectionModel( cellViewModels: FilterViewProvider.cellViewModelsForGroup([state.hideEverythingFilter]) ) // ... return FluxTableViewModel(sectionModels: [ hideEverythingSection, shareStatusSection, issueFilterSection, generalFilterSection ]) } Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 34

Slide 35

Slide 35 text

5. View Controllers » Rx-library to tie store state updates to UI updates » Could potentially eliminate with common abstraction Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 35

Slide 36

Slide 36 text

Post Mortem Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 36

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Main Beneﬁts » !!! Uniformity of features! » " Easy to learn and repeat » # Easy to test, easy to debug » Uniformity -> abstractions for common use cases Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 38

Slide 39

Slide 39 text

Problems? » UIKit < React » Navigation (also UIKit..) » Dependencies between stores (not in Redux) Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 39

Slide 40

Slide 40 text

Flux isn't just for the Web! Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 40

Slide 41

Slide 41 text

Future Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 41

Slide 42

Slide 42 text

Future » Continue implementing everything in Flux » Build more UIKit abstractions where possible » ! for Apple to release a reactive UI layer » What about React Native? » Very interesting; but not yet ready for us Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 42

Slide 43

Slide 43 text

Minimize accidental complexity Increase repeatability Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 43

Slide 44

Slide 44 text

Flux isn't the only solution » Check out: Elm » Hopefully more alternatives in future Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 44

Slide 45

Slide 45 text

Want to Learn More? Detailed Blog Post: blog.benjamin-encz.de/post/real-world-ﬂux-ios/ ReSwift: https://github.com/reswift/reswift Slides: https://bit.ly/ﬂuxmobile @benjaminencz Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 45