Reactive State Machine (Japanese)

iOSDC Japan 2016 (Aug 20, 2016)
https://iosdc.jp/2016/c/node/32 (in Japanese)

Libraries: https://gist.github.com/inamiy/1835a88e00bd19dff003e779fe63a2ed

Transcript

1. Reactive State Machine 2016/08/20 #iOSDC Japan Yasuhiro Inami / @inamiy
2. ϦΞΫςΟϒ ϓϩάϥϛϯά
4. ࣌ؒܦաʹ൐͏ ΠϕϯτετϦʔϜ
5. Swift FRP༻ϥΠϒϥϦ (FRP = Functional Reactive Programming) • RxSwift • ReactiveCocoa (RAC) • SwiftBond / ReactiveKit • Interstellar • ReactKit ؔ਺ܕϓϩάϥϛϯάͰɺએݴతʹɺσʔλϑϩʔΛߏங͢Δ
6. !Λͭ͘Δ !͕ྲྀΕΔ
7. !ΛͲ͏͢Δʁ ৯΂Δ εϧʔ
8. !ΛҭͯΔ
9. !ͷ؅ཧ
10. ঢ়ଶͷมߋʢData Bindingʣ final class ViewModel<!> { var rawValue: ! let variable: RxSwift.Variable<!> let mutableProperty: RAC.MutableProperty<!> } mySuperEventEmitter.on { viewModel.rawValue = $0 } observable.bindTo(viewModel.variable) // RxSwift viewModel.mutableProperty <~ signal // ReactiveCocoa
11. ঢ়ଶͷऔಘʢData Observingʣ final class ViewModel<!> { var rawValue: ! let variable: RxSwift.Variable<!> let mutableProperty: RAC.MutableProperty<!> } // `viewModel.rawValue`͸؂ࢹͰ͖ͳ͍ʂ (KVOͰͳ͍ݶΓ) viewModel.variable.asObservable().doOn {...} // RxSwift viewModel.mutableProperty.signal.on {...} // ReactiveCocoa
12. Observable or Signal ≒ EventEmitter
13. Variable or MutableProperty ≒ EventEmitter + ݱࡏͷ஋
14. FRP + MVVMͰ ঢ়ଶ؅ཧ͕ ͱͬͯ΋؆୯ʂ
16. ຊ౰ʹʁ
17. (Swift߃ྫ) ϙέϞϯʹྫ͑ͯΈΔ
18. final class ViewModel<T> { let variable: Variable<T> }
19. final class ViewModel<T> { let variable: Variable<T> } final class ViewModel2<T> { let variable: Variable<T> }
20. final class ViewModel<T> { let variable: Variable<T> } final class ViewModel2<T> { let variable: Variable<T> } final class ViewModel3<T> { let variable: Variable<T> }
21. final class ViewModel<T> { let variable: Variable<T> } final class ViewModel2<T> { let variable: Variable<T> } final class ViewModel3<T> { let variable: Variable<T> } ... final class ViewModel1000<T> { let variable: Variable<T> }
22. let variable = { n in viewModel[n].variable } variable(1).asObservable() .map { ... } .bindTo(variable(2)) variable(2).variable.asObservable() .flatMap { ... } .bindTo(variable(3)) Observable.combineLatest(variable(123), variable(456)) .map { ... } .bindTo(variable(789)) ...
26. 1000ݸͷViewModel ͕৫Γͳ͢ ૖େͳεϖΫλΫϧ
27. ఺ࡏͨ͠ແ਺ͷঢ়ଶ ܅͸খӉ஦Λײͨ͜͡ͱ͕͋Δ͔
28. FRP + MVVM ◦ ϑϩʔߏங × ঢ়ଶ؅ཧ
29. FRP + MVVMͷ໰୊఺(1) // RxSwiftͰUI binding viewModel.variable.asDriver().drive(/* UIߋ৽ */) // 1. ೚ҙͷλΠϛϯάͰɺ͔ͭόϦσʔγϣϯͳ͠ʹɺ // ঢ়ଶมߋ͕Մೳ ! ʮՄมͳঢ়ଶʯ viewModel.variable.value = "!!! poops!" // ઒ΛԚ͢ਓ͕ݱΕΔ
30. final class ViewModel<T> { var rawValue: T let variable: Variable<T> } let variable͸ var rawValueͱ େͯ͠มΘΒͳ͔ͬͨ ΜͩΑʂʂʂ
31. FRP + MVVMͷ໰୊఺(2) // RxSwiftͰUI binding viewModel.variable.asDriver().drive(/* UIߋ৽ */) // 2. ೚ҙͷλΠϛϯάͰଞͷϑϩʔͱͭͳ͙ɾ֎͢͜ͱ͕Մೳ // ! ʮՄมͳσʔλϑϩʔʯ let disposable = !!!Observable .bindTo(viewModel.variable) // ͭͳ͙ disposable.dispose() // ֎͢
32. ʮσʔλϑϩʔʯ ͦͷ΋ͷ͕ ʮঢ়ଶʯ ͩͬͨΜͩ ʔʔʔʂʂʂ
33. FRP + MVVM ↓ ঢ়ଶʮૢ࡞ʯ͸ָʹͳͬͨ ↓ ͕ɺঢ়ଶͷ਺͸Ή͠Ζ૿͍͑ͯΔ
34. ຊ౰ʹঢ়ଶʮ؅ཧʯ ग़དྷͯΔʁ
35. !
36. ໨·͙Δ͘͠มಈ͢Δ ʮσʔλϑϩʔʯ ༧ଌͰ͖ͳ͍ແ਺ͷ ʮঢ়ଶʯ
37. ༧ଌՄೳͳʮঢ়ଶʯ Model-View-???
38. ൃ૝ͷస׵ σʔλϑϩʔͷݻఆ ঢ়ଶͷ਺Λ࠷খԽ
39. React.js
40. React.js • ViewΛ(ͳΔ΂͘)εςʔτϨεʹѻ͏ϑϨʔϜϫʔΫ • Component: ੜͷDOMͷ୅ΘΓʹϨϯμϦϯά • JSXΛ࢖ͬͯɺXMLϥΠΫʹπϦʔߏ଄Λهड़ • Componentͷঢ়ଶΛߋ৽͢Δͱɺࠩ෼ߋ৽ (Virtual DOM) • ਌͔Βࢠ΁ͷσʔλϑϩʔ • (ڱٛͷ)ϦΞΫςΟϒϓϩάϥϛϯάͱ͸ผ෺
43. React.jsͷ೉఺ ࢠ͔Β਌΁ͷ σʔλϑϩʔ͕ਏ͍
44. Redux
47. Redux • ΞϓϦͷશͯͷঢ়ଶΛɺ1ͭͷίϯςφ (Store) Ͱ؅ཧ • ΞϓϦ͸Ͱ͔͍ͬγϯάϧτϯ • ࠷্෦ͷ਌Component΋ঢ়ଶ؅ཧ͔Βղ์͞ΕΔ • Ͳͷ֊૚ͷComponent͔ΒͰ΋ɺίϯςφʹActionΛૹΔ͜ ͱ͕؆୯ • ࢠ͔Β਌΁ͷσʔλϑϩʔ
49. ໰୊఺΋͋Δ
50. Reduxͷ໰୊఺ • MiddlewareͷҐஔ෇͚ • ReducerΛ௨Δલʹ෭࡞༻(IO)Λѻ ͏ • ReducerΛ௨Γͳ͕Β෭࡞༻Λ ॲཧ͍ͨ͠৔߹͸ʁ • ີ݁߹͕ඞཁͳέʔε͸ଟ͍ • ॱংґଘ
51. Reduxͷ໰୊఺ • ඇಉظॲཧ͕೉͍͠ • MiddlewareͷதʹThunk? Promise? ES6 Generator? Observable? • Q. ෳ਺ͷMiddleware͕ඇಉظͰ࿈࠯൓Ԡͨ͠ΒͲ͏ͳ Δʁ!"!"!"! • A. ਏ͍ɻඇಉظॲཧνΣʔϯͳΒɺObservableͷ࿈݁ʹ ೚ͤͨํ͕෼͔Γ΍͍͢
52. ΋ͬͱྑ͍ઃܭΛ ߟ͑Δ!
53. ReduxͷܕΛோΊΔ • Action = ೖྗɺState = ঢ়ଶ • Store = ঢ়ଶίϯςφ • Reducer = (State, Action) -> State = ঢ়ଶભҠؔ਺ • Listener = State -> /* IO */ () = ঢ়ଶมߋΦϒβʔόʔ • Middleware = State -> ... -> Action -> /* IO */ Any = ෭࡞༻ϑοΫ
55. εςʔτϚγϯ • ܾఆੑʗඇܾఆੑɺ༗ݶʗແݶ • ΞΫηϓλʔʗϨίφΠβʔ • ϓογϡμ΢ϯɺνϡʔϦϯάɾϚγϯͳͲ • τϥϯεσϡʔαʔ • ϜʔΞɾϚγϯ (1956) • ϛʔϦɾϚγϯ (1955)
56. ϛʔϦɾϚγϯ (Σ, Ω, S, s0, δ, λ)
57. ϛʔϦɾϚγϯ ʮݱࡏͷঢ়ଶʯͱʮ֎෦ೖྗʯ͔Βɺʮ৽͍͠ঢ়ଶʯͱʮग़ ྗʯΛੜΈग़͢༗ݶτϥϯεσϡʔαʔ
58. ϛʔϦɾϚγϯ • Σ ͸ʮೖྗͷू߹ʯ • Ω ͸ʮग़ྗͷू߹ʯ • S ͸ʮঢ়ଶͷू߹ʯ • s0 ͸ʮॳظঢ়ଶʯʢs0 ∈ Sʣ • δ ͸ʮঢ়ଶભҠؔ਺ʯ δ: S x Σ → S • λ ͸ʮग़ྗؔ਺ʯ λ: S x Σ → Ω
59. Redux = ϛʔϦɾϚγϯ • Action = ೖྗ • State = ঢ়ଶ • Store = ॳظঢ়ଶʴঢ়ଶભҠؔ਺ • Reducer = ঢ়ଶભҠؔ਺ • Listener = ग़ྗ (IO) • Middleware = ग़ྗؔ਺
60. 1955೥͔Β͋ͬͨ
61. ͔࣌͠͠͸ɺ2016೥ ੈք͸FRPͷԌͰͭͭ·Εͨ
62. Redux + FRP
63. Redux + FRPʢվળҊʣ 1. ReducerͱMiddlewareΛ౷߹͢Δ: S x Σ -> S x Ω 2. ReducerͷฦΓ஋ΛOptionalʹ͢Δ • ঢ়ଶมԽ͕ͳ͍৔߹(ભҠࣦഊ)ɺෆཁͳdispatchΛආ͚Δ 3. FRP (ReactiveCocoa)Λ࢖͏ʢඇಉظνΣʔϯͷվળʣ 4. ग़ྗͷܕΛIO͔ΒɺʮIOʴ࣍ͷೖྗ΋ૹ৴Ͱ͖Δʯ ܕ SignalProducer<Input, NoError> Λ࢖͏
64. Reactive / Rx Automaton inamiy/ReactiveAutomaton inamiy/RxAutomaton
65. Redux ˰ ReactiveAutomaton • Store 㱺 Automaton • Action 㱺 Input • Reducer 㱺 (State, Input) -> (State, SignalProducer<Input, NoError>)? • Listener 㱺 Reply<State, Input> -> /* IO */ () • Middleware 㱺 !
66. ࢖༻ྫ
67. αϯϓϧίʔυʢϩάΠϯॲཧʣ • State: LoggedOut, LoggingIn, LoggedIn, LoggingOut • Input: Login, LoginOK, Logout, LogoutOK, ForceLogout
68. αϯϓϧίʔυʢϩάΠϯॲཧʣ // 1. switch-caseΛ࢖ͬͨύλʔϯϚονϯά let mapping: NextMapping = { fromState, input in switch (fromState, input) { case (.LoggedOut, .Login): return (.LoggingIn, loginOKProducer) case (.LoggingIn, .LoginOK): return (.LoggedIn, .empty) case (.LoggedIn, .Logout): return (.LoggingOut, logoutOKProducer) case (.LoggingOut, .LogoutOK): return (.LoggedOut, .empty) case (.LoggingIn, .ForceLogout), (.LoggedIn, .ForceLogout): return (.LoggingOut, forceLogoutOKProducer) default: return nil } }
69. αϯϓϧίʔυʢϩάΠϯॲཧʣ let canForceLogout: State -> Bool = [.LoggingIn, .LoggedIn].contains // 2. ΧελϜԋࢉࢠΛ࢖ͬͨύλʔϯϚονϯά let mappings: [NextMapping] = [ /* input | fromState => toState | effect */ /* ---------------------------------------------------------- */ .Login | .LoggedOut => .LoggingIn | loginOKProducer, .LoginOK | .LoggingIn => .LoggedIn | .empty, .Logout | .LoggedIn => .LoggingOut | logoutOKProducer, .LogoutOK | .LoggingOut => .LoggedOut | .empty, .ForceLogout | canForceLogout => .LoggingOut | forceLogoutOKProducer ]
70. αϯϓϧίʔυʢϩάΠϯॲཧʣ let (inputSignal, observer) = Signal<Input, NoError>.pipe() let send = observer.sendNext let automaton = Automaton( state: .LoggedOut, input: inputSignal, mapping: reduce(mappings), // combining reducers strategy: .Latest ) automaton.replies.observeNext { print($0) }
71. αϯϓϧίʔυʢϩάΠϯॲཧʣ expect(automaton.state.value) == .LoggedIn // ϩάΠϯࡁΈ send(Input.Logout) expect(automaton.state.value) == .LoggingOut // ϩάΞ΢τதɾɾɾ // `logoutOKProducer`ʹΑΓɺࣗಈతʹϩάΞ΢τ׬ྃʹભҠ expect(automaton.state.value) == .LoggedOut // ϩάΞ΢τࡁΈ send(Input.Login) expect(automaton.state.value) == .LoggingIn // ϩάΠϯதɾɾɾ // ͦͷ··์͓͚ͬͯ͹ɺࣗಈతʹϩάΠϯ׬ྃʹͳΔ͕ɾɾɾ send(Input.ForceLogout) // ڧ੍ϩάΞ΢τൃಈ!"! expect(automaton.state.value) == .LoggingOut // ϩάΞ΢τதɾɾɾ // `forceLogoutOKProducer`ʹΑΓɺࣗಈతʹϩάΞ΢τ׬ྃʹભҠ
73. ReactiveAutomaton • খ͞ͳঢ়ଶ؅ཧ͔ΒͰ͔͍ͬγϯάϧτϯ·Ͱɺ෯޿͘ରԠ • Elmͷجຊઃܭʹ͍ۙ • Program + (ݴޠ಺) Effect Manager = ΦʔτϚτϯ • Model = ঢ়ଶɺMsg = ೖྗ • update : Msg -> Model -> (Model, Cmd Msg) = ঢ়ଶ ભҠʴIOग़ྗؔ਺
75. Model View ViewModel
76. Model View ✨Automaton✨
77. ·ͱΊ • ʮσʔλϑϩʔʯͱ͍͏໊ͷʮঢ়ଶʯ • FRP + MVVMʹΑΔঢ়ଶ؅ཧ͸ґવͱͯ͠ෳࡶ • React.js + Redux͔ΒֶͿ • UIKitͷਐԽ΋ඞཁʢReactNativeͳͲʣ • Redux + FRP = Reactive State Machine • Elm͸ཁνΣοΫʢࢀߟɿ A Farewell to FRPʣ
78. Thanks!