One Way Flow of Data

At Square's Women Engineering Lightning Talk event, #hearandnow, Square engineer Kat Hawthorne presents an alternative iOS application architecture that her team designed to build a new version of Square Register.

Transcript

1. RETHINKING IOS APP ARCHITECTURE USING A ONE WAY DATA FLOW kat hawthorne, software engineer @square #hearandnow | @khhawthorne
2. #hearandnow | @khhawthorne
3. VIEW CONTROLLERS OUT OF CONTROL SHARED DATA CAUSES HARD TO DISCOVER BUGS CODE WITH TOO MUCH RESPONSIBILITY IS HARD TO TEST COMMON PROBLEMS IN IOS APPLICATIONS #hearandnow | @khhawthorne
4. VIEW CONTROLLERS HAVE TOO MUCH RESPONSIBILITY SHARED DATA CAUSES HARD TO DISCOVER BUGS CODE WITH TOO MUCH RESPONSIBILITY IS HARD TO TEST #hearandnow | @khhawthorne
5. YOUR CART IS EMPTY CART ADD ITEMS TO CHECKOUT #hearandnow | @khhawthorne
6. SHIRT $20 CALCULATE TOTAL CART #hearandnow | @khhawthorne
7. SKU ‘1234’ NOT FOUND CHECKOUT SHIRT $20 CALCULATE TOTAL CART #hearandnow | @khhawthorne
8. SHIRT $20 CHECKOUT 1 ITEM FOR $21 TAX $1 TOTAL $21 CART #hearandnow | @khhawthorne
9. SHIRT $20 CHECKOUT 1 ITEM FOR $21 TAX $1 TOTAL $21 [JIRA] (LST-99) CHECKOUT BUTTON COLOR DOES NOT UPDATE CART #hearandnow | @khhawthorne
10. VIEW CONTROLLERS HAVE TOO MUCH RESPONSIBILITY SHARED DATA CAUSES HARD TO DISCOVER BUGS CODE WITH TOO MUCH RESPONSIBILITY IS HARD TO TEST #hearandnow | @khhawthorne
11. SHIRT $20 CART CALCULATE TOTAL HAT $20 X #hearandnow | @khhawthorne
12. SHIRT $20 CART CALCULATE TOTAL HAT $20 X [JIRA] (LST-100) APP CRASHES WHEN CALCULATING TOTAL AND DELETING ITEM SIMULTANEOUSLY* #hearandnow | @khhawthorne
13. VIEW CONTROLLERS HAVE TOO MUCH RESPONSIBILITY SHARED DATA CAUSES HARD TO DISCOVER BUGS CODE WITH TOO MUCH RESPONSIBILITY IS HARD TO TEST #hearandnow | @khhawthorne
14. EMPTY CART CART WITH ITEMS VIEW CONTROLLER TESTS #hearandnow | @khhawthorne
15. EMPTY CART CART WITH ITEMS ERROR STATE SUCCESS STATE VIEW CONTROLLER TESTS #hearandnow | @khhawthorne
16. EMPTY CART CART WITH ITEMS ERROR STATE SUCCESS STATE ERROR STATE SUCCESS STATE VIEW CONTROLLER TESTS #hearandnow | @khhawthorne
17. EMPTY CART CART WITH ITEMS ERROR STATE SUCCESS STATE ERROR STATE SUCCESS STATE AND SO ON… VIEW CONTROLLER TESTS #hearandnow | @khhawthorne
18. ONE WAY FLOW OF DATA: THE CYCLE RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT #hearandnow | @khhawthorne
19. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT RENDERER #hearandnow | @khhawthorne
20. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT CONTEXT #hearandnow | @khhawthorne
21. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT PRESENTER #hearandnow | @khhawthorne
22. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT VIEW MODEL #hearandnow | @khhawthorne
23. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT VIEW CONTROLLER #hearandnow | @khhawthorne
24. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT VIEW #hearandnow | @khhawthorne
25. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT SERVICE #hearandnow | @khhawthorne
26. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT REPOSITORY #hearandnow | @khhawthorne
27. ONE WAY FLOW OF DATA: PUTTING IT TOGETHER RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT #hearandnow | @khhawthorne
28. AN EXAMPLE: ADDING AN ITEM TO THE CART #hearandnow | @khhawthorne
29. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT RENDERER class Renderer { func render() { let cartViewModel = CartPresenter.present( accountService: context.accountService, cartService: context.cartService, errorService: context.errorService, itemService: context.itemService ) cartViewController.update(cartViewModel) } } #hearandnow | @khhawthorne
30. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT CONTEXT class AppContext { private(set) lazy var cartService: CartService = CartService( cartState: self.cartState, catalogService: self.catalogService, accountService: self.accountService, render: self.render ) } #hearandnow | @khhawthorne
31. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT PRESENTER final class CartPresenter { class func present( accountService: AccountService, cartService: CartService, errorService: ErrorService, itemService: ItemService ) -> CartViewModel? {…} } #hearandnow | @khhawthorne
32. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT VIEW MODEL struct CartViewModel { let preSubtotalLineItems: [LineItem] let emptyCartMessage: String? let displayTotal: String? … } #hearandnow | @khhawthorne
33. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT VIEW CONTROLLER final class CartViewController : UIViewController { private(set) cartView: CartView = CartView() func update(viewModel: CartViewModel?){ cartView.emptyCartMessage = viewModel.emptyCartMessage cartView.displayTotalLabel = viewModel.displayTotal … } } #hearandnow | @khhawthorne
34. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT VIEW final class CartView : UIView { let emptyCartMessage: UILabel let displayTotalLabel: UILabel … } #hearandnow | @khhawthorne
35. RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT SERVICE class CartService { func addSKU(sku: String) { let item = catalog.getItem(sku: SKU) let cart = self.cart.mutableCopy() cart.mutableLineItems.addItemization(item) self.cart = cart.copy() render() } } #hearandnow | @khhawthorne
36. ONE WAY FLOW OF DATA: PUTTING IT TOGETHER RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT #hearandnow | @khhawthorne
37. VIEW CONTROLLERS OUT OF CONTROL SHARED DATA CAUSES HARD TO DISCOVER BUGS CODE WITH TOO MUCH RESPONSIBILITY IS HARD TO TEST COMMON PROBLEMS IN IOS APPLICATIONS #hearandnow | @khhawthorne
38. MULTI-LAYERED ARCHITECTURE SINGLE RESPONSIBILITY PRINCIPLE VIEW CONTROLLERS HAVE TOO MUCH RESPONSIBILITY LESS CODE = LESS MENTAL OVERHEAD #hearandnow | @khhawthorne
39. MINIMAL STATE IN THE APP CLEAR DELINEATION OF WHAT CAN MODIFY STATE SHARED DATA CAUSES HARD TO DISCOVER BUGS ONE WAY FLOW OF DATA ELIMINATES UNEXPECTED BEHAVIOR #hearandnow | @khhawthorne
40. THIN APPLICATION LAYERS DEPENDENCY INJECTION RATHER THAN RELYING ON SHARED STATE CODE WITH TOO MUCH RESPONSIBILITY IS HARD TO TEST #hearandnow | @khhawthorne
41. ONE WAY FLOW OF DATA: PUTTING IT TOGETHER RENDERER PRESENTER VIEW CONTROLLER VIEW SERVICE REPOSITORY VIEW MODEL CONTEXT #hearandnow | @khhawthorne
42. kat hawthorne @khhawthorne kh@squareup.com #hearandnow | @khhawthorne