Fancy Acronyms for Fancy Architectures

An introduction to MVC, MVVM, and VIPER architectures for the iOS platform.

Transcript

1. FANCY ACRONYMS FOR FANCY ARCHITECTURES Katheryn Shi kshi@coursera.org @Katfishi
3. OUR MOTIVATION
6. 936 lines
7. • View operations • View sizing • View rotation • iPhone / iPad support • Table cell configuration • Title updates • User interaction processing • Network operations • Reachability calls • Data refresh • Data fetch • Download processing • Tons and tons of video logic • URL processing • Adding / removing player • Caching • Next / previous video • Subtitles • etc.
8. MASSIVE VIEW CONTROLLER
9. ALSO IN DEMAND • Easier testing • Embedding mobile engineers into other teams
10. SOME PRESUMPTIONS • Testing is good • Reduces bugs and crashes • Rewriting code / duplicating code is bad • Easy to miss something • Abstracting functionality (and therefore writing more code initially) could be worth it if it improves testing and minimizes future rewrites
11. DOGGY LIFE APP • Bone-finder for the yard • Activity alarm • Human detector • Car detector • Squirrel detector • …and more
12. DOGGY LIFE APP • Bone-finder for the yard • Activity alarm • Human detector • Car detector • Squirrel detector • …and more
13. SUPER DUPER BONE FINDER
14. SUPER DUPER BONE FINDER • Table view of holes & the bones inside
15. THE CLASSIC: MVC Controller View Model Fetch & update Process user interaction & update
16. THE CLASSIC: MVC Controller View Model Fetch & update Process user interaction & update Test
17. SUPER DUPER BONE FINDER • class Bone • id of bone (unique per hole) • type of bone (string) • provides a way to retrieve data objects Controller View Model
18. SUPER DUPER BONE FINDER • class Hole • id of hole (unique per hole) • bones inside of hole (array of bone ids) • location within the yard (latitude and longitude) • provides a way to retrieve data objects Controller View Model
19. SUPER DUPER BONE FINDER • class BoneFinderController • fetches holes and associated bones • passes data along to view when needed • navigates between list of holes and bones • resizes view Controller View Model
20. SUPER DUPER BONE FINDER • class BoneFinderTableView • displays the table of holes & bones • passes any user interaction to controller Controller View Model
21. WHY MVC? Controller View Model
22. WHY MVC? Bone Finder Controller Table View Bone Model Hole Model
23. WHY MVC? Bone Finder Controller Table View Bone Model Hole Model Map View
24. WHY MVC? Bone Finder Controller Bone Model Hole Model Map View
25. WHY MVC? Bone Finder Controller Bone Model Hole Model Map View
26. MVC WITHOUT THE C Bone Finder Controller Bone Model Hole Model Table View
27. MVC WITHOUT THE C Bone Model Hole Model Table View
28. MVC WITHOUT THE C Bone Model Hole Model Map View
29. OUR BRAVE ANNABELLE USES MVC WELL…
30. BUT WHAT IF SHE ADDS MORE FEATURES?
31. MOAR FEATURES! • Dowsing phone — rings when near a hole • Track hole count • Track most recently buried bones Controller now has to manage all of these
32. OVERLOADED CONTROLLER • class BoneFinderController • fetches holes and associated bones • passes data along to view when needed • navigates between list of holes and bones • resizes view Controller View Model
33. OVERLOADED CONTROLLER • class BoneFinderController • fetches holes and associated bones • tracks most recently buried bone • fetches number of holes • rings when coordinates and current location match • passes formatted data along to view when needed • navigates between list of holes and bones • resizes views
34. OVERLOADED CONTINUED • class BoneFinderController • data manipulation functions • fetches holes and associated bones • tracks most recently buried bone • fetches number of holes • rings when coordinates and current location match • passes formatted data along to view when needed
35. OVERLOADED CONTINUED • class BoneFinderController • view functions • navigates between list of holes and bones • resizes view
36. MVVM View Model V C Model Fetch & update Navigation V C Format & retrieve
37. MVVM View Model V C Model Fetch & update Navigation Test V C Format & retrieve
38. • class BoneFinderViewModel • fetches and formats necessary data from model • most recently buried bone • count of holes • passes this data to the view MVVM VM V C M Nav V C
39. • class BoneFinderViewController • handles any user interaction, incl. navigation • displays data MVVM VM V C M Nav V C
40. • class Bone • id of bone (unique per hole) • type of bone (string) • provides a way to retrieve data objects MVVM VM V C M Nav V C
41. • class Hole • id of hole (unique per hole) • bones inside of hole (array of bone ids) • location within the yard (latitude and longitude) • provides a way to retrieve data objects MVVM VM V C M Nav V C
42. DOGGY LIFE APP • Bone-finder for the yard • Activity alarm • Human detector • Car detector • Squirrel detector • …and more
43. DOGGY LIFE APP • Bone-finder for the yard • Activity alarm • Human detector • Car detector • Squirrel detector • …and more
44. DOGGY LIFE APP • Bone-finder for the yard • Activity alarm • Human detector • Car detector • Squirrel detector • …and more
45. HELPFUL FRIENDS What if I want to work with my friends (or co- workers) on a large-scale app? That’s always caused mayhem before…
46. View Interactor Presenter Entity Routing
47. VIPER An architecture by Mutual Mobile
48. VIPER Responsible for business logic Pulls out the “right” entities to pass to the presenter
49. VIPER Model objects Never get passed further than the interactor
50. VIPER Persists entities Gives interactor requested entities
51. VIPER Processes user input Formats data structures from interactor
52. VIPER User interface
53. VIPER Responsible for navigation Creates view, presenter, and interactor
54. VIPER
55. COURSERA’S THOUGHTS V C Presenter Wireframe Interactor Model Model Model
56. COURSERA’S THOUGHTS Model Interactor V C Presenter Wireframe
57. COURSERA’S THOUGHTS View Model
58. COURSERA’S THOUGHTS View Model Prese nter Inter actor
59. COURSERA’S THOUGHTS Presenter View Model Interactor
60. COURSERA’S THOUGHTS Wireframe Navigation as a first-class citizen
61. COURSERA’S THOUGHTS Model Entity Entity Persistence Data Manager Network
62. COURSERA’S THOUGHTS Model Interactor V C Presenter Wireframe
63. COURSERA’S THOUGHTS Model Interactor V C Presenter Wireframe Test Test
64. A SIMPLE TAP M I V C P WF
65. A SIMPLE TAP Model Interactor V C Presenter Wireframe User taps button
66. A SIMPLE TAP Model Interactor V C Presenter Wireframe Action passed to presenter
67. A SIMPLE TAP Model Interactor V C Presenter Wireframe Presenter updates view with new name string
68. A SIMPLE TAP Model Interactor V C Presenter Wireframe View changes accordingly
69. A LESS SIMPLE TAP M I V C P WF
70. A LESS SIMPLE TAP Model Interactor V C Presenter Wireframe User taps button
71. A SIMPLE TAP Model Interactor V C Presenter Wireframe Action passed to presenter
72. A SIMPLE TAP Model Interactor V C Presenter Wireframe Presenter passes data-related action to interactor
73. A SIMPLE TAP Model Interactor V C Presenter Wireframe Model updates
74. BONE FINDER 3.0 • class Bone • id of bone (unique per hole) • type of bone (string) • provides a way to retrieve data objects M I V C P WF
75. • class Hole • id of hole (unique per hole) • bones inside of hole (array of bone ids) • location within the yard (latitude and longitude) • provides a way to retrieve data objects BONE FINDER 3.0 M I V C P WF
76. • class BoneFinderInteractor • fetches necessary data from model • takes data and creates simple data structures • passes these data structures to the presenter BONE FINDER 3.0 M I V C P WF
77. • class BoneFinderPresenter • takes data structures given to it by interactor and formats it for the view • immediate handler for user interaction • passes along requests when needed BONE FINDER 3.0 M I V C P WF
78. • class BoneFinderWireframe • presents other view controllers when needed • navigates away from current presenter when called on • could lead to completely other module, such as activity alarm BONE FINDER 3.0 M I V C P WF
79. • class BoneViewController • displays formatted data from presenter • passes any user interaction to presenter BONE FINDER 3.0 M I V C P WF
80. HELPFUL FRIENDS • Annabelle’s friends can create their own modules in any format • As long as they follow a specific protocol • Annabelle can then integrate each module as if it were a view controller • VIPER has the advantage of not needing to peer into other modules to connect code (because of the nice separation of concerns)
81. EPILOGUE
82. WHO CREATES WHOM? Model Interactor V C Presenter Wireframe
83. WHO CREATES WHOM? Model Interactor V C Presenter Wireframe V C Presenter Interactor
84. WHO CREATES WHOM? Model Interactor V C Presenter Wireframe V C Presenter Model Interactor
85. MODULE-LEVEL V C
86. MODULE-LEVEL ModVC
87. MODULE-LEVEL Wireframe ModVC
88. MODULE-LEVEL Wireframe V C ModVC
89. MODULE-LEVEL Wireframe V C ModVC P
90. MODULE-LEVEL Wireframe V C ModVC P I
91. MODULE-LEVEL Wireframe V C ModVC P I M
92. MODULE-LEVEL Wireframe V C ModVC P I M
93. MODULE-LEVEL Wireframe V C ModVC P I M V C P I M
94. MODULE-LEVEL Wireframe V C ModVC P I M V C P I M
95. Module A MODULE-LEVEL
96. APP-LEVEL Module A
97. APP-LEVEL Module A Module B Module C
98. APP-LEVEL Module A Module B Module C Module Router
99. APP-LEVEL Module A Module B Module C Module Router Register Routes
100. APP-LEVEL Module Router { “courseList”: ModAViewController, “universityList”: ModBViewController, … }
101. APP-LEVEL Wireframe V C ModVC P I M
102. APP-LEVEL Wireframe V C ModVC P I M Module A
103. APP-LEVEL Wireframe V C ModVC P I M Module A Module B
104. APP-LEVEL Wireframe A Module Router “What’s the VC that corresponds to this route?”
105. APP-LEVEL Wireframe A Module Router “Looks like ModBViewController”
106. APP-LEVEL Wireframe A Module Router ModBVC
107. APP-LEVEL Wireframe A ModBVC
108. APP-LEVEL ModBVC
109. APP-LEVEL ModBVC Wireframe V C P I M
110. APP-LEVEL ModBVC Wireframe V C P I M Module B
111. TAKEAWAYS • MVC - model view controller • great, lightweight architecture with minimal setup overhead • if your app is simple and your testing is fine, you can stick with this • MVVM - model view view model • if your view controllers became massive, good to switch to this • testing is easier than keeping your view controllers massive
112. TAKEAWAYS • VIPER - view interactor presenter entity routing • if your app is highly collaborative and composed of many parts, good to switch to this • testing is easy too, and the isolation of modules is worth the setup if that was your goal
113. RESOURCES • Apple Developer Guide - MVC • Ray Wenderlich - iOS Design Patterns by Eli Ganem • Objc - Introduction to MVVM by Ash Furrow • Mutual Mobile - Introduction to VIPER by Jeff Gilbert • Objc - Architecting iOS Apps with VIPER by Jeff Gilbert and Conrad Stoll
114. ACKNOWLEDGEMENTS
115. THANK YOU Questions? kshi@coursera.org @Katfishi