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.

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
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
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
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
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