Mobile Architecture with Unidirectional Data Flow

Mobile Architecture with Unidirectional Data Flow

Whether you are designing the next feature of your mobile app, or just brewing your morning cup of joe, you can use the principal of a unidirectional data flow and reactive principles to guide your process. I will detail a case study of how and why we migrated our iOS app from MVC to MVVM to FRP architecture at Vida Health, the challenges we faced, and how we adapted.

This talk covers 3 main points:
1. What is traditional MVC architecture, and what the challenges one faces when working with it.
2. What is unidirectional data flow, and what problems does it solve.
3. A Vida Health case study: how we began changing our app's architecture, and learnings from it.

The objectives and take-aways from the talk are intended to be:
1. High-level understanding of architecture that promotes unidirectional data flow.
2. Benefits of incorporating Functional Reactive Programming.
3. Concrete tips on how to begin changing your app's architecture.

The talk will involve a walk through of code snippets that implement the same feature using different architecture patterns. The code snippets will illustrate the benefits and drawbacks of each pattern.

The case study will involve a discussion of when the right time and place is to introduce a new architecture, and when the wrong time and place is. I will elaborate on the challenges of tackling a new architecture, as well as what went well.

Lastly, there will be time for an open Q&A.

377c44b809d54678d63fca9fe64ee75d?s=128

Jacqueline Sloves

April 28, 2018
Tweet

Transcript

  1. From App Architecture to Brewing Coffee: Unidirectional Data Flow By

    Jacqueline Sloves @jacquelionroars @jacquelion
  2. Who am I? • Lead iOS Engineer at Vida Health

    • Originally studied Philosophy at UC Berkeley • Turned to learning to code after returning from Peace Corps Ukraine • Began with JavaScript, and then specialized in iOS mobile development • When I'm not coding, I enjoy running, biking, and skiing (weather permitting) @jacquelionroars
  3. Who are you? • Web vs Mobile developers? • #

    of years of experience? • Size of company? @jacquelionroars
  4. Agenda for today I. What is MVC, and what challenges

    it presents II. What is MVVM unidirectional data flow, and what problems does it solve III. A Vida case study: how we began changing our app's architecture @jacquelionroars
  5. Objectives of the talk today • High-level understanding of MVVM

    unidirectional data flow • Benefits of incorporating MVVM unidirectional data flow • Concrete tips on how to begin changing your app's architecture @jacquelionroars
  6. When it clicked... I was brewing coffee, and had just

    acquired new appliances (fancy grinder and milk steamer, and set them up like so: Milk steamer Coffee brewer Coffee Grinder I was going back-and-forth to each of these appliances, and then I realized… if I had unidirectional way to manage this process, my life would be so much better! @jacquelionroars
  7. @jacquelionroars

  8. What is non unidirectional data flow? and where you may

    have seen it… Classic Model-View-Controller Architecture @jacquelionroars
  9. When MVC Works @jacquelionroars

  10. When MVC goes wrong... @jacquelionroars

  11. None
  12. Problems with classic MVC Architecture MVC is fondly referred to

    as... Massive View Controller • Difficult to test • There is no longer a separation of concerns ◦ view controller maintains application state, ◦ and acts a mediator between the view and model • Difficult to manage state between view controllers ◦ If you have an if statement, you're managing state @jacquelionroars
  13. Do not fear the unknown @jacquelionroars

  14. Proponents of Unidirectional Data Flow @jacquelionroars

  15. Unidirectional MVVM architecture explained @jacquelionroars

  16. Unidirectional MVVM architecture explained 1. The ViewController is purely the

    View 2. The ViewModel doesn't know the View exists, but is bound to it 3. The View owns the ViewModel, which in turn owns the Model (no tight coupling between the View and the Model) 4. The ViewModel is responsible for updating the Model 5. Thus, when a property is updated on the Model, it notifies the ViewModel, which invokes a callback function that updates the View @jacquelionroars
  17. None
  18. None
  19. Benefits of Unidirectional data flow • Improved separation of concerns

    • Declarative statements • Expected results • Testable • Can manage state across view controllers • Extendable @jacquelionroars
  20. How to change an existing architecture @jacquelionroars

  21. A Case Study • New engineers • Developing a new

    end-to-end feature • Hammock-Driven Development • Came to consensus on 3 things: ◦ Incorporating tests ◦ Single Responsibility Principle ◦ Dividing the project into smaller tasks @jacquelionroars
  22. A Case Study (cont'd) Our 3 Mini-Projects: 1. Isolate the

    networking layer from the ViewController 2. Separate routing logic from ViewController 3. Bind data through ViewModels • Don't break anything that already works • Take one new end-to-end user-facing feature as a starting point @jacquelionroars
  23. A Case Study (cont'd) Challenges: • Agreeing on how to

    implement each project • Writing tests • Being OK with making mistakes • Timeline @jacquelionroars
  24. Take-aways • Challenges of multiple states being managed by a

    single ViewController • Benefits of MVVM unidirectional data flow • Implications for testability and extensibility • Strategy to implement something new • You can do it! @jacquelionroars
  25. Further Reading & Resources https://www.exclamationlabs.com/blog/the-case-for-unidirectional-data-flow/ https://realm.io/news/benji-encz-unidirectional-data-flow-swift/ https://teamtreehouse.com/library/unidirectional-data-flow https://medium.com/@AdamRNeary/unidirectional-data-flow-yes-flux-i-am-not-so-sure-b4acf988196c @jacquelionroars

  26. Keep in Touch! jacqueline.sloves@gmail.com @jacquelionroars @jacquelion Thanks for attending. Happy

    Coding :)