CocoaheadsNL August - M2Mobi - Pragmatic MVVM

Menno Lovink talks about using MVVM at M2Mobi

Transcript

2. PRAGMATIC MVVM Menno Lovink
3. M2MOBI • Native apps • Tons of project • 5 iOS developers
4. AS A TEAM We value: • Being pragmatic • Speaking the same language
5. AS A TEAM We want: • Simplicity • Reusability • Consistency • Flexibility
6. IN THE REAL WORLD.. We encounter: • Redundancy • Inconsistency • Complexity • Rigidness
7. WE TRY TO IMPROVE • Experiments • Code reviews • Weekly team meetings
8. MVC VC M V
9. MVVM VM M V Model ViewModel View
10. MVVM VS MVC VC M V VM M V
11. VIEWCONTROLLER? VM M V VM M VC V
12. MVVM EXAMPLE
13. MVVM EXAMPLE VM M VC V
14. MVVM EXAMPLE struct Flight { let flightCode: String let destination: String let origin: String let departureDate: NSDate let arrivalDate: NSDate } VM M VC V
15. MVVM EXAMPLE class HomeViewController: UIViewController { var flightTileTitle:UILabel var flightTileSubtitle: UILabel var flightTileImage: UIImageView var viewModel: FlightViewModel func refresh() { flightTileTitle.text = viewModel.flightTileTitle flightTileSubtitle.text = viewModel.flightTileSubtitle flightTileImage.image = viewModel.flightTileImage } } VM M VC V
16. MVVM EXAMPLE struct FlightViewModel { let model: Flight var flightTileTitle: String { return "naar \(model.destination)” } var flightTileSubtitle: String { let prettyDate = NSDateFormatter().stringFromDate(model.departureDate) return "\(model.flightCode) - \(prettyDate)" } var flightTileImage: UIImage { return UIImage(named:”IC_LeavingFlight”) } } VM M VC V
17. WHAT’S IMPROVED? • LESS COMPLEXITY • IMPROVED LANGUAGE VM M VC V
18. VIEWCONTROLLER RE-USE VM M VC V class HomeViewController: UIViewController { var flightTileTitle:UILabel var flightTileSubtitle: UILabel var flightTileImage: UIImageView var viewModel: FlightViewModel func refresh() { flightTileTitle.text = viewModel.flightTileTitle flightTileSubtitle.text = viewModel.flightTileSubtitle flightTileImage.image = viewModel.flightTileImage } }
19. VIEWCONTROLLER RE-USE class HomeViewController: UIViewController { var flightTileTitle:UILabel var flightTileSubtitle: UILabel var flightTileImage: UIImageView var viewModel: HomeViewControllerViewModel func refresh() { flightTileTitle.text = viewModel.flightTileTitle flightTileSubtitle.text = viewModel.flightTileSubtitle flightTileImage.image = viewModel.flightTileImage } } VM M VC V
20. VIEWCONTROLLER RE-USE protocol HomeViewControllerViewModel { var flightTileTitle: String { get } var flightTileSubtitle: String { get } var flightTileImage: UIImage { get } } class HomeViewController: UIViewController { var flightTileTitle:UILabel var flightTileSubtitle: UILabel var flightTileImage: UIImageView var viewModel: HomeViewControllerViewModel func refresh() { flightTileTitle.text = viewModel.flightTileTitle flightTileSubtitle.text = viewModel.flightTileSubtitle flightTileImage.image = viewModel.flightTileImage } } VM M VC V
21. VIEWCONTROLLER RE-USE struct DepartingFlightViewModel: HomeViewControllerViewModel { let model: Flight var flightTileTitle: String { return "naar \(model.destination)” } var flightTileSubtitle: String { let prettyDate = NSDateFormatter().stringFromDate(model.departureDate) return "\(model.flightCode) - \(prettyDate)" } var tileImage: UIImage { return UIImage(named:”IC_LeavingFlight”) } } VM M VC V
22. VIEWCONTROLLER RE-USE struct ArrivingFlightViewModel: HomeViewControllerViewModel { let model: Flight var flightTileTitle: String { return "van \(model.origin)” } var flightTileSubtitle: String { let prettyDate = NSDateFormatter().stringFromDate(model.arrivalDate) return "\(model.flightCode) - \(prettyDate)" } var tileImage: UIImage { return UIImage(named:”IC_ArrivingFlight”) } } VM M VC V
23. WHAT’S IMPROVED? • Improved Reusability • Prevented complexity increase if(isArrivingFlight) { … } else { … }
24. TILE RE-USE class HomeViewController: UIViewController { var flightTileTitle:UILabel var flightTileSubtitle: UILabel var flightTileImage: UIImageView var viewModel: HomeViewControllerViewModel func refresh() { flightTileTitle.text = viewModel.flightTileTitle flightTileSubtitle.text = viewModel.flightTileSubtitle flightTileImage.image = viewModel.flightTileImage } } VM M VC V
25. TILE RE-USE class ImageTile: UIView { var title:UILabel var subTitle: UILabel var image: UIImageView var viewModel: ImageTileViewModel func refresh() { tileTitle.text = viewModel.tileTitle tileSubtitle.text = viewModel.tileSubtitle tileImage.image = viewModel.tileImage } } VM M V
26. TILE RE-USE struct Employee { let firstName: String let lastName: String let profession: String } VM M V
27. TILE RE-USE struct EmployeeViewModel: ImageTileViewModel { let model: Employee var tileTitle: String { return "\(model.firstName) \(model.lastName)” } var tileSubtitle: String { return "\(model.profession)" } var tileImage: UIImage { return UIImage(named:”IC_PERSON”) } } VM M V
28. TILE RE-USE VM M VC V class HomeViewController: UIViewController { var flightTile: ImageTile var viewModel: HomeViewControllerViewModel func refresh() { flightTile.viewModel = viewModel.flightTileViewModel } }
29. TILE RE-USE class HomeViewController: UIViewController { var flightTile: ImageTile var viewModel: HomeViewControllerViewModel func refresh() { flightTile.viewModel = viewModel.flightTileViewModel } } VM M VC V protocol HomeViewControllerViewModel { var flightTileViewModel: ImageTileViewModel { get } }
30. WHAT’S IMPROVED? • Improved Reusability • Increased simplicity
31. SCALABLE HIERARCHIES V V V
32. SCALABLE HIERARCHIES VM V VM V VM V
33. SCALABLE HIERARCHIES VM M V VM M V VM M V
34. REUSABILITY
35. REUSABILITY Domain Common MVVM VM M VC V MVC VC M V
36. VIEWMODEL REUSABILITY
37. VIEWMODEL REUSABILITY
38. VIEWMODEL REUSABILITY struct MenuItemViewModel: HomeTileViewModel, MenuTileViewModel { let model: MenuItem var title: String { return model.Name } }
39. RECAP We want: • Simplicity • Reusability • Consistency • Flexibility
40. RECAP • Protocol Oriented MVVM • Closer to our goals
41. WHEN WE USE MVVM? • Not used religiously • A tool for separation
42. –Johnny Appleseed Thank You THANK YOU!