MVVM & RxSwift

MVVM & RxSwift

Transcript

1. MVVM ! RxSwift https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 1
2. HELLO!!! Dang Thai Son • iOS Developer 2+ years experience • Interested in Functional Programming • Going to learn Elm/Haskell this year. • Blog: https://dangthaison91.wordpress.com https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 2
3. Who is you writing Swift? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 3
4. Did you ever know MVVM or using it now? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 4
5. Functional Reactive Programming? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 5
6. Why MVVM? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 6
7. MVC is the King https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 7
8. You drunk!!! https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 8
9. Apple’s Expected MVC https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 9
10. Actual Apple’s MVC https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 10
11. MVC Start project from scratch: • Project grow bigger with more features • Run for deadline => Do you try to update / add functions after 1-2 months later? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 11
12. Actual Apple’s MVC https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 12
13. MVC Plain old MVC is leads to huge, disorganized, unmaintainable code (most of it in a UIViewController). https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 13
14. MVVM https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 14
15. View Controllers • Responsible for controlling views (Layout, Animation, Colors, Presenting VC...) • Tell ViewModel when something happens (handles user interaction). • Listen to ViewModel (network request completes, data changed). https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 15
16. View Models • Perform all the business logic (fire-off network requests, fetch Core Data objects, validate input...) • Deliver necessary data to view controllers to display: Date/String format. • Update and listen to changes in models https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 16
17. Demo https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 17
18. Advantages 1. Maintainability • Separation of concerns • Redesign UI 2. Testability • Easy to write unit test. • No require UI Automation 3. Extensibility: More reusable for iOS, watchOS, MacOS... https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 18
19. Disadvantages • Can be overkill for Simple UI: Tutorial/ Walkthrough • Massive View Controller will become Massive ViewModel • MVC is has better speed of the development. • Hard to design the ViewModel. https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 19
20. Rules!!! https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 20
21. View Controllers • View only knows the view controllers, notifying them of interaction events (same as MVC). • View controller can't talk to models directly, they only interact with view models and views. https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 21
22. View Models • Don’t import UIKit. • View Model only knows models. • View Model doesn't know Views/View Controllers https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 22
23. MVVM is silver bullet and will save your life from MVC? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 23
24. Just a SMALL improvement! https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 24
25. How can ViewModel notify data changes? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 25
26. Delegate? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 26
27. KVO NSNotification https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 27
28. Maybe[Closure] https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 28
29. Microsoft created MVVM. What do they thing? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 29
30. Rx Extension for Binding https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 30
31. What is Functinal Reactive Programming? • FRP is about datatypes that represent a value ‘over time’ • FRP is programming with asynchronous data streams. • ... https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 31
32. FRP is programming with streams of values over time https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 32
33. Now for magic! https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 33
34. What we can do • Observables • Transformations • Composition • Combination • Filter • Buffer ... https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 34
35. FRP is just Binding??? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 35
36. FRP Advantages • Code more concise & clear, easy to understand without context • Readability, highly express • Make Asynchronous easier • UI Binding • Maintainability, Extensibility ... https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 36
37. What are the advantages we got in production? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 37
38. FRP Advantages • Readable declarative code: review, test, debug • Has a standard mechanism for error recovery. • Composing is awesome!!! https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 38
39. FRP Advantages • Handling UI interactions/events/state is insanely easy • Reduce side-effects & using mutable values. • Remove “callback hell” https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 39
40. FRP Advantages FRP helps us focus on solving the problem rather than the required procedure. https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 40
41. Visit my blog! https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 41
42. Best Practices! https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 42
43. Best Practices View Model doesn't know about View Controller. => So how it give know what information VC need? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 43
44. Protocol https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 44
45. Best Practices https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 45
46. https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 46
47. Best Practices Immutable View Model: Dependence injection via initializer https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 47
48. Best Practices Storyboard??? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 48
49. Explicit Data Flow https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 49
50. Flux https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 50
51. Demo: Github Search https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 51
52. MVVM rules with RxSwift View cannot modify the data. View only knows how to present the data. • Bad viewModel.title .map { $0 + "!!!" } // View should not modify the data .bindTo(self.titleLabel) • Good viewModel.title .bindTo(self.titleLabel) https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 52
53. MVVM rules with RxSwift View doesn't know what ViewModel does. View can only communicate to ViewModel about what View did. • Bad viewModel.login() // Bad: View should not know what ViewModel does (login) • Good self.loginButton.rx_tap .bindTo(viewModel.loginButtonDidTap) // "Hey I clicked the login button" https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 53
54. MVVM rules with RxSwift Model is hidden by ViewModel. ViewModel only exposes the minimum data so that View can render. • Bad struct ProductViewModel { let product: Driver<Product> // Bad: ViewModel should hide Model } • Good struct ProductViewModel { let productName: Driver<String> let formattedPrice: Driver<String> } https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 54
55. Tips • Handle error: parse Error Message in ViewModel then expose as String. => Oops, we are doing it wrong too. • Don't make ViewModelM become Presenter layer: number of rows, color... https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 55
56. Naming? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 56
57. There are only two hard things in Computer Science: Cache invalidation and Naming things. — Phil Karlton https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 57
58. Naming? • Relate to Data, Action, not related to UI • Input: Trigger, Source, Action... • Output: Signal, Sink... https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 58
59. Q&A https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 59
60. Q&A View Model should be Struct or Class? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 60
61. Q&A N-ViewController <-> 1-ViewModel? https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 61
62. Q&A 1-ViewController <-> N-ViewModel !!! https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 62
63. Q&A Where MVVM suck: UI with complex state & levels. => Solution: • VIPER ! • Flux/Redux "" https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 63
64. Reactive with us, we are hiring! • PHP/Ruby Backend • Android Developer • iOS with Swift • Designer https://itviec.com/companies/innovatube https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 64
65. Thank you! https://dangthaison91.wordpress.com @dangthaison91 https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 65