The Elm Architecture & Swift

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

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