Cycle for Android

functional and reactive programming in Kotlin

Transcript

1. Cycle for Android Jaewe Heo · !iiid! · @importre Aug. 3, 2016 functional and reactive programming in Kotlin
2. import importre
3. About me • Android • Rx • Kotlin - Kotlin Korea • Electron - Electron Korea • React - react-photonkit • Alfred workflows
4. alfred-mdi
5. alfred-pg
6. alfred-gi
7. alfred-hl
8. alfred-awe
9. alfred-tidy
10. Cycle for Android functional and reactive programming in Kotlin
11. Cycle.js http://cycle.js.org/
12. HCI (Human-Computer Interaction) two-way process
16. Mutual observation Reactive Programming
17. Two-way process val y = human(x)
18. Two-way process val y = human(x) val x = computer(y)

19. Two-way process val y = human(x) val x = computer(y)
 ?!
20. val x = computer(human(x))

21. Streams
22. Programming Foo Bar
23. Programming Foo Bar
24. Programming Foo Bar
25. Imperative Programming Foo Bar Proactive Passive Fooо Bar੄ ࢚కܳ ߸҃ೡ ࣻ ੓׮. Barח ־о ৔ೱਸ ઱ח૑ ݽܲ׮.
26. // This is inside the `Foo` module fun onNetworkRequest() { // ... bar.incrementCounter() // ... } Example of the Imperative Programming
27. Barח ৻ࠗ ੉߮౟ী ߈਽ೞৈ ੗न੄ ࢚కܳ ҙܻೠ׮. Reactive Programming Foo Bar Listenable Reactive Fooח ־ҳীѱ ৔ೱਸ ઱ח૑ ݽܲ׮.
28. // This is inside the `Bar` module foo.addOnNetworkRequestListener { // `this` is Bar this.incrementCounter() } Example of the Reactive Programming
29. Solve the cyclic dependency val y = human(x) val x = computer(y)
30. Solve the cyclic dependency val proxyX = ReplaySubject.create<Any>() val y = human(proxyX) val x = computer(y)
31. Solve the cyclic dependency val proxyX = ReplaySubject.create<Any>() val y = human(proxyX) val x = computer(y) x.imitate(proxyX)
33. kotlin-cycle Cycle for Android (written in Kotlin)
34. Hello Example • ੉ܴਸ ੍਺ (read) • ݫद૑ ߸҃ (model) • ݫद૑ܳ ചݶী ࠁৈષ (write)
36. HelloActivity.kt class HelloActivity : BaseActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_hello) Cycle.run(main, DomSource()) } private val main = { sources: Sources -> val change = sources.dom().select(helloEdit).textChanges() val model = change.map(::greeting) val view = model.map { message -> onUpdateView(message) } Sinks(DomSink(view)) } private fun onUpdateView(message: CharSequence) = { helloText.text = message } }
37. HelloActivity.kt class HelloActivity : BaseActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_hello) Cycle.run(main, DomSource()) } private val main = { sources: Sources -> val change = sources.dom().select(helloEdit).textChanges() val model = change.map(::greeting) val view = model.map { message -> onUpdateView(message) } Sinks(DomSink(view)) } private fun onUpdateView(message: CharSequence) = { helloText.text = message } }
38. HelloActivity.kt class HelloActivity : BaseActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_hello) Cycle.run(main, DomSource()) } private val main = { sources: Sources -> val change = sources.dom().select(helloEdit).textChanges() val model = change.map(::greeting) val view = model.map { message -> onUpdateView(message) } Sinks(DomSink(view)) } private fun onUpdateView(message: CharSequence) = { helloText.text = message } }
39. Kotlin-flavored Examples
40. HelloCycleActivity.kt class HelloCycleActivity : BaseActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_hello) cycle { val change = dom.select(helloEdit).textChanges() val model = change.map(::greeting) model.map { message -> { helloText.text = message } } } } }
41. HelloCycleActivity.kt class HelloCycleActivity : BaseActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_hello) cycle { val change = dom.select(helloEdit).textChanges() val model = change.map(::greeting) model.map { message -> { helloText.text = message } } } } }
42. Hello.kt fun greeting(name: CharSequence) = "Hello, $name!"
43. HelloTest.kt class HelloTest { @Test fun testGreeting() { val actual = greeting("cycle") val expected = "Hello, cycle!" assertEquals(expected, actual) } }
44. BMI Example • ރޖѱ, ఃী ؀ೠ ୡӝ ч ࢸ੿ (properties) • SeekBarܳ ਑૒੐ (read) • BMI ҅࢑ • Ѿҗܳ ചݶী ࠁৈષ (write)
45. BmiActivity.kt cycle { val weightProps = Observable.just(Props(min = 40, max = 140, value = 70)) val heightProps = Observable.just(Props(min = 140, max = 210, value = 170)) // Intent val (weightStream, heightStream) = intent(dom, heightProps, weightProps) // Model val stateStream = model(weightStream, heightStream, weightProps, heightProps) // View stateStream.map { state -> onUpdateView(state) } }
47. BmiActivity.kt private val intent = { dom: DomSource, heightProps: Observable<Props>, weightProps: Observable<Props> -> val weightChangeStream = dom .select(weightSeekBar.apply { val props = weightProps.toBlocking().first() max = props.max - props.min progress = props.value - props.min }) .userChanges() val heightChangeStream = dom .select(heightSeekBar.apply { val props = heightProps.toBlocking().first() max = props.max - props.min progress = props.value - props.min }) .userChanges() Pair(weightChangeStream, heightChangeStream) }
48. BmiActivity.kt private val model = { weightChangeStream: Observable<Int>, heightChangeStream: Observable<Int>, weightProps: Observable<Props>, heightProps: Observable<Props> -> Observable.combineLatest( weightChangeStream, heightChangeStream, weightProps, heightProps, ::calculateBmi) }
49. BmiActivity.kt private fun onUpdateView(state: State) = { unwrap(weightText, heightText, bmiText) { w, h, b -> w.text = "Weight: ${state.weight} kg" h.text = "Height: ${state.height} cm" b.text = "Bmi: ${state.bmi}" } nah { toast(R.string.error_undefined_views) } } kotlin-unwrap
50. Bmi.kt data class State(val weight: Int, val height: Int, val bmi: Int) data class Props(val min: Int, val max: Int, val value: Int) fun calculateBmi(weight: Int, height: Int, weightProps: Props, heightProps: Props): State { val realHeight = height + heightProps.min val realWeight = weight + weightProps.min val heightMeters = realHeight * 0.01F val bmi = Math.round(realWeight / (heightMeters * heightMeters)) return State(realWeight, realHeight, bmi) }
51. REST Example • ࢜۽Ҋஜ (read) • ୡӝীח ࢜۽Ҋஜ হ੉ ࢲߡ۽ ࠗఠ ؘ੉ఠܳ ੍যঠ ೣ • request(write) data -> response(read) data • Ѿҗܳ ചݶী ࠁৈષ (write) • ߡౡਸ ־ܴ (read) • షझ౟ܳ ڸ਑ (write) https://jsonplaceholder.typicode.com/
52. UsersActivity.kt cycle { error = onError // Intent val usersStream = api.getUsers() val refreshStream = dom .select(refreshView) .refreshes() .startWith(null as Void?) // Model val modelStream = Observable .combineLatest(usersStream, refreshStream) { users, refresh -> users } // View modelStream.map { users -> onUpdateView(users) } }
53. Extensions fun ImageView.loadUrl(imageUrl: String) = Picasso.with(context).load(imageUrl).into(this) fun Activity.toast(@StringRes id: Int) = Toast.makeText(this, id, Toast.LENGTH_SHORT).show() fun Activity.toast(message: String) = Toast.makeText(this, message, Toast.LENGTH_SHORT).show() fun RecyclerView.ViewHolder.toast(message: String) = Toast.makeText(itemView.context, message, Toast.LENGTH_SHORT).show()
54. UserViewHolder.kt itemView.locationImage.loadUrl(url) itemView.nameText.text = user.name cycle { val emailChange = dom.select(itemView.emailButton).clicks().map { ButtonType.EMAIL } val callChange = dom.select(itemView.callButton).clicks().map { ButtonType.CALL } val change = Observable.merge(emailChange, callChange) change.map { type -> show(user, type) } }
55. UserViewHolder.kt private fun show(user: User, type: ButtonType) = { toast(when (type) { ButtonType.EMAIL -> user.email ButtonType.CALL -> user.phone }) }
56. Conclusion
57. Conclusion • ӭՔೞפ જӟೠؘ…
58. Conclusion • functional ೠо? • reactive ೠо? • productionী ੸ਊ оמೠо?
59. Conclusion • functional ೠо? • reactive ೠо? • productionী ੸ਊ оמೠо?
60. References
61. References - importre • https://github.com/importre/kotlin-cycle • https://github.com/importre/kotlin-unwrap • https://github.com/importre/ready-for-production • Data class and Equality • Function Literals with Receiver • let, with, run, apply, use(using)
62. References - cycle.js • http://cycle.js.org/ • https://github.com/cyclejs-community/cycle-android
63. References - video • Unidirectional data flow architectures • What if the user was a function?
64. val coWorker = true cycle { val change = dom .select(toggle.apply { isChecked = true }) .checkedChanges() val model = change .map { onOff -> "উ٘۽੉٘ ѐߊ੗ܳ ݽभפ׮: $onOff" } .map { recruit -> "Riiid!\n$recruit" } model.map { message -> { checkText.text = message } } } apply@riiid.co
65. Thank you