Flux and Redux on Mobile

Flux and Redux on Mobile

Flux is a pattern that was originally developed for web applications at Facebook. When I learned about the ideas behind Flux I quickly found that it should also be applicable to mobile applications as well. With ReSwift I've helped create an open source Redux-like implementation in Swift. At PlanGrid we have been implementing all new UI features in the last 1.5 years using the Flux pattern.

This talk will explore the basic ideas behind Flux and Redux and show how the two approaches solve some of the core problems of UI heavy applications. It will also dive deep into how Flux is used in production code at PlanGrid and which lessons we have learned so far.

De23af005c790b22f8ce4d201e6ca027?s=128

Benjamin Encz

April 27, 2017
Tweet

Transcript

  1. Benjamin Encz @benjaminencz Flux & Redux on Mobile | @benjaminencz

    | CRAFT Conf, April 2017 1
  2. Flux & Redux on Mobile The search for a repeatable

    pattern for UI heavy applications Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 2
  3. 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
  4. 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
  5. Complexity due to State Flux & Redux on Mobile |

    @benjaminencz | CRAFT Conf, April 2017 5
  6. 6

  7. 7

  8. Accidental complexity vs Essential complexity Flux & Redux on Mobile

    | @benjaminencz | CRAFT Conf, April 2017 8
  9. Essential Complexity » A large amount of different states and

    valid/ invalid state transitions Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 9
  10. 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
  11. Minimize accidental complexity Increase repeatability Flux & Redux on Mobile

    | @benjaminencz | CRAFT Conf, April 2017 11
  12. 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
  13. What is Flux? Flux & Redux on Mobile | @benjaminencz

    | CRAFT Conf, April 2017 13
  14. 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
  15. Source: Inspired by: "Hacker Way: Rethinking Web App Development at

    Facebook" 15
  16. Flux & Redux on Mobile | @benjaminencz | CRAFT Conf,

    April 2017 16
  17. 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
  18. 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
  19. Why Flux/Redux on Mobile? Flux & Redux on Mobile |

    @benjaminencz | CRAFT Conf, April 2017 19
  20. Why Flux/Redux on Mobile? » Same problems » complexity due

    to multi-directional data flow » No established patterns for building UI » MVC/MVP/MVVM are vaguely defined Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 20
  21. Can it work on mobile? Flux & Redux on Mobile

    | @benjaminencz | CRAFT Conf, April 2017 21
  22. 22

  23. Flux at PlanGrid Flux & Redux on Mobile | @benjaminencz

    | CRAFT Conf, April 2017 23
  24. Main Reasons to Switch » Previously no good pattern for

    UI code » KVO / Notifications / Delegation ! » Large, hard to test, controller classes Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 24
  25. 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
  26. Implementing Flux on iOS Flux & Redux on Mobile |

    @benjaminencz | CRAFT Conf, April 2017 26
  27. Each Feature consists of: » State » Actions » Store

    » View Model Provider » View Controller Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 27
  28. Boilerplate Code Not considered harmful! Flux & Redux on Mobile

    | @benjaminencz | CRAFT Conf, April 2017 28
  29. 29

  30. 1. State struct FilterState { let hideEverythingFilter: RepresentableFilter let shareStatusFilters:

    [RepresentableFilter] let issueFilters: [RepresentableFilter] let generalFilters: [RepresentableFilter] var selectedFilterGroup: FilterGroupType? = nil /// Indicates whether any filter is active right now var isFiltering: Bool = false } Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 30
  31. 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
  32. 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
  33. 4. View Model Provider func tableViewModelForState(state: FilterState) -> FluxTableViewModel Flux

    & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 33
  34. 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
  35. 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
  36. Post Mortem Flux & Redux on Mobile | @benjaminencz |

    CRAFT Conf, April 2017 36
  37. 37

  38. Main Benefits » !!! 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
  39. Problems? » UIKit < React » Navigation (also UIKit..) »

    Dependencies between stores (not in Redux) Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 39
  40. Flux isn't just for the Web! Flux & Redux on

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

    Conf, April 2017 41
  42. 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
  43. Minimize accidental complexity Increase repeatability Flux & Redux on Mobile

    | @benjaminencz | CRAFT Conf, April 2017 43
  44. Flux isn't the only solution » Check out: Elm »

    Hopefully more alternatives in future Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 44
  45. Want to Learn More? Detailed Blog Post: blog.benjamin-encz.de/post/real-world-flux-ios/ ReSwift: https://github.com/reswift/reswift

    Slides: https://bit.ly/fluxmobile @benjaminencz Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 45