Download - MVVM & RxSwift
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
Who is you writing Swift?
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 3
Did you ever know MVVM or using it now?
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 4
Functional Reactive
Programming?
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 5
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
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
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
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
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
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
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
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
MVVM is silver bullet and will save your life from MVC?
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 23
Just a SMALL improvement!
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 24
How can ViewModel notify
data changes?
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 25
Microsoft created MVVM.
What do they thing?
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 29
Rx Extension for Binding
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 30
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
FRP is programming with streams of values over time
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 32
What we can do
• Observables
• Transformations
• Composition
• Combination
• Filter
• Buffer...
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 34
FRP is just Binding???
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 35
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
What are the advantages we got
in production?
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 37
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
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
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
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
Best Practices
Immutable View Model: Dependence injection via initializer
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 47
Best Practices
Storyboard???
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 48
MVVM rules with RxSwift
View cannot modify the data.View only knows how to present the data.
• BadviewModel.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
MVVM rules with RxSwift
View doesn't know what ViewModel does.View can only communicate to ViewModel about what View did.
• BadviewModel.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
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
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
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
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
Q&A
View Model should be Struct or Class?
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 60
Q&A
N-ViewController <-> 1-ViewModel?
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 61
Q&A
1-ViewController <-> N-ViewModel !!!
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 62
Q&AWhere MVVM suck: UI with complex state & levels.
=> Solution:
• VIPER !
• Flux/Redux ""
https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 63
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