Exploring MVVM-C

Presentation for the Munich iOS Developers Meetup

Transcript

1. Exploring MVVM-C Aydar Mukhametzyanov, Freeletics
6. Agenda MVVM C - 6
7. Agenda Model - View - ViewModel Coordinator 7
8. • MVVM • From MVC to MVVM • Closer look at MVVM • Coordinator • Tasks • Classic solution • Solution with Coordinators • MVVM + Coordinator Agenda 8
9. • MVVM • From MVC to MVVM • Closer look at MVVM • Coordinator • Tasks • Classic solution • Solution with Coordinators • MVVM + Coordinator 9
10. View Controller Model From MVC to MVVM MVC 10
11. UIViewController Model View Controller From MVC to MVVM MVC 11
12. UIViewController is a “God” class Business logic is mixed with UI Hard to reuse Hard to implement tests From MVC to MVVM MVC 12
13. UIViewController Model View Controller From MVC to MVVM MVVM structure 13
14. Model ViewModel View UIViewController From MVC to MVVM MVVM structure 14
15. Model ViewModel View UIViewController UIView From MVC to MVVM MVVM structure 15
16. • MVVM • From MVC to MVVM • Closer look at MVVM • Coordinator • Tasks • Classic solution • Solution with Coordinators • MVVM + Coordinator 16
17. Model ViewModel View Communications Closer look at MVVM owns communicates 17
18. ViewModel Model Owns Asks data, gets callback Communications Closer look at MVVM 18
19. View ViewModel Owns Notifies by delegate method Communications Closer look at MVVM 19
20. private(set) var dataSource: ListDataSource { didSet { uiDelegate?.didUpdateDataSource() } } // ... func refresh() { uiDelegate?.didStartLoading() provider.loadPlanets { [weak self] planets in self?.uiDelegate?.didFinishLoading() self?.dataSource = ListDataSource(planets: planets) } } ViewModel Communications Closer look at MVVM 20
21. • Provides data to ViewModel • Processes data (networking, persistence) Model Responsibilities Closer look at MVVM 21
22. • Draws UI with provided data • Notifies ViewModel about user actions View Responsibilities Closer look at MVVM 22
23. • Handles user actions from View • Gets data from Model • Updates data in Model • Contains business logic • Provides updated/processed data to View ViewModel Responsibilities Closer look at MVVM 23
24. Business logic is decoupled from UI Easy to maintain Easy to test Easy to reuse components Advantages Closer look at MVVM 24
26. • MVVM • From MVC to MVVM • Closer look at MVVM • Coordinator • Tasks • Classic solution • Solution with Coordinators • MVVM + Coordinator 26
27. Tasks AB CD Navigation stack 27
28. A B C visible D Navigation stack 28 Tasks
29. 1. Push next 2. Go back 29 Tasks
30. E new D E new new D C A B C visible Push next A B visible +1 +n 30 Tasks
31. D E C E D A B C visible Go back A B visible -1 -n 31 Tasks
32. 1. Push next 2. Go back +1 +n -1 -n 32 Tasks
33. • MVVM • From MVC to MVVM • Closer look at MVVM • Coordinator • Tasks • Classic solution • Solution with Coordinators • MVVM + Coordinator 33
34. Classic solution Chained navigation 34
35. Classic solution Chained navigation E D A B C let vc = E() push(vc) +1 35
36. Classic solution Chained navigation E A B C D 36
37. Classic solution Chained navigation E A B C D P M N O D 37
38. D Classic solution ... func showNext() { let vc: UIViewController if isOneFlow { vc = E() } else { vc = P() } push(vc) } ... Chained navigation 38
39. Classic solution Chained navigation D E P … + Conditions 39
40. Classic solution Chained navigation E D A B C pop() -1 40
41. Classic solution Chained navigation E D A B C pop(to: c) -n 41
42. Classic solution Chained navigation E C … + How it was presented 42
43. Classic solution Chained navigation Screen object knows and does too much 43
44. • MVVM • From MVC to MVVM • Closer look at MVVM • Coordinator • Tasks • Classic solution • Solution with Coordinators • MVVM + Coordinator 44
45. Solution with Coordinators E D A B C 45
46. Solution with Coordinators E D A B C 46
47. Solution with Coordinators E D A B C Coordinator 1. done 2. init push 3. done 4. init push 47
48. Solution with Coordinators E D A B C Coordinator 1. done 2. init push 3. done 4. init push 48
49. Solution with Coordinators B Coordinator private let onDone: () -> () ... func donePressed() { onDone() } ... private func configuredA() -> A { let a = A(onDone: { self.navigationController? .push(configuredB()) }) return a } private func configuredB() -> B { let b = B(onDone: { self.navigationController? .push(configuredC()) }) return b } ... 49
50. Solution with Coordinators E D A B C Coordinator 1. done 2. init push 3. done 4. init push 50
51. Solution with Coordinators Coordinator 51
52. Solution with Coordinators Coordinator init(navigationController: UINavigationController, onFinish: @escaping () -> ()) { self.navigationController = navigationController self.onFinish = onFinish } func start() -> UIViewController { return configuredA() } private func configuredA() -> A { // … } // … 52
53. Solution with Coordinators E D A B C Coordinator 53
54. Solution with Coordinators E D A B C Coordinator I F G H 54
55. Solution with Coordinators E D A B C Coordinator I F G H Child coordinator 55
56. Solution with Coordinators Coordinator private func startChildCoordinator() { let coord = ChildCoordinator(<…>, onFinish: { self.navigationController?.dismiss() }) navigationController?.present(coord.start()) } init(<…>, onFinish: @escaping () -> ()) { self.onFinish = onFinish <…> } private func configuredI() -> I { let i = I(onDone: { self.onFinish() }) return i } Child coordinator 56
57. Solution with Coordinators E D A B C Coordinator Child coordinator 57
58. Solution with Coordinators A B Coordinator Child coordinator Child coordinator 2 58
59. Solution with Coordinators 1. Push next 2. Go back +1 +n -1 -n 59
60. Solution with Coordinators +1 +n E D A B C Coord A onDone() push(e) visible -1 60
61. Solution with Coordinators E D A B C Coord A +1 +n -1 61
62. Solution with Coordinators E D A B C Coord A P M N O D Coord B +1 +n -1 62
63. Solution with Coordinators 1. Push next 2. Go back +1 +n -1 -n 63
64. Solution with Coordinators A Coordinator E B C D visible -n 64
65. Solution with Coordinators D E Coordinator 2 A Coordinator B C -n visible onDone() 65
66. Solution with Coordinators Coordinator private func startChildCoordinator() { let topVC = navigationController!.topViewController let coord = ChildCoordinator(onFinish: { self.navigationController?.pop(to: topVC) }) navigationController?.push(coord.start()) } -n 66
67. Solution with Coordinators 1. Push next 2. Go back +1 +n -1 -n 67
68. Solution with Coordinators +1 +n -1 -n Chained navigation Coordinators OK, but dependencies OK, but dependencies OK NOT OK OK OK OK OK 68
69. • MVVM • From MVC to MVVM • Closer look at MVVM • Coordinator • Tasks • Classic solution • Solution with Coordinators • MVVM + Coordinator 69
70. E D A B C Coordinator 70 MVVM + Coordinator
71. 71 A Coordinator MVVM + Coordinator
72. MVVM stack 72 ViewModel Coordinator ViewController Model 1. Build stack 2. Push viewController 3. Call injected callback 4. Push next | go back | etc MVVM + Coordinator
73. MVVM-C 73
74. Thank you! 74 aydar.mukh aydar.mukh@gmail.com aydarin Resources: • Steve "Scotty" Scott – MVVM-C In Practice: • https://www.youtube.com/watch?v=9VojuJpUuE8 • objc.io App Architecture book: • https://www.objc.io/books/app-architecture/ • Krzysztof Zabłocki - MVVM vs. MVC vs. VIPER: • https://academy.realm.io/posts/krzysztof-zablocki-mDevCamp-ios-architecture-mvvm-mvc-viper/
75. Bonus 75
76. Bonus 76
77. Dem 77
78. Dem Splash Empty list Planets Details Voted alert 78
79. https://github.com/aydarin/mvvm-demo Dem 79