43
Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps Mohanraj K.M, Sr. Engineering Manager, Amadeus Labs https://medium.com/@kmmraj

Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps Mohanraj K.M, Sr. Engineering Manager, Amadeus Labs

https://medium.com/@kmmraj

Page 2: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Understand the need & Take Away

Page 3: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Problem

Incremental Changes

Vs

Disruptive Changes

Page 4: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Let’s Understand – Why we need?

o Adding completely new information to an existing screen

o New screen in existing flow

o How do we react?

Page 5: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

App State

o Altering app state

o Rippling changes

Page 6: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

How are we updating App State?

o No consistency

Page 7: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

How are we updating App State?

o Many sources of truth

Page 8: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

How are we updating App State?

o Multiple communication paths

Page 9: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Is there any better way?

Page 10: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow
Page 11: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

1. Single source of truth for App state

o App State

o Sub states - Domains & Screens

Page 12: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

2. State is read only

o Consistent mechanism

o Centralized function

o Explicit object describing what happened

Page 13: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

fun somefunction(action: Action, oldState: AppState?) : AppState •

13

3. Pure function changes the state

fun reducer(action: Action, oldState: AppState?) : AppState _

What about unit testing such mechanism?

Page 14: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

14

Store

_

Page 15: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

15

Story so far

_

Page 16: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

16

React to State Changes

o UI Components getting updates

o Subscribe

Page 17: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

17

Unidirectional

Page 18: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

18

Redux Libs

o ReSwift

o Reductor or ReKotlin

Page 19: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Code Snippets – States and App State

https://medium.com/@kmmraj

Page 20: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Code Snippets - Store

https://medium.com/@kmmraj

Page 21: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Code Snippets - Activity

https://medium.com/@kmmraj

Page 22: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Code Snippets – Activity / ViewController

Page 23: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

o External Data Sources

o APIs, Content providers, local databases like SQLite, CoreData.

o Who in the unidirectional flow can take care of this responsibility?

23

Where I will get the Data?

Page 24: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Middleware

Code snippets

Page 25: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Middleware

https://medium.com/@kmmraj

Page 26: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

LoginActivity

mainStore

middleware

appReducer

AppState

API

authenicationReducer

authenicationState

isFetching=true

LoginStartedAction

newState

showProgressBar

LoginAction

START

FINISH

Unidirectional - contd

Page 27: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Async Actions

https://medium.com/@kmmraj

Page 28: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

LoginActivity

mainStore

middleware

appReducer

AppState

API

authenicationReducer

LoginAction

START FINISH

API

Page 29: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Call backs Hell … What Next ?

Page 30: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow
Page 31: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

3 Steps

o Create a stream

o Transform the stream

o Subscribe to the stream

Page 32: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Libraries - Choices

o iOS – or

o Android – RxKotlin or Kotlin Coroutines (experimental)

Page 33: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

mainStore

LoginActivity

mainStore

middleware

appReducer

AppState

API

authenicationReducer

LoginAction

START FINISH

API

Another Action

Page 34: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

1. Create a stream 2. Transform the stream

https://medium.com/@kmmraj

Page 35: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

3 – Subscribe to the Stream

https://medium.com/@kmmraj

Page 36: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Who will tie up the Observable and the Subscriber?

https://medium.com/@kmmraj

Page 37: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Unit Testing - Reducer

https://medium.com/@kmmraj

Page 38: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Unit Testing Middleware — Observables — Stream creators

https://medium.com/@kmmraj

Page 39: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Unit Testing Middleware — Subscribers — Stream consumers

https://medium.com/@kmmraj

Page 40: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Summary

https://medium.com/@kmmraj

o Separation of Concerns o Reactive X o Redux

o Testability o Flow less nature of screens o Learning curve

Page 41: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

Thank you

https://medium.com/@kmmraj

Page 42: Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps...o External Data Sources o APIs, Content providers, local databases like SQLite, CoreData. o Who in the unidirectional flow

|

Choices of ReactiveX libs

ReactiveCocoa ReSwift

By Github By ReactiveX

Cold & Hot Signal Only one sequence

Errors are strongly typed Generic type baked in, not possible to catch when specific error type

RxKotlin Corountines