From App Architecture to Brewing Coffee: Unidirectional Data Flow By Jacqueline Sloves @jacquelionroars @jacquelion 

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 

Who are you? ● Web vs Mobile developers? ● # of years of experience? ● Size of company? @jacquelionroars 

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 

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 

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 

@jacquelionroars 

What is non unidirectional data flow? and where you may have seen it… Classic Model-View-Controller Architecture @jacquelionroars 

When MVC Works @jacquelionroars 

When MVC goes wrong... @jacquelionroars 

No content

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 

Do not fear the unknown @jacquelionroars 

Proponents of Unidirectional Data Flow @jacquelionroars 

Unidirectional MVVM architecture explained @jacquelionroars 

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 

No content

No content

Benefits of Unidirectional data flow ● Improved separation of concerns ● Declarative statements ● Expected results ● Testable ● Can manage state across view controllers ● Extendable @jacquelionroars 

How to change an existing architecture @jacquelionroars 

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 

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 

A Case Study (cont'd) Challenges: ● Agreeing on how to implement each project ● Writing tests ● Being OK with making mistakes ● Timeline @jacquelionroars 

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 

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 

Keep in Touch! [email protected] @jacquelionroars @jacquelion Thanks for attending. Happy Coding :)