"An insight from a functional world: how Elm changes iOS reality" from Riccardo Ferretti

In this presentation Riccardo shares his experience how Elm-inspired architecture is used for his application written in Swift. As a listener you'll be guided through introduction to Elm, porting it to Swift and what has to be done to achieve this. Riccardo talks about hidden gems on this way, will describe pros and cons of this architecture.

Transcript

1. Elm Inspired Architecture in Swift Riccardo Ferretti @riccardoferrett
2. About me Previously Backend and Web Developing for OSX Principal Engineer @ LinkedIn Technical Architect @ AKQA CTO @ Yourvine CTO @ Momentumworks @riccardoferrett
3. MVC @riccardoferrett Controller View Model
4. Elm Architecture View Update Model Action @riccardoferrett Unidirectional Data Flow
5. struct Model { ... } 
 
 
 Elm Architecture Model @riccardoferrett
6. Elm Architecture Update struct Model { ... } enum Action {
 case DoThing
 case DoOtherThing
 } func update(Action, Model) -> Model @riccardoferrett
7. Elm Architecture View struct Model { ... } enum Action {
 case DoThing
 case DoOtherThing
 } func update(Action, Model) -> Model func view(Model) -> Html<Action> @riccardoferrett
8. Elm Architecture View Update Model Action @riccardoferrett Unidirectional Data Flow
9. Counter Fractal Model Update View @riccardoferrett
10. Counter Fractal Model Update View Pair of Counters Model Update View Counter Model Update View @riccardoferrett
11. Counter Fractal Model Update View Pair of Counters Model Update View Counter Model Update View Model Update View App Other Thing Model Update View @riccardoferrett
12. Elm → Swift
13. Elm
14. Elm p1 = {x = 5, y = 3, z = 1} p2 = { p1 |
 x = p1.x + 1,
 y = 7
 } Immutable Data @riccardoferrett
15. Swift structs Immutable struct Point {
 let x: Int
 let y: Int
 let z: Int
 } let p1 = Point(x:5, y:3, z:1) p1.x = p1.x + 1 p1.y = 7 let p2 = Point(
 x:p1.x+1, y:7, z:p1.z
 ) @riccardoferrett
16. Swift structs Immutable struct Point: Immutable {
 let x: Int
 let y: Int
 let z: Int
 } // codegen let p2 = p1
 .set(x: p1.x+1)
 .set(y: 7) @riccardoferrett
17. Swift structs Equatable struct Person {
 let first: String
 let last: String
 } let p1 = Person(...) let p2 = Person(...) let isEqual = p1 == p2 @riccardoferrett
18. Swift structs Equatable struct Person: Equatable {
 let first: String
 let last: String
 } func ==(lhs: Person, rhs: Person) … let p1 = Person(...) let p2 = Person(...) let isEqual = p1 == p2 @riccardoferrett
19. Swift structs Equatable struct Person: AutoEquatable {
 let first: String
 let last: String
 } // codegen let p1 = Person(...) let p2 = Person(...) let isEqual = p1 == p2 @riccardoferrett
20. Swift structs Diffable struct Person: AutoDiffable {
 let first: String
 let last: String
 } // codegen let p1 = Person(...) let p2 = Person(...) let diff = p1.diff(p2) @riccardoferrett
21. Code Generator Swift + SourceKitten + Stencil @riccardoferrett
22. Code Generator https://github.com/momentumworks/GenKit Now open source
23. Elm func view(Model) -> Html<Action> Virtual DOM Declarative way of defining UI @riccardoferrett
24. UIKit No VDOM in Swift/UIKit @riccardoferrett
25. UIKit @riccardoferrett typealias Instance = (UIView, Support) func create() -> Instance func render(
 instance: Instance, 
 model: Model, 
 dispatch: Action ->()) -> Void Declarative UI Our “Solution”
26. Elm → Swift
27. Component Template @riccardoferrett protocol Component {
 associatedtype Model
 associatedtype Action associatedtype Support associatedtype View associatedtype Instance = (View, Support) static func create() -> Instance static func render(Instance, Model, Action ->()) -> Void static func update(Action, Model) -> Model }
28. Component Template @riccardoferrett protocol Component {
 associatedtype Model
 associatedtype Action associatedtype Support associatedtype View associatedtype Instance = (View, Support) static func create() -> Instance static func render(Instance, Model, Action ->()) -> Void static func update(Action, Model) -> Model }
29. Lessons
30. Challenges UIKit is very OO Animations Deep nesting of components @riccardoferrett
31. Unidirectional Data Flow Separation of concerns Easier to follow Time travel @riccardoferrett
32. Single State Tree Describes your application Makes time travel easier Diff for debugging @riccardoferrett
33. Time Travel Record/replay actions Tune pure functions Be careful of side effects @riccardoferrett
34. Components @riccardoferrett Single responsibility Encapsulation Clear API Reusable Promote composition over inheritance
35. Platform Abstraction @riccardoferrett Only view is aware of UIKit Decoupling Reusability
36. Elm → Swift > Component based > Immutable data > Single state tree > Unidirectional data flow > Pure functions @riccardoferrett
37. Credits and Notes Rheese @rheeseyb Mark @itchingpixels Sean @seanparsons Krzysztof @merowing_ ReSwift https://github.com/ReSwift/ReSwift SourceKitten https://github.com/jpsim/SourceKitten Stencil https://github.com/kylef/Stencil GenKit https://github.com/momentumworks/GenKit
38. Thanks @riccardoferrett