iOS Design Patterns: MVC vs. MVVM

Introduction to the MVVM design pattern in iOS.
Presented at iOSOHO Women in iOS Meet Up in New York, NY Oct 19, 2016

Transcript

1. MVC VS MVVM IOS DESIGN PATTERNS
2. WHAT IS A DESIGN PATTERN?
3. A TEMPLATE THAT HELPS YOU WRITE CODE THAT IS EASY TO UNDERSTAND AND REUSE
4. MVC Model View Controller Where data is stored Where user interaction takes place Where notifications of user interaction and changes in the model are acted upon AND managed
6. MASSIVE VIEW CONTROLLER
7. MVVM Model “View” View Model Where data is stored Where user interaction occurs Where user interactions and changes in the model are managed View View Controller Where notifications of user interaction and model changes are acted upon
9. VIEW MODEL ‣ Complete value transformations ‣ Update the model as a result of user input ‣ Receive notifications about model changes ‣ Kick off asynchronous events ‣ Keep a view state to be presented
10. VIEW CONTROLLER ‣ View lifecycle ‣ Animations ‣ Notifications about user input ‣ UI updates as a result of view model changes
11. “MVVM IS NOT VERY GOOD” “MVVM IS EXCEPTIONALLY OK” “MVVM IS QUITE OK AT WHAT IT IS SUPPOSED TO DO” “MVVM TO THE RESCUE” “IT MAKES WRITING IOS APPS A JOY”
12. Complaints ‣ Poorly named ‣ Not well-defined ‣ Doesn’t change structure
13. Praises ‣ Easier to test ‣ Easier to extract reusable components ‣ Easier to reason about, extend and maintain
15. var prezto: Prezto init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: NSBundle?, prezto: Prezto) { self.prezto = prezto super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil) } PresentingViewController - MVC
16. class PresentingViewModel { var prezto: Prezto init(prezto: Prezto) { self.prezto = prezto } } PresentingViewModel
17. var viewModel: PresentingViewModel init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: NSBundle?, prezto: Prezto) { self.viewModel = PresentingViewModel(prezto) super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil) } PresentingViewController - MVVM
18. private func setScreenImages() { guard let screens = prezto.screens where screens.count > 0 else { return } currentScreenImageView.image = screens[prezto.currentIndex] if prezto.currentIndex == screens.count - 1 { nextScreenImageView.image = nil } else { nextScreenImageView.image = screens[prezto.currentIndex + 1] } previousScreenButton.enabled = prezto.currentIndex > 0 } PresentingViewController - MVC
19. PresentingViewController - MVVM private func setScreenImages() { currentScreenImageView.image = viewModel.currentPreztoScreen nextScreenImageView.image = viewModel.nextPreztoScreen previousScreenButton.enabled = viewModel.previousScreenButtonEnabled }
20. PresentingViewModel var currentPreztoScreen: UIImage? { guard let screens = prezto.screens where screens.count > 0 else {return nil} return screens[prezto.currentIndex] } var nextPreztoScreen: UIImage? { guard let screens = prezto.screens where screens.count > 0 && prezto.currentIndex != screens.count - 1 else {return nil} return screens[prezto.currentIndex + 1] } var previousScreenButtonEnabled: Bool { return prezto.currentIndex > 0 }
21. @IBAction func previousScreenButtonTapped(sender: UIButton) { if prezto.currentIndex > 0 { prezto.currentIndex -= 1 updatePreztoCurrentIndex(prezto.currentIndex) } } @IBAction func nextScreenButtonTapped(sender: UIButton) { guard let screens = prezto.screens where screens.count > 1 else { return } if prezto.currentIndex < screens.count - 1 { prezto.currentIndex += 1 updatePreztoCurrentIndex(prezto.currentIndex) } else { showEndPresentationAlertView() } } PresentingViewController - MVC
22. PresentingViewModel var preztoScreensCount: Int { return prezto.screens?.count ?? 0 } func previousScreenIndex() -> Int { if prezto.currentIndex > 0 { prezto.currentIndex -= 1 return prezto.currentIndex } return prezto.currentIndex } func nextScreenIndex() -> Int { if prezto.currentIndex == preztoScreensCount - 1 { return prezto.currentIndex + 1 } else { prezto.currentIndex += 1 return prezto.currentIndex } }
23. private func updatePreztoCurrentIndex(index: Int) { prezto.currentIndex = index RequestManager.sharedInstance.updatePreztoCurrentIndex(prezto, completion: { result in switch result { case .Success(_): dispatch_async(dispatch_get_main_queue(), { self.setScreenImages() }) case .Failure(_): print("Failed to update Prezto's currentIndex") } } ) } PresentingViewController - MVC
24. func updatePreztoCurrentIndex(index: Int, completion: () -> ()) { prezto.currentIndex = index RequestManager.sharedInstance.updatePreztoCurrentIndex(prezto, completion: { result in switch result { case .Success(_): dispatch_async(dispatch_get_main_queue(), { completion() }) case .Failure(_): print("Failed to update Prezto's currentIndex") } } ) } PresentingViewModel
25. PresentingViewController - MVVM @IBAction func previousScreenButtonTapped(sender: UIButton) { viewModel.updatePreztoCurrentIndex(viewModel.previousScreenIndex()) { setScreenImages() } } @IBAction func nextScreenButtonTapped(sender: UIButton) { let nextScreenIndex = viewModel.nextScreenIndex() if nextScreenIndex == viewModel.preztoScreensCount { showEndPresentationAlertView() } else { presentingViewModel.updatePreztoCurrentIndex(nextScreenIndex) { setScreenImages() } } }
27. MAKE IT BETTER WITH BINDINGS RxSwift “an api for asynchronous programming with observable streams”
28. Resources ‣ http://artsy.github.io/blog/2015/09/24/mvvm-in-swift/ ‣ https://ashfurrow.com/blog/mvvm-is-exceptionally-ok/ ‣ https://medium.com/ios-os-x-development/ios- architecture-patterns-ecba4c38de52#.7tayz3xuk ‣ https://realm.io/news/altconf-ash-furrow-functional- reactive-swift/ ‣ https://medium.cobeisfresh.com/implementing-mvvm- in-ios-with-rxswift-458a2d47c33d#.rnjv284d7
29. Learning to program is a journey with no end. I believe that for the iOS community, MVVM is one stop along that journey, a layover to even better places… We can’t stop at MVVM, we have to keep moving. - Ash Furrow
30. Thank you! Justine Kay iOS Engineer @ Intrepid Pursuits NYC Medium: https://medium.com/@JustineBethKay Twitter: @JustineBethKay Email: justine@intrepid.io Are you Intrepid? Intrepid.io