JCCONF 2016 - Redux on Android using Kotlin

Android's issue
Redux and Kotlin
Demo

Transcript

1. Redux on Android using Kotlin cnevinchen@gmail.com @chennevin
2. Agenda • Android’s Problem • Why Redux is helpful • Kotlin / Redux introduction • Demo
3. Hello! • Android ? • Web ? • Kotlin?
4. Android’ UI Issues • Immutability + Asynchroncity • Complexity grows with your requirement
5. Android’s architecture • First, view and data are changed in controllers • MVP, presenter operate encapsulated view • MVVM , view subscribe to model change • Event Bus ,Rx, publish subscribe…. • concept : isolation of change, separation of concerns
6. Store Terms Action Reducer State POJO, Type & Payload pure functions that return data Data in app. ex. variables Singleton that holds ref to below
7. Store Example #2 Split String Action Reducer State { type: “split”
 payload:“abcd” } a new state with [“a”,”b”,”c”,”d”] is created initial state : [] if type is “split” split the payload final state : [“a”,”b”,”c”,”d”]
8. Store Example #3 Search App Action Reducer State { 
 type: 'Search', 
 name: 'Apple' 
 } Apple initial state : null if type is “Search” -> find in mem cache
 -> find in disk cache
 -> find in network
 -> update state final state : Apple
9. Redux • Command Pattern (mutate state) • Observer (Publish-Subscribe) Pattern ( bind state) • Bind Properties Pattern (update view)
10. Redux • Principles : • Single source of truth • State is read-only • Changes are made with pure functions • Good : Complexity not necessarily grows with your requirement
11. Counter App Single State, simple Action
12. Store Terms Action Reducer State +1 on the result if action’s type is “add”, I’ll add “1” to the result could be 0,1,2,3,4,5… result is initially 0
13. Design for Redux
14. Design Redux 1 2 3 4
15. Why Kotlin? • data class -> copy() • val -> immutability • concise syntax ( ex. when, DSL, class() ) • lambda • object -> singleton • Android sugar
17. • Action: • Pojo that has type and payload • type : command • payload : parameter • class • val : read only • default constructor : auto defined properties class x extends State{ int num; int getNum()…. int setNum(int n)… } • seal class : • enum in Kotlin • restrict class hierarchy • sub class could have multiple instance
18. • Actor of an action • One state one reducer • Separation of concern • Pure function : less side effect • Finite number of states : predictable states • Could have sub-reducer ( combinedReducer) and dispatch to them. • “when” statement : like switch, but no cast • each line is an expression and can return value • work with Java
19. • the variables that current app holds • like a vm snapshot • could have sub state, let producer decides what to response and how to react • copy() ,equal() , hashCode(), toString() for free. • Destructuring Declarations • copy() : immutability • could have child state, let reducer decides what to react
20. • single source of true • dispatch is atomic operation • unidirectional data flow Publish - Subscribe state is mutated using pure function
21. Interact to Redux
22. UI Event Dispatch Action Reducer Return New State Notify Subscribers onStateChanged View Update
23. Android Store Action Reducer State type: action_plus
 payload : 1 if (type== action_add) return state using copy data class State(var num:Int) AppStore = Store.create(initial:State,reducers: Reducer[] ) 2:dispatch Subscribe 1:Hook 3:Return new Sate onStateChange
24. bind mapStateToProps Hook bind mapStateToProps
25. Todo App Multiple State, Async Action
27. Android component
28. dagger AppStore as state
 of DevStore = Time Travel
29. dagger AppStore as state
 of DevStore = Time Travel
30. Action
31. Reducer
32. State
33. Action Creator
34. Operation
35. Service
36. click “done” to update the list select all multiple selection delete one todo clear selected enter new todo
37. auto update with store change Click to open the list auto update with store change
38. Redux boilerplate Inject store Subscribe to store. Send action after here React to state change
39. source code • https://github.com/cnevinc/redux-java/tree/ jcconf/detail_advanced • fork from https://github.com/glung/redux-java
40. Recap • Dev Tool - Time Travel • Async call • Animation • Action Creator
41. The Good • make predictable result / state • only modify your code in a finite number of state • Separation of concern • Finite State Machine
42. The Bad • Hard to implement • Mindset Change
43. Bonus • Better work with React ( check Anvil!) • http://zserge.com/blog/anvil-app- architecture.html • jvm-redux • https://github.com/jvm-redux/jvm-redux-api
44. Porting Redux to Android • https://github.com/pardom/redux-kotlin • https://github.com/glung/redux-java • https://github.com/brianegan/bansa • https://github.com/AngusMorton/kedux • https://github.com/trikita/jedux • https://github.com/beyondeye/Reduks
45. Blogs ,Talks , Courses • https://github.com/bkase/cyklic • http://zserge.com/blog/android-mvp-mvvm-redux-history.html • http://zserge.com/blog/anvil-app-architecture.html • https://realm.io/news/kau-lee-kase-reduxing-ui-borrowing-from-web/ • https://www.youtube.com/watch?v=SsH_rByBbq4 • http://hannesdorfmann.com/android/model-view-intent • https://www.udemy.com/the-complete-react-native-and-redux-course • https://facebook.github.io/flux/
46. Special Thanks • @kudochien • @Lungos https://github.com/glung/redux-java