Top Banner
MVVM ! RxSwift https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 1
65

MVVM & RxSwift

Jan 09, 2017

Download

Software

Thai Son Dang
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: MVVM & RxSwift

MVVM ! RxSwift

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 1

Page 2: 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

Page 3: MVVM & RxSwift

Who is you writing Swift?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 3

Page 4: MVVM & RxSwift

Did you ever know MVVM or using it now?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 4

Page 5: MVVM & RxSwift

Functional Reactive

Programming?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 5

Page 6: MVVM & RxSwift

Why MVVM?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 6

Page 7: MVVM & RxSwift

MVC is the Kinghttps://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 7

Page 8: MVVM & RxSwift

You drunk!!!

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 8

Page 9: MVVM & RxSwift

Apple’s Expected MVC

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 9

Page 10: MVVM & RxSwift

Actual Apple’s MVC

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 10

Page 11: MVVM & RxSwift

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

Page 12: MVVM & RxSwift

Actual Apple’s MVC

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 12

Page 13: MVVM & RxSwift

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

Page 14: MVVM & RxSwift

MVVM

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 14

Page 15: MVVM & RxSwift

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

Page 16: MVVM & RxSwift

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

Page 17: MVVM & RxSwift

Demo

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 17

Page 18: MVVM & RxSwift

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

Page 19: MVVM & RxSwift

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

Page 20: MVVM & RxSwift

Rules!!!

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 20

Page 21: MVVM & RxSwift

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

Page 22: MVVM & RxSwift

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

Page 23: MVVM & RxSwift

MVVM is silver bullet and will save your life from MVC?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 23

Page 24: MVVM & RxSwift

Just a SMALL improvement!

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 24

Page 25: MVVM & RxSwift

How can ViewModel notify

data changes?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 25

Page 26: MVVM & RxSwift

Delegate?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 26

Page 27: MVVM & RxSwift

KVONSNotification

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 27

Page 28: MVVM & RxSwift

Maybe[Closure]

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 28

Page 29: MVVM & RxSwift

Microsoft created MVVM.

What do they thing?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 29

Page 30: MVVM & RxSwift

Rx Extension for Binding

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 30

Page 31: MVVM & RxSwift

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

Page 32: MVVM & RxSwift

FRP is programming with streams of values over time

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 32

Page 33: MVVM & RxSwift

Now for magic!

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 33

Page 34: MVVM & RxSwift

What we can do

• Observables

• Transformations

• Composition

• Combination

• Filter

• Buffer...

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 34

Page 35: MVVM & RxSwift

FRP is just Binding???

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 35

Page 36: MVVM & RxSwift

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

Page 37: MVVM & RxSwift

What are the advantages we got

in production?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 37

Page 38: MVVM & RxSwift

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

Page 39: MVVM & RxSwift

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

Page 40: MVVM & RxSwift

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

Page 41: MVVM & RxSwift

Visit my blog!

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 41

Page 42: MVVM & RxSwift

Best Practices!

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 42

Page 43: MVVM & RxSwift

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

Page 44: MVVM & RxSwift

Protocol

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 44

Page 45: MVVM & RxSwift

Best Practices

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 45

Page 46: MVVM & RxSwift

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 46

Page 47: MVVM & RxSwift

Best Practices

Immutable View Model: Dependence injection via initializer

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 47

Page 48: MVVM & RxSwift

Best Practices

Storyboard???

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 48

Page 49: MVVM & RxSwift

Explicit Data Flow

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 49

Page 50: MVVM & RxSwift

Flux

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 50

Page 51: MVVM & RxSwift

Demo: Github Search

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 51

Page 52: MVVM & RxSwift

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

Page 53: MVVM & RxSwift

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

Page 54: MVVM & RxSwift

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

Page 55: MVVM & RxSwift

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

Page 56: MVVM & RxSwift

Naming?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 56

Page 57: MVVM & RxSwift

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

Page 58: MVVM & RxSwift

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

Page 59: MVVM & RxSwift

Q&Ahttps://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 59

Page 60: MVVM & RxSwift

Q&A

View Model should be Struct or Class?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 60

Page 61: MVVM & RxSwift

Q&A

N-ViewController <-> 1-ViewModel?

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 61

Page 62: MVVM & RxSwift

Q&A

1-ViewController <-> N-ViewModel !!!

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 62

Page 63: MVVM & RxSwift

Q&AWhere MVVM suck: UI with complex state & levels.

=> Solution:

• VIPER !

• Flux/Redux ""

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 63

Page 64: MVVM & RxSwift

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

Page 65: MVVM & RxSwift

Thank you!https://dangthaison91.wordpress.com@dangthaison91

https://dangthaison91.wordpress.com | fb.me/dangthaison.91 | @dangthaison91 65