The Elm Architecture & Swift

The Elm Architecture & Swift

Some thoughts about The Elm Architecture and swift.
This is not presented anywhere yet.

Ac3c0c2b458cdf0fe6a6e98a46e34322?s=128

Yoshikuni Kato

September 20, 2020
Tweet

Transcript

  1. The Elm Architecture & Swift @yoshikuni_kato event and date: TBD

    1
  2. Who am I ? • Yoshikuni Kato • iOS Engineerʢ5+

    yearsʣ • (Some companies in Japan) -> STRV (since 03.2019) • Twitter: @yoshikuni_kato • GitHub: @yoching • Interests: Functional Programming, Software Design, UI Implementation 2
  3. Agenda • Why Elm? • TEA experiments by Swift developers

    & me • Simple TEA implementation in Swift • Architecture After SwiftUI TEA = The Elm Architecture 3
  4. Why Elm? 4

  5. What are Elm & TEA? • Elm: functional language for

    web apps • The Elm Architecture (TEA) • GUI app architecture for Elm 5
  6. SwiftUI & Elm • SwiftUI resembles Elm cf. Clean Architecture

    for SwiftUI 1 • Both use virtual views • Some experiments by Swift developers since 2017 (longer than SwiftUI) • Knowing Elm & TEA brings us insight into SwiftUI 1 https://medium.com/swlh/clean-architecture-for-swiftui-6d6c4eb1cf6a 6
  7. TEA experiments by Swift developers & me 7

  8. TEA experiments by Swift developers & me (This is from

    my perspective) 2017 Inami presentations, gist about Elm inspired frameworks 2018 May: AppArchitecture book 2018 June: WWDC - no updates about virtual UI 2018 Dec: my experiments 2019 June: SwiftUI came 8
  9. Presentations by Inami, 2017 • Making Elm with Swift, 03.2017

    2 2 https://speakerdeck.com/inamiy/swiftdeelmwozuo-ru-japanese 9
  10. Presentations by Inami, 2017 • Elm Architecture in Swift, 05.2017

    3 3 https://speakerdeck.com/inamiy/elm-architecture-in-swift 10
  11. Curated list by Inami, 2017 • React & Elm inspired

    frameworks in Swift 4 4 https://gist.github.com/inamiy/bd257c60e670de8a144b1f97a07bacec 11
  12. App Architecture from objc.io, 2018 5 • This was released

    in May 2018. 5 https://www.objc.io/books/app-architecture/ 12
  13. App Architecture from objc.io, 2018 5 • The Elm Architecture

    as an experimental architecture 5 https://www.objc.io/books/app-architecture/ 13
  14. App Architecture from objc.io, 2018 5 • some Video Contents

    5 https://www.objc.io/books/app-architecture/ 14
  15. My wish before WWDC18 15

  16. WWDC18 • no new UI framework • only updates about

    UIKit • ! Apple won't make a new UI library, they'll stick to UIKit? 16
  17. My trials to understand TEA • TEA sample from objc.io

    was a bit difficult for me to understand. Tried to understand them by making them. • yoching/SwiftElmButtonSample 6 • yoching/SwiftElmSample2 7 • mostly done in 12.2018 7 https://github.com/yoching/SwiftElmSample2 6 https://github.com/yoching/SwiftElmButtonSample 17
  18. WWDC19 • SwiftUI came suddenly • ! This is how

    it should be (e.g. React), but it's one year later than expected. 18
  19. TEA implementation 19

  20. TEA sample -- MODEL type alias Model = Int init

    : Model init = 0 -- UPDATE type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1 20
  21. TEA sample -- VIEW view : Model -> Html Msg

    view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (String.fromInt model) ] , button [ onClick Increment ] [ text "+" ] ] 21
  22. 1st sample in Swift struct AppState { // MODEL var

    value: Int // UPDATE enum Message { case increment, decrement } mutating func update(_ message: Message) { switch message { case .increment: value = value + 1 case .decrement: value = value - 1 } } ... 22
  23. 1st sample in Swift ... // VIEW var viewController: ViewController<Message>

    { return ._viewController( .stackView( views: [ .button(text: "-", onTap: .decrement), .label(text: "\(value)"), .button(text: "+", onTap: .increment) ], axis: .vertical, distriburtion: .fillEqually ) ) } } 23
  24. Virtual Views indirect enum ViewController<Message> { case _viewController(View<Message>) } indirect

    enum View<Message> { case _label(Label) case _button(Button<Message>) case _stackView(StackView<Message>) ... } • e.g. Virtual DOM (React) • (SwiftUI is basically virtual view) 24
  25. 2nd sample: Cmd & Subscription 1st sample + save/load •

    Save button: save the value to UserDefaults (= side effect without callback) • Load button: load the value from UserDefaults (= side effect with callback) • Load value when app becomes active • Save value when app enters background 25
  26. 2nd sample: Cmd & Subscription struct AppState { // MODEL

    var value: Int // UPDATE enum Message { case increment case decrement case save case load case loaded(Int) } ... 26
  27. 2nd sample: Cmd & Subscription // VIEW var viewController: ViewController<Message>

    { return ._viewController( .stackView( views: [ .button(text: "-", onTap: .decrement), .label(text: "\(value)"), .button(text: "+", onTap: .increment), .button(text: "save", onTap: .save), .button(text: "load", onTap: .load) ], axis: .vertical, distribution: .fillEqually ) ) } 27
  28. 2nd sample: Cmd & Subscription mutating func update(_ message: Message)

    -> [Command<Message>] { switch message { case .increment: value = value + 1 return [] case .decrement: value = value - 1 return [] case .save: return [.save(value: value)] case .load: return [.load(available: { .loaded($0) })] case .loaded(let value): self.value = value return [] } } • need to prepare custom commands 28
  29. 2nd sample: Cmd & Subscription // SUBSCRIPTIONS var subscriptions: [Subscription<Message>]

    { return [ .notification( name: UIApplication.didBecomeActiveNotification, { notification -> Message in return .load }), .notification( name: UIApplication.willResignActiveNotification, { notification -> Message in return .save }) ] } • need to prepare custom subscriptions 29
  30. Similarities with SwiftUI • Data Flow Through SwiftUI @ WWDC19

    8 8 https://developer.apple.com/videos/play/wwdc2019/226/ 30
  31. Similarities with SwiftUI • Data Flow Through SwiftUI @ WWDC19

    8 8 https://developer.apple.com/videos/play/wwdc2019/226/ 31
  32. Architecture After SwiftUI 32

  33. SwiftUI + TEA • rizumita/Selm • pointfreeco/swift-composable-architecture 33

  34. The Composable Architecture (TCA) • from point-free • inspired by

    TEA apparently • high quality • Effect is very close to Cmd in TEA • ! Finally TEA came to reality. It's no more "experimental" architecture 34
  35. Common factor in new architecture: Enum based actions • In

    new architecture, actions are often represented as types (usually enum) • e.g. actions are represented as functions/methods in other architectures like MVC, MVVM • easier to test, easier to handle because they are value types • Lots of architecture are going towards this direction 35
  36. Comparison with other architecture Architecture Enum based Action Virtual View

    MVVM + UIKit - - MVVM + SwiftUI - Redux (XxxFeedback) + UIKit ✅ - Redux (XxxFeedback) + SwiftUI ✅ TEA (or TCA) ✅ 36
  37. Summary • We can learn a lot from TEA •

    Let's try making enum based actions 37
  38. Thank you! @yoshikuni_kato 38