Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Elm Architecture & Swift

The Elm Architecture & Swift

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

Yoshikuni Kato

September 20, 2020
Tweet

More Decks by Yoshikuni Kato

Other Decks in Programming

Transcript

  1. 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
  2. Agenda • Why Elm? • TEA experiments by Swift developers

    & me • Simple TEA implementation in Swift • Architecture After SwiftUI TEA = The Elm Architecture 3
  3. What are Elm & TEA? • Elm: functional language for

    web apps • The Elm Architecture (TEA) • GUI app architecture for Elm 5
  4. 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
  5. 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
  6. Presentations by Inami, 2017 • Making Elm with Swift, 03.2017

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

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

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

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

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

    5 https://www.objc.io/books/app-architecture/ 14
  12. WWDC18 • no new UI framework • only updates about

    UIKit • ! Apple won't make a new UI library, they'll stick to UIKit? 16
  13. 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
  14. WWDC19 • SwiftUI came suddenly • ! This is how

    it should be (e.g. React), but it's one year later than expected. 18
  15. 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
  16. TEA sample -- VIEW view : Model -> Html Msg

    view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (String.fromInt model) ] , button [ onClick Increment ] [ text "+" ] ] 21
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. Similarities with SwiftUI • Data Flow Through SwiftUI @ WWDC19

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

    8 8 https://developer.apple.com/videos/play/wwdc2019/226/ 31
  27. 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
  28. 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
  29. Comparison with other architecture Architecture Enum based Action Virtual View

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

    Let's try making enum based actions 37