MVVM + RxSwift + DataControllers

MVVM, RxSwift
and DataControllers
Esteban Torres - @esttorhe, iOSCon, 2016

View Slide

MVC

View Slide

The «Problem» of MVC

View Slide

MVVM

View Slide

Model

View Slide

View

View Slide

ViewModel

View Slide

class MyViewModel {
// The model being «formatted»
private var model: MyModel? = nil
// A formatted property
let amountDueText: String {
var currencyFormatter = NSNumberFormatter()
currencyFormatter.numberStyle = NSNumberFormatterStyle.CurrencyStyle
currencyFormatter.locale = NSLocale.currentLocale()
return currencyFormatter.stringFromNumber(model?.amount) ?? 0)
}
}

View Slide

What now?

View Slide

Let's make some UI

View Slide

And some Models
struct Hops {
let uuid: String
let name: String?
let amount: Double
}

View Slide

Enter ViewModels
class HopsViewModel {
// Model
private let model: Hops
// Properties
var name: String {
return model.name ?? "N/A"
}
var amount: String {
// Notice how here we should convert to the user's unit (imperial / metric)
return "\(model.amount) g"
}
init(withHop hop: Hop) …
}

View Slide

Network layer

View Slide


View Slide

!❓

View Slide

!

View Slide

class ViewModelA {
private let model: Model
var formattedCurrency: String…
var formattedProperty1: Double…
var formattedProperty2: String…
…
…
init(withModel model: Model) …
func getModels(closure:([Model]) -> ()) -> Void {
API.request(.GetModels) { jsonResponse in
// Parse the JSON response here
let models = …
closure(models)
}
}
}

View Slide

!

View Slide

MVVM
…an abstraction of the view exposing public
properties and commands… In the view model,
the binder mediates communication between the
view and the data binder.
The view model has been described as a state of
the data in the model.1
1 http://wayback.archive.org/web/20080201101909/http://www.acceptedeclectic.com/2008/01/model-view-viewmodel-
pattern-for-wpf.html

View Slide

Brewbot to the rescue(?)!!!

View Slide

DataControllers

View Slide


View Slide

But there's more…

View Slide

The age of Swift

View Slide

MVVM + RxSwift + DataControllers

View Slide

RxSwift

View Slide

!

View Slide


View Slide

class ViewModel {
// Hold a reference to our DataController
private let dataController: DataController
// Hold a reference to the model we will be getting
private var model: Model?
func getModel(id: Int) -> Observable {
return Observable.create { observer in
dataController.getModel(id)
.subscribe(onNext: { [unowned self] model in
self.model = model
// If we need to format something else we should do it here
observer.onNext(self.model)
}, onError: { error in
// Maybe properly format the error to the user here as well
observer.onError(error)
}
).addDisposableTo(disposeBag)
}
}
}

View Slide

class ViewController: UIViewController {
// Retain a reference to our ViewModel
private let viewModel: ViewModel
func loadData() -> Void {
self.viewModel.loadModel()
.subscribeOn(MainScheduler.instance)
.subscribe(onNext: { [unonwed self] viewModel in
// Update your `UI` accordingly
self.nameLabel.text = viewModel.formattedName
self.amountLabel.tet = viewModel.hopsAmount
}, onError: { error in
}
})
.addDisposableTo(disposeBag)
}
}

View Slide

Rx Bindings

View Slide

class ViewController: UIViewController {
// Retain a reference to our ViewModel
private let viewModel: ViewModel
// Binding function
override func viewDidLoad() {
super.viewDidLoad()
self.bindComponents()
}
}
private extension ViewController {
func bindComponents() -> Void {
self.viewModel
.formattedName
.bindTo(self.nameLabel.rx_text)
self.viewModel
.hopsAmount
.bindTo(self.amountLabel.rx_text)
}
}

View Slide

So… what did we do? !

View Slide

Conclusion

View Slide

.
"That was the worst idea EVER…
BUT seeing how badly they tackled that problem
gave me an idea about how to actually make it
work."

View Slide

Questions?

View Slide

Thanks

View Slide

MVVM + RxSwift + DataControllers

MVVM + RxSwift + DataControllers

Esteban Torres

More Decks by Esteban Torres

Other Decks in Technology

Featured

Transcript