Elm Architecture in Swift

Transcript

1. Elm Architecture in Swift 2017/05/08-09 MCE Conf #MCE2017 Yasuhiro Inami

   / @inamiy
2. None

3. Architecture

4. None
5. None
6. None
7. None
8. None

9. Modern iOS Architectures • MVC, MVP, MVVM, MV* (whatever) •

   Clean Architecture • VIPER (View-Interactor-Presenter-Entity-Routing) • Why separate layers? • Less dependency (code reusability, testability) • For our understandings (sharing design philosophy)

10. GUI first

11. Layer Ownership • UIApplicationMain → AppDelegate • AppDelegate → Window

    → View(Controller) • View → Presenter (or ViewModel) • Presenter → UseCase (or Interactor) • UseCase → Repository → DataStore → Entity • Presenter → Wireframe (or Router)

12. App → View View → Model

13. View → Model

14. ☠ → Model

15. ☠ → ☠

16. ☠ → ☠ ← View

17. None

18. Multiple owners? protocol MyModelProtocol { ... } class MyView: UIView

    { let model: MyModelProtocol let subview: MySubView init(model: MyModelProtocol) { self.model = model // retained by ARC self.subview = MySubView(model: model) // pass model ... } } let model = MyModel(...) let view1 = MyView1(model: model) // pass model let view2 = MyView2(model: model) // pass model ... // pass, pass, pass... (manually)

19. class MyView: UIView, NibLoadable { // using Interface Builder var

    model: MyModelProtocol? { // optional + `var` didSet { self.subview.model = model // pass model via setter } } private(set) var subview: MySubView? // optional + `var` override func awakeFromNib() { super.awakeFromNib() self.subview = MySubView.loadFromNib() ... } } let model = MyModel(...) let view1 = MyView1.loadFromNib() view1.model = model // pass model via setter ... // pass, pass, pass...
20. None

21. Let it be singleton? class GodModel { static let shared

    = GodModel() // lives forever } class MyView: UIView { // no `let model` override init() { // no arguments super.init() self.subview = MySubview() print(GodModel.shared.message) // can call from anywhere } } let view = MyView() // no arguments to pass
22. None

23. View → Model

24. View1 → Model1 View2 → Model2 View3 → Model3 View4

    → Model4 View5 → Model5

25. View1 <~> Model1 View2 <~> Model2 View3 <~> Model3 View4

    <~> Model4 View5 <~> Model5

26. Model1 ~> (Web API) ~> Model2 Model2 ~> (Database) ~>

    Model3 Model3 + Model4 ~> (Calculation) ~> Model5

27. Model1 ~> (Web API) ~> Model2 Model2 ~> (Database) ~>

    Model3 Model3 + Model4 ~> (Calculation) ~> Model5 ... Model6 ~> (Web API) ~> Model7 Model8 ~> (Database) ~> Model9 Model9 + Model10 ~> (Calculation) ~> Model11 ... Model101 ~> (Web API) ~> Model102 Model102 ~> (Database) ~> Model103 Model103 + Model104 ~> (Calculation) ~> Model105 ... Model1001 ~> (Web API) ~> Model1002 Model1002 ~> (Database) ~> Model1003 Model1003 + Model1004 ~> (Calculation) ~> ... ...
28. None
29. None

30. App → View View → Model

31. App → View App → Model

32. App → View App → Model

33. ! let model = view.model

34. ! let model = app.model

35. ! let model = app.model let view = app.render(model)

36. Model comes first View comes secondary

37. React

38. None
39. None
40. None
41. None

42. Redux

43. None

44. React + Redux • React: Renders view in replace of

    stateful DOM • Virtual DOM: Efficient diff-patch algorithm • Redux: Singleton state container • Reducer: State transition using pure function • Middleware: Generates side-effect • Action, Reducer, and Middleware defines app's domain • Popular as a functional programming approach
45. None

46. React Native ReactXP

47. None

48. Elm

49. Elm • Functional programming language for web app • Generates

    HTML/CSS/JavaScript • Purely functional, static typing, strict evaluation • No typeclass (protocol) nor FRP = easy to understand • Uses Virtual DOM & Effect Manager • Unidirectional dataflow known as Elm Architecture
50. None

51. Model View Update

52. main = Html.beginnerProgram { model = 0, view = view,

    update = update } type Msg = Increment | Decrement update msg model = case msg of Increment -> model + 1 Decrement -> model - 1 view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]

53. Elm (V.S. React + Redux) • Elm's VirtualDOM doesn't... •

    own state (no setState) • manage lifecycle (no componentDidMount) • Redux is already built-in (Effect Manager) • Better effect handling inside pure "update (reducer)", not "middleware" • Typed (no propTypes validation)

54. Elm Architecture in iOS...? !

55. WKWebView JavaScriptCore

56. None

57. let program = BeginnerProgram(model: 0, view: view, update: update) ...

    enum Msg { case increment, decrement } func update(msg: Msg, model: Model) -> Model { switch msg { case .increment: return model + 1 case .decrement: return model - 1 } } func view(model: Model) -> Html<Msg> { return div(children: [ button(attributes: [onClick(.decrement)], children: [text("-")]), div(children: [text("\(model)")]), button(attributes: [onClick(.increment)], children: [text("+")]) ]) }

58. Requirements

59. Virtual DOM

60. None

61. Diff & Patch

62. VTree https://github.com/inamiy/VTree

63. VTree • https://github.com/inamiy/VTree • VirtualDOM for UIKit • Inspired by

    Matt-Esch/virtual-dom • Diff & Patch • func diff(old: VTree, new: VTree) -> Patch • func apply(patch: Patch, to: UIView) -> UIView?

64. Example var model = 0 var tree = render(model) //

    virtual view var view = tree.createView() // real view timer(1) { model += 1 let newTree = render(model) let patch = diff(old: tree, new: newTree) view = apply(patch: patch, to: view) }

65. protocol VTree { associatedtype ViewType: View associatedtype MsgType: Message var

    key: Key? { get } // for efficient reordering var props: [String: Any] { get } // can be mapped by Mirror & KVC var propsKeysForMeasure: [String] { get } // for flexbox measurement var flexbox: Flexbox.Node? { get } // for view layout var handlers: HandlerMapping<MsgType> { get } // e.g. target-action var gestures: [GestureEvent<MsgType>] { get } var children: [AnyVTree<MsgType>] { get } func createView<Msg2: Message>(_ msgMapper: @escaping (MsgType) -> Msg2) -> ViewType } class AnyVTree<Msg: Message>: VTree { ... } // type-erasure

66. Flexbox • inamiy/Flexbox • CSS Flexbox layout engine • Swift

    wrapper of facebook/yoga • Cross-platform, used in ReactNative • Originally from joshaber/SwiftBox • Can calculate asynchronously

67. State Machine (Automaton)

68. None

69. State Machine • Manages app state (Model) and handles input

    (Msg) via state-transition function (update) that may include additional side-effect (Cmd) • That is, Mealy Machine (transducer) • A prototype of Redux since 1955 • Expressed as 6-tuple (Σ, Ω, S, s0, δ, λ)

70. 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 Σ → Ω

71. Elm works as Mealy Machine program : { init :

    (model, Cmd msg) , update : msg -> model -> (model, Cmd msg) , subscriptions : model -> Sub msg , view : model -> Html msg } -> Program Never model msg "update" has (almost) the same type as (Σ, S) -> (S, Ω)

72. Reactive / Rx Automaton inamiy/ReactiveAutomaton inamiy/RxAutomaton

73. ReactiveAutomaton • https://github.com/inamiy/ReactiveAutomaton • Uses ReactiveSwift (FRP) for easy event

    handling • Also have RxSwift version • Related Talks • iOSDC Japan 2016 (Japanese) • iOSConf SG 2016 (English)

74. Sample code (Login flow) • State: LoggedOut, LoggingIn, LoggedIn, LoggingOut

    • Input: Login, LoginOK, Logout, LogoutOK, ForceLogout

75. Sample code (Login flow) // 1. switch-case pattern matching let

    mapping: EffectMapping = { 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 } }

76. Sample code (Login flow) let canForceLogout: State -> Bool =

    [.loggingIn, .loggedIn].contains // 2. Fancy pattern matching using Swift's custom operators let mappings: [EffectMapping] = [ /* input | fromState => toState | effect */ /* ---------------------------------------------------------- */ .login | .loggedOut => .loggingIn | loginOKProducer, .loginOK | .loggingIn => .loggedIn | .empty, .logout | .loggedIn => .loggingOut | logoutOKProducer, .logoutOK | .loggingOut => .loggedOut | .empty, .forceLogout | canForceLogout => .loggingOut | forceLogoutOKProducer ]

77. VTree + Automaton

78. SwiftElm https://github.com/inamiy/SwiftElm

79. None
80. None

81. Tricks

82. Template Metaprogramming • krzysztofzablocki/Sourcery • Uses SourceKitten (AST parser) &

    Stencil (template) • Code-generate to reduces verbose code • AutoEquatable, AutoHashable, AutoCases, AutoLenses, Auto-LinuxMain.swift, etc • Used to extract user-defined enum Msg case-functions to evaluate from SwiftElm runtime

83. Equatable Function • dankogai/peekFunc ✨"✨ func peekFunc<A, R>(_ f: (A)

    -> R) -> (fp: Int, ctx: Int) { let (_, low) = unsafeBitCast(f, to: (Int, Int).self) let offset = MemoryLayout<Int>.size == 8 ? 16 : 12 let ptr = UnsafePointer<Int>(bitPattern: low + offset) return (ptr!.pointee, ptr!.successor().pointee) } • Required for comparing enum Msg case-functions • Use FuncBox<A, R> wrapper to avoid reabstraction thunk
84. None

85. For more safe version... Zelkova https://github.com/inamiy/Zelkova

86. Recap • Modern iOS Architecture ... Layer ownership problem •

    New Big Wave ! ... React + Redux, Elm • VTree (Virtual DOM) • ReactiveAutomaton (State Machine) • ... and some hacks ✨#✨ • Elm Architecture in Swift $

87. Thanks! Yasuhiro Inami @inamiy