Setting State (Data Binding) final class ViewModel { var rawValue: Value let variable: RxSwift.Variable let mutableProperty: RAC.MutableProperty } mySuperEventEmitter.on { viewModel.rawValue = $0 } observable.bindTo(viewModel.variable) // RxSwift viewModel.mutableProperty
Getting State (Data Observing) final class ViewModel { var rawValue: Value let variable: RxSwift.Variable let mutableProperty: RAC.MutableProperty } // `viewModel.rawValue` is not observableʂ (if not KVO) viewModel.variable.asObservable().doOn {...} // RxSwift viewModel.mutableProperty.signal.on {...} // ReactiveCocoa
final class ViewModel { let variable: Variable } final class ViewModel2 { let variable: Variable } final class ViewModel3 { let variable: Variable } ... final class ViewModel1000 { let variable: Variable }
Problems in FRP + MVVM (1) // UI binding using RxSwift viewModel.variable.asDriver().drive(/* UI update */) // 1. State is too easy to change at anytime. viewModel.variable.value = "!!! poops!"
Problems in FRP + MVVM (2) // UI binding using RxSwift viewModel.variable.asDriver().drive(/* UI update */) // 2. Data-flow is too easy to change at anytime. let disposable = !!!Observable .bindTo(viewModel.variable) // connect disposable.dispose() // disconnect
React.js • JavaScript framework for stateless view management • Component: Renders view in replace of DOM • JSX: XML-like tree description • Virtual DOM: Diff-patch algorithm • Data-flow from parent to child • Not same as "Reactive Programming"
Redux • Singleton state container (Store) • Topmost component no longer needs state management • Any level of components can send Action to Store easily • Reducer: State transition using pure function • Data-flow from child to parent
Problems in Redux • Middleware V.S. Reducer • Middleware adds side-effect (IO) before passing Reducer • Q. What happens if we want to add side-effects while passing Reducer? • A. We often need coupled solution • Middleware is order-dependent
Problems in Redux • Asynchronous task is difficult • Use Thunk? Promise? ES6 Generator? Observable? inside Middleware? • Q. What happens if multiple Middlewares chain-react each other asynchronously??? !"!"!"! • A. ¯\_(π)_/¯ • Observable is much easier to handle async-chaining
Look through Redux types • Action = input, State • Store = state container • Reducer = (State, Action) -> State ɹɹ= state transition function • Listener = State -> /* IO */ () = state observer • Middleware = State -> ... -> Action -> /* IO */ Any = hooks side-effects
Mealy Machine • Σ = Set of Inputs • Ω = Set of Outputs • S = Set of States • s0 = Initial state (s0 ∈ S) • δ = State transition function, δ: S x Σ → S • λ = Output function, λ: S x Σ → Ω
Redux = Mealy Machine • Action = Σ = Set of Inputs • State = S = Set of States • Store = s0 + δ = Initial state + transition function • Reducer = δ = Transition function • Listener = Ω = Set of Outputs • Middleware = λ = Output function
Redux + FRP (Idea) 1. Merge Reducer and Middleware: S x Σ -> S x Ω 2. Use Optional for Reducer's return value • Avoid unnecessary dispatches for state transition failure 3. Use FRP (ReactiveCocoa) for async-chaining 4. Use SignalProducer for output type that can also send next Input
ReactiveAutomaton • State manager, from single tiny flag to whole app's states • Similar to Elm's architecture • Program + Effect Manager (language support) = Automaton • Model = State, Msg = Input • update : Msg -> Model -> (Model, Cmd Msg) = State transition function + Output function
Recap • "Data-flow" as the "State" • FRP + MVVM is not a silver bullet • Learn from React.js + Redux • Needs UIKit evolution (e.g. ReactNative) • Redux + FRP = Reactive State Machine • Elm is awesome (Ref: A Farewell to FRP)
inamiy
star_zero
os1ma
yusukebe
mkeeda
mikobaaaaa0920
m_seki
minodriven
codehex
coconala_engineer
manfredsteyer
yamatcha
microcms
lauravandoore
chrislema
chriscoyier
holman
keavy
shpigford
marcelosomers
malarkey
gr2m
paulrobertlloyd
jlugia
morganepeng