Modular View Controller Hierarchies
3 likes744 views
This document describes an alternate reality where an app developer named Jax builds an app called "My Pet Alien" using a view controller hierarchy. When another developer Jiles is hired and asked to modify the app, he discovers issues with Jax's architecture where the view controllers are tightly coupled. The document then explains how to build loosely coupled view controllers using an input-output model where view controllers can live independently and the container view controller manages navigation between them. This avoids issues when reordering or reusing view controllers.
Modular View Controller Hierarchies
- 1. Not Your Granddaddy's Architecture Building Modularity into View Controller Hierarchies
- 4. The following takes place in an alternate reality
- 5. Meet Jax
- 7. Jax is a super awesome app developer
- 8. or at least, he thinks he is
- 9. Jax pounds red bulls and talks about how sick his coding skills are.
- 11. Most importantly, he loves watermelon
- 13. Jax just got hired working on the next world changing app.
- 14. My Pet Alien
- 15. My Pet Alien is an app that tracks your pet alien's health,
- 16. and will alert you if your alien is getting sick.
- 18. "Sure, that will take 2 months, EASY.” - Jax
- 20. Jax spends the next 2 months pounding red bulls, building flows in Interface builder, and coding the entire app.
- 21. (we’re going to jump into Jax’s train of thought as he builds this out)
- 23. Jax thinks back to 2009…
- 25. Jax fell in love with iOS at WWDC
- 27. That’s where Jax learned how to build navigation flows.
- 29. He even got to see Scott on stage
- 30. If you’re asking who Scott is…
- 32. Jax looks at the designs…
- 34. “Apps are made of view controller hierarchies”
- 35. “Ok, I need a nav controller and three content view controllers”
- 36. Jax begins sketching this out
- 37. Container View Controller Content View Controller Navigation Controller, Tab Controller, Page View Controller, Split View Controller, custom Table View Controller, Collection View Controller, custom
- 38. View Controller Hierarchy Home View Controller Table View Controller Detail View Controller WindowNavigation Controller Root View Controller
- 39. Jax opens up a storyboard and starts building.
- 41. Lets review how this works
- 42. View Controller Hierarchy Home View Controller Table View Controller Detail View Controller WindowNavigation Controller Root View Controller
- 43. View Controller Hierarchy Home View Controller Table View Controller Detail View Controller Navigation Controller
- 45. On App Launch…
- 48. Storyboard On User Interaction… Creates Table View Controller
- 49. Storyboard On User Interaction… Creates Table View Controller
- 50. Storyboard On User Interaction… Calls Prepare for Segue
- 51. On User Interaction… HomeViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
- 52. On User Interaction… HomeViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string
- 53. On User Interaction… HomeViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string Cast new VC
- 54. On User Interaction… HomeViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string Cast new VC Set up new VC
- 55. Storyboard Pushes View Controller onto Stack On User Interaction…
- 57. On Cell Selection… TableViewController.swift func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
- 58. On Cell Selection… TableViewController.swift func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { Store Selected ID
- 59. On Cell Selection… TableViewController.swift func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { Store Selected ID Perform Segue
- 60. Storyboard Creates Detail View Controller On Cell Selection…
- 61. Storyboard Creates Detail View Controller On Cell Selection…
- 62. Storyboard Calls Prepare for Segue On Cell Selection…
- 63. On Cell Selection… TableViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
- 64. On Cell Selection… TableViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string
- 65. On Cell Selection… TableViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string Cast new VC
- 66. On Cell Selection… TableViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string Cast new VC Set up new VC
- 67. Storyboard Pushes View Controller onto Stack On Cell Selection…
- 68. 2 months later, Jax is done!
- 71. Success!
- 73. Jax looks at iTunes Connect
- 75. The downloads are pouring in.
- 77. Funded!
- 78. Turns out there’s a lot of alien pet owners out there!
- 79. With all the new $ and feature requests, the company decides to hire another engineer.
- 80. Meet Jiles
- 81. Jiles is an application developer from Great Britain. A seasoned professional.
- 83. Jiles congratulates Jax on his success.
- 85. Jiles asks Jax what he thinks of the application architecture he has designed.
- 87. Jax says its the best, everything is perfect.
- 88. Jax tells the company he’s taking a month long vacation to Thailand. Peace!
- 90. Jiles feels good about his new position and (seemingly) solid codebase.
- 91. The next day…
- 92. The project manager asks Jiles to include the pet list screen before the login screen.
- 93. and to place a new detail screen between the pet list and pet detail.
- 94. Jiles thinks to himself, ya know, Jax said the architecture was solid, this should take me about 30 minutes.
- 97. Jax starts working on moving the list and detail screens.
- 98. Easy!
- 99. Easy!
- 100. Easy!
- 101. Easy!
- 102. Easy!
- 103. Easy!
- 104. So he thought…
- 105. !? EMPTY!
- 107. What’s going on here?
- 108. Let’s review how Jax built this…
- 109. On User Interaction…
- 110. Storyboard On User Interaction… Creates Table View Controller
- 111. Storyboard On User Interaction… Creates Table View Controller
- 112. Storyboard On User Interaction… Calls Prepare for Segue
- 113. On User Interaction… HomeViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string Cast new VC Set up new VC
- 114. On User Interaction… HomeViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string Cast new VC Set up new VC Home VC fetches Table VC’s data Isolate content view controllers! Content controllers should know how to retrieve their own data
- 115. !? EMPTY!
- 117. It’s now 2 am…
- 118. After an hour of re- wiring, Jax moves on to adding the new screen.
- 119. “Well at least this one will be easy!”
- 120. Easy!
- 121. Easy!
- 122. So he thought…
- 124. What’s going on here?
- 125. Let’s review how Jax built this…
- 126. On Cell Selection…
- 127. On Cell Selection… TableViewController.swift func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
- 128. On Cell Selection… TableViewController.swift func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { Store Selected ID
- 129. On Cell Selection… TableViewController.swift func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { Store Selected ID Perform Segue
- 130. Storyboard Creates New View Controller On Cell Selection…
- 131. Storyboard Creates New View Controller On Cell Selection…
- 132. Storyboard Calls Prepare for Segue On Cell Selection…
- 133. On Cell Selection… TableViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
- 134. On Cell Selection… TableViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string
- 135. On Cell Selection… TableViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string Cast new VC Set up new VC
- 136. On Cell Selection… TableViewController.swift override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { Match Segue string Cast new VC Set up new VC Table VC doesn’t know NewVC Table VC only knows DetailVC
- 139. What are we losing? • Ability to • re-order content view controllers • reuse content view controllers
- 140. Next day…
- 141. Jiles comes in looking like he was hit by a train and mauled by some cats.
- 143. Jiles delivers, but is exhausted
- 144. Jiles thinks...
- 145. he should be able to move this list anywhere in the app, and it should just work!
- 146. Jiles thinks...
- 147. View controllers should be able to live on their own. They should not depend on the container they are in
- 148. and they should not depend on sibling content controllers.
- 151. Jiles goes to WWDC in search of a better view controller architecture
- 152. Jiles meets John in line for the keynote
- 154. John asks, “how’s it going, how was your last project?”
- 156. Jiles explains the problems he faced,
- 157. he tells John, “there must be a better way!”
- 158. John has experienced the exact same problems as Jiles
- 159. John says, "I've found a better way"
- 160. Jiles is happy... and eager to learn more!
- 163. So where should logic go?
- 164. So where should logic go? Can’t go here
- 165. So where should logic go? Can’t go here
- 166. So where should logic go? Can’t go here
- 167. So where?
- 168. So where should logic go? Navigation View Controller
- 169. So where should logic go? Navigation View Controller
- 170. So where should logic go? Navigation View Controller why not here?
- 171. So where should logic go? UINavigationController IS a container view controller
- 173. How would this work?
- 175. Think of as async task
- 176. Inputs and Outcomes
- 177. Inputs and Outcomes After init, provide input
- 178. Inputs and Outcomes When finished, report outcome
- 179. Input • Either • initializer arguments • public variable properties
- 180. Outcome • Either • onComplete closure (selectedId: String)->() • leverage targetViewControllerForAction
- 181. class TableViewController: UITableViewController { // Input var userId: String? // Outcome var onComplete: ((selectedId: String)->())? } Input-Outcome Based VC
- 182. // Inside Container View Controller... let tableVC = TableViewController(style: .Plain) tableVC.userId = loggedInUserId tableVC.onComplete = { selectedId in // Container VC decides where to go next } Container’s Usage
- 183. Back to our navigation controller…
- 184. On App Launch
- 185. Creates HomeVC MyNavigationController.swift let homeVC = HomeVC()
- 186. Creates HomeVC MyNavigationController.swift let homeVC = HomeVC()
- 189. On User Interaction… MyNavigationController.swift let tableVC = TableViewController() Nav controller manages content view controllers
- 190. On User Interaction… MyNavigationController.swift let tableVC = TableViewController() Nav controller manages content view controllers
- 191. On User Interaction… MyNavigationController.swift pushViewController(tableVC, animated: true)
- 192. On Cell Selection TableViewController.swift func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
- 193. On Cell Selection TableViewController.swift onComplete(selectedId: viewModelObject.id)
- 194. On Cell Selection MyNavigationController.swift let detailVC = DetailViewController(modelId: selectedId)
- 195. On Cell Selection MyNavigationController.swift let detailVC = DetailViewController(modelId: selectedId)
- 196. On Cell Selection MyNavigationController.swift let detailVC = DetailViewController(modelId: selectedId)
- 197. On Cell Selection MyNavigationController.swift pushViewController(detailVC, animated: true)
- 198. Demo!
- 199. Composition
- 201. Remember
- 202. Dependencies Content View Controllers should not depend on • a specific container view controller class • sibling content view controllers Think of view controllers as lego blocks
- 203. If you liked this, there’s more
- 204. Elements
- 205. Josh Berlin Collection View Master [email protected] @jab2109 René Cacheaux iOS Architect [email protected] [email protected] @RCachATX