The Elm Architecture & Swift

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Agenda • Why Elm? • TEA experiments by Swift developers & me • Simple TEA implementation in Swift • Architecture After SwiftUI TEA = The Elm Architecture 3

Slide 4

Slide 4 text

Why Elm? 4

Slide 5

Slide 5 text

What are Elm & TEA? • Elm: functional language for web apps • The Elm Architecture (TEA) • GUI app architecture for Elm 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

TEA experiments by Swift developers & me 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Presentations by Inami, 2017 • Making Elm with Swift, 03.2017 2 2 https://speakerdeck.com/inamiy/swiftdeelmwozuo-ru-japanese 9

Slide 10

Slide 10 text

Presentations by Inami, 2017 • Elm Architecture in Swift, 05.2017 3 3 https://speakerdeck.com/inamiy/elm-architecture-in-swift 10

Slide 11

Slide 11 text

Curated list by Inami, 2017 • React & Elm inspired frameworks in Swift 4 4 https://gist.github.com/inamiy/bd257c60e670de8a144b1f97a07bacec 11

Slide 12

Slide 12 text

App Architecture from objc.io, 2018 5 • This was released in May 2018. 5 https://www.objc.io/books/app-architecture/ 12

Slide 13

Slide 13 text

App Architecture from objc.io, 2018 5 • The Elm Architecture as an experimental architecture 5 https://www.objc.io/books/app-architecture/ 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

My wish before WWDC18 15

Slide 16

Slide 16 text

WWDC18 • no new UI framework • only updates about UIKit • ! Apple won't make a new UI library, they'll stick to UIKit? 16

Slide 17

Slide 17 text

My trials to understand TEA • TEA sample from objc.io was a bit difﬁcult 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

Slide 18

Slide 18 text

WWDC19 • SwiftUI came suddenly • ! This is how it should be (e.g. React), but it's one year later than expected. 18

Slide 19

Slide 19 text

TEA implementation 19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

TEA sample -- VIEW view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (String.fromInt model) ] , button [ onClick Increment ] [ text "+" ] ] 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

1st sample in Swift ... // VIEW var viewController: ViewController { return ._viewController( .stackView( views: [ .button(text: "-", onTap: .decrement), .label(text: "\(value)"), .button(text: "+", onTap: .increment) ], axis: .vertical, distriburtion: .fillEqually ) ) } } 23

Slide 24

Slide 24 text

Virtual Views indirect enum ViewController { case _viewController(View) } indirect enum View { case _label(Label) case _button(Button) case _stackView(StackView) ... } • e.g. Virtual DOM (React) • (SwiftUI is basically virtual view) 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

2nd sample: Cmd & Subscription // VIEW var viewController: ViewController { 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

Slide 28

Slide 28 text

2nd sample: Cmd & Subscription mutating func update(_ message: Message) -> [Command] { 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

Slide 29

Slide 29 text

2nd sample: Cmd & Subscription // SUBSCRIPTIONS var subscriptions: [Subscription] { 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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Architecture After SwiftUI 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Comparison with other architecture Architecture Enum based Action Virtual View MVVM + UIKit - - MVVM + SwiftUI - Redux (XxxFeedback) + UIKit ✅ - Redux (XxxFeedback) + SwiftUI ✅ TEA (or TCA) ✅ 36

Slide 37

Slide 37 text

Summary • We can learn a lot from TEA • Let's try making enum based actions 37

Slide 38

Slide 38 text

Thank you! @yoshikuni_kato 38