The Elm Architecture on Android Development

Presentation about brings The Elm Architecture (TEA) to Android Development that I presented at internal Tech Talk in BBM Jakarta.

Slide in ODP format: https://drive.google.com/open?id=1s_m9Dlj75acqioQx6ij8bzOA7myVWrC9

Transcript

1. Bring TEA to Android Development Disclaimer: Experimental October 20th 2017 Eko Suhariyadi
2. Allow me to tell a story behind • Little knowledge about Redux and Unidirectional Dataflow • Rindang introduced me about UD on BBM Development • Tito talk to me about Elm • Tech talk about 1kb js by Widi that mention about Elm Architecture
3. The Elm Architecture • Let’s call it TEA • Inspire Redux
4. The Elm Architecture • Key Aspects – Unidirectional Dataflow – Immutable state – Managed Side Effects • Separate into – 3 Main Type • Model → State of Application (aka State in Redux) • Msg → Interaction Events (aka Action in Redux) • Cmd → Type of Side Effects (eg. I/O or Http operation) – 3 Main Function • Update → A way to Update Model (aka Reduce in Redux) • View → A way to represent Model in UI (aka Render in Redux) • Init → Where to set initial Model
5. The Elm Architecture • Immutable State – We keep application state in one immutable state and we cannot mutate it (just like Redux) – To “mutate” state, with create a new copy of previous state and make some needed modification – The state changes happen in function Update. The concept is well known as Single Source of Truth, meaning that changes can be only happen in one place
6. The Elm Architecture • Unidirectional Dataflow – Based on Elm Diagram, the data flow follow a cycle, from view or outsite world to Update function then back to View again. The cycle only happen in one single direction – Msg/Cmd → Update → View
7. The Elm Architecture • Managed Side Effects – In Elm Runtime, if we need to run async tasks (eg: I/O or Http operation), we just need to tell the runtime what to do (Cmd), the it will comeback with Msg result that will be directed to Update function
8. Let’s Bring it on Android • The main “stacks” – RxJava 2 with RxRelay • RxRelay basically is a Subject without capability to call onComplete and onError • We need it because elm runtime is keep running, so we dont need terminal event on Rx – Kotlin – Android Architecture Components • ViewModel • Room
9. Let’s Bring it on Android The Base Type open class State sealed class AbstractMsg { open class Msg : AbstractMsg() object Idle : Msg() object Init : Msg() class ErrorMsg(val error: Throwable, val cmd: Cmd) : Msg() } sealed class AbstractCmd { open class Cmd : AbstractCmd() object None : Cmd() }
10. Let’s Bring it on Android The Base Function interface TEAComponent { fun update(msg: Msg, state: State): Pair<State, Cmd> fun view(state: State) fun call(cmd: Cmd): Single<Msg> }
11. Let’s Bring it on Android The Program See on Android Studio
12. Reference • https://proandroiddev.com/taming-state-in-android-with-elm -architecture-and-kotlin-part-1-566caae0f706
13. Terima kasih • Email: eko.suhariyadi@bbmtek.com • CPIN: ECHOES • Github: github.com/ekosuhariyadi https://github.com/ekosuhariyadi/PopularMovies