Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Benjamin Encz

April 27, 2017
Tweet

More Decks by Benjamin Encz

Other Decks in Programming

Transcript

  1. Flux & Redux on Mobile The search for a repeatable

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

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

  6. 7

  7. Essential Complexity » A large amount of different states and

    valid/ invalid state transitions Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 9
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. Why Flux/Redux on Mobile? Flux & Redux on Mobile |

    @benjaminencz | CRAFT Conf, April 2017 19
  14. 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
  15. Can it work on mobile? Flux & Redux on Mobile

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

  17. 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
  18. 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
  19. Implementing Flux on iOS Flux & Redux on Mobile |

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

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

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

  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 37

  29. 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
  30. Problems? » UIKit < React » Navigation (also UIKit..) »

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

    Mobile | @benjaminencz | CRAFT Conf, April 2017 40
  32. 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
  33. Flux isn't the only solution » Check out: Elm »

    Hopefully more alternatives in future Flux & Redux on Mobile | @benjaminencz | CRAFT Conf, April 2017 44
  34. 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