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

Como aplicar la arquitectura de Elm en Swift

Como aplicar la arquitectura de Elm en Swift

Version reducida para https://char.la/ de mi presentación sobre Portal y como aplicar la aquitectura de Elm en Swift.

https://speakerdeck.com/guidomb/a-portal-from-elm-to-swift

17411ddb51e17861ef4f8e2d866f7ab6?s=128

Guido Marucci Blas

June 01, 2017
Tweet

More Decks by Guido Marucci Blas

Other Decks in Programming

Transcript

  1. A Portal from Elm to Swift 1 — A Portal

    from Elm to Swift by Guido Marucci Blas
  2. Guido Marucci Blas Co-founder & tech lead at Wolox CTO

    at Syrmo Twitter: @guidomb Blog: http://guidomb.blog GitHub: http://github.com/ guidomb 2 — A Portal from Elm to Swift by Guido Marucci Blas
  3. 3 — A Portal from Elm to Swift by Guido

    Marucci Blas
  4. A Portal from Elm to Swift 4 — A Portal

    from Elm to Swift by Guido Marucci Blas
  5. 5 — A Portal from Elm to Swift by Guido

    Marucci Blas
  6. 6 — A Portal from Elm to Swift by Guido

    Marucci Blas
  7. 7 — A Portal from Elm to Swift by Guido

    Marucci Blas
  8. 8 — A Portal from Elm to Swift by Guido

    Marucci Blas
  9. MVC - Problems → Massive fat controllers → Hard to

    test → Highly coupled → Lots of boilerplate 9 — A Portal from Elm to Swift by Guido Marucci Blas
  10. MVC - Possible solutions → Extract business logic → Extract

    "side-effects" into services with protocols → Use dependency injection → Use notifications 10 — A Portal from Elm to Swift by Guido Marucci Blas
  11. MVVM - Problems → Requires a binding mechanisim → It's

    not clear who is responsable for view transitions → Forces you to use DI framework, singletons or propagate dependencies over the whole hierarchy 11 — A Portal from Elm to Swift by Guido Marucci Blas
  12. All this architectures still have the same problems 12 —

    A Portal from Elm to Swift by Guido Marucci Blas
  13. The application's state is spread over several components 13 —

    A Portal from Elm to Swift by Guido Marucci Blas
  14. Which means state is mutated all over the place 14

    — A Portal from Elm to Swift by Guido Marucci Blas
  15. Which also means that if state needs to be shared,

    it must be kept in sync 15 — A Portal from Elm to Swift by Guido Marucci Blas
  16. Shared mutable state is the root of all EVIL 16

    — A Portal from Elm to Swift by Guido Marucci Blas
  17. The other big issue is how this architectures manage side-effects

    17 — A Portal from Elm to Swift by Guido Marucci Blas
  18. What do we do next? 18 — A Portal from

    Elm to Swift by Guido Marucci Blas
  19. The Elm architecture 19 — A Portal from Elm to

    Swift by Guido Marucci Blas
  20. 20 — A Portal from Elm to Swift by Guido

    Marucci Blas
  21. 21 — A Portal from Elm to Swift by Guido

    Marucci Blas
  22. but what about Swift? 22 — A Portal from Elm

    to Swift by Guido Marucci Blas
  23. http://bit.ly/2rFAciX 23 — A Portal from Elm to Swift by

    Guido Marucci Blas
  24. If you want the full power of the Elm architecture

    you need ... 24 — A Portal from Elm to Swift by Guido Marucci Blas
  25. Declaratives UI 25 — A Portal from Elm to Swift

    by Guido Marucci Blas
  26. But UIKit will make your life miserable 26 — A

    Portal from Elm to Swift by Guido Marucci Blas
  27. guidomb/Portal 27 — A Portal from Elm to Swift by

    Guido Marucci Blas
  28. A (potentially) cross-platform, unidirectional data flow framework to build applications

    using a declarative and immutable UI API. 28 — A Portal from Elm to Swift by Guido Marucci Blas
  29. 100% written in Swift 29 — A Portal from Elm

    to Swift by Guido Marucci Blas
  30. The declarative API is NOT coupled to UIKit 30 —

    A Portal from Elm to Swift by Guido Marucci Blas
  31. facebook/yoga 31 — A Portal from Elm to Swift by

    Guido Marucci Blas
  32. enum Message { case like case goToDetailScreen } let component:

    Component<Message> = container( children: [ label( text: "Hello PortalView!", style: labelStyleSheet() { base, label in base.backgroundColor = .white label.textColor = .red label.textSize = 12 }, layout: layout() { $0.flex = flex() { $0.grow = .one } $0.justifyContent = .flexEnd } ) button( properties: properties() { $0.text = "Tap to like!" $0.onTap = .like } ) button( properties: properties() { $0.text = "Tap to got to detail screen" $0.onTap = .goToDetailScreen } ) ] ) 32 — A Portal from Elm to Swift by Guido Marucci Blas
  33. label( text: "Hello PortalView!", style: labelStyleSheet() { base, label in

    base.backgroundColor = .white label.textColor = .red label.textSize = 12 }, layout: layout() { $0.flex = flex() { $0.grow = .one } $0.justifyContent = .flexEnd } ) 33 — A Portal from Elm to Swift by Guido Marucci Blas
  34. button( properties: properties() { $0.text = "Tap to like!" $0.onTap

    = .like } ) 34 — A Portal from Elm to Swift by Guido Marucci Blas
  35. public indirect enum Component<MessageType> { case button(ButtonProperties<MessageType>, StyleSheet<ButtonStyleSheet>, Layout) case

    label(LabelProperties, StyleSheet<LabelStyleSheet>, Layout) case mapView(MapProperties, StyleSheet<EmptyStyleSheet>, Layout) case imageView(Image, StyleSheet<EmptyStyleSheet>, Layout) case container([Component<MessageType>], StyleSheet<EmptyStyleSheet>, Layout) case table(TableProperties<MessageType>, StyleSheet<TableStyleSheet>, Layout) case collection(CollectionProperties<MessageType>, StyleSheet<EmptyStyleSheet>, Layout) case carousel(CarouselProperties<MessageType>, StyleSheet<EmptyStyleSheet>, Layout) case touchable(gesture: Gesture<MessageType>, child: Component<MessageType>) case segmented(ZipList<SegmentProperties<MessageType>>, StyleSheet<SegmentedStyleSheet>, Layout) case progress(ProgressCounter, StyleSheet<ProgressStyleSheet>, Layout) case textField(TextFieldProperties<MessageType>, StyleSheet<TextFieldStyleSheet>, Layout) case custom(componentIdentifier: String, layout: Layout) case spinner(Bool, StyleSheet<SpinnerStyleSheet>, Layout) } 35 — A Portal from Elm to Swift by Guido Marucci Blas
  36. but what about state management and side- effects? 36 —

    A Portal from Elm to Swift by Guido Marucci Blas
  37. public protocol Application { associatedtype MessageType associatedtype StateType associatedtype CommandType

    associatedtype RouteType: Route associatedtype SubscriptionType: Equatable associatedtype NavigatorType: Equatable var initialState: StateType { get } var initialRoute: RouteType { get } func translateRouteChange(from currentRoute: RouteType, to nextRoute: RouteType) -> MessageType? func update(state: StateType, message: MessageType) -> (StateType, CommandType?)? func view(for state: StateType) -> View<RouteType, MessageType, NavigatorType> func subscriptions(for state: StateType) -> [Subscription<MessageType, RouteType, SubscriptionType>] } 37 — A Portal from Elm to Swift by Guido Marucci Blas
  38. public struct View<RouteType: Route, MessageType, NavigatorType: Navigator> { public typealias

    ActionType = Action<RouteType, MessageType> public enum Content { case alert(properties: AlertProperties<ActionType>) case component(Component<ActionType>) } public let navigator: NavigatorType public let root: RootComponent<ActionType> public let content: Content } 38 — A Portal from Elm to Swift by Guido Marucci Blas
  39. public indirect enum Action<RouteType: Route, MessageType> { case dismissNavigator(thenSend: Action<RouteType,

    MessageType>?) case navigateToPreviousRoute(preformTransition: Bool) case navigate(to: RouteType) case sendMessage(MessageType) } 39 — A Portal from Elm to Swift by Guido Marucci Blas
  40. public protocol Route: Equatable { var previous: Self? { get

    } } 40 — A Portal from Elm to Swift by Guido Marucci Blas
  41. public protocol CommandExecutor { associatedtype CommandType associatedtype MessageType func execute(command:

    CommandType, dispatch: @escaping (MessageType) -> Void) } 41 — A Portal from Elm to Swift by Guido Marucci Blas
  42. import UIKit import PortalApplication import PortalView let context = UIKitApplicationContext(

    application: Voices(), commandExecutor: VoicesCommandExecutor(), subscriptionManager: VoicesSubscriptionManager(), customComponentRenderer: VoidCustomComponentRenderer() ) context.registerMiddleware(TimeLogger()) PortalUIApplication.start(applicationContext: context) { message in switch message { case .didFinishLaunching(_, _): return .applicationLaunched default: return .none } } 42 — A Portal from Elm to Swift by Guido Marucci Blas
  43. guidomb/Voices 43 — A Portal from Elm to Swift by

    Guido Marucci Blas
  44. Portal - Warning → Still very early stage → API

    will probably change → Still needs important features like UI diffing 44 — A Portal from Elm to Swift by Guido Marucci Blas
  45. Portal - Milestones → API stability → Improve performance →

    Cool tooling, like hot UI reload → Server side rendering? → Android support 45 — A Portal from Elm to Swift by Guido Marucci Blas
  46. TL; DR; → Decouple side-effects froms logic by describing effects

    using values → Avoid state sincronization, have a central place where state is mutated → Avoid deep view / object hierarchy, prefer wide hierarchies 46 — A Portal from Elm to Swift by Guido Marucci Blas
  47. Guido Marucci Blas Twitter: @guidomb Blog: http://guidomb.blog GitHub: http://github.com/ guidomb

    47 — A Portal from Elm to Swift by Guido Marucci Blas
  48. THANKS! 48 — A Portal from Elm to Swift by

    Guido Marucci Blas