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.

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
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
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 :)