Teapot

Unidirectional Dataflow library for Android inspired by The Elm Architecture.

Dependency

repositories {
    ...
    mavenCentral()
    ...
}

implementation 'dev.teapot:teapot:0.9.1'
testImplementation 'dev.teapot:teapottest:0.9.1'

Concepts

Teapot is heavily influenced by The Elm Architecture(TEA). Its core concepts:

Unidirectional dataflow
Immutable state
Managed side effects

It allows to write highly testable and predictable UI logic. Teapot is written in Kotlin and supports executing side effects via RxJava2 or Coroutines.

Core types

State

This is the type for describing the state of your app or screen.

Msg

Base type for all events happening during interaction with UI (such as button click, text inputs, etc)

Cmd

Type for side-effects. If you create Cmd, that means you want to execute a particular side effect (http request or other IO operation). When executed, the command will return new Msg with resulting data.

Update()

Function Update takes Msg and State as input, and returns a pair of two values — new State and Cmd, or simply speaking, what side effect you want to execute for incoming Msg. The main aspect of this function is that it is a pure function. That means there must be no side effects inside this function.

Render()

Function render() takes State as an input, and renders view in declarative manner.

Getting Started

Minimal implementation

data class IncrementDecrementState(val value: Int = 0) : State()
    
object Inc : Msg()
object Dec : Msg()    
    
class MyFragment : Fragment(), Upd<IncrementDecrementState>, Renderable<IncrementDecrementState> {

  
    private lateinit var plusBtn: Button
    private lateinit var minusBtn: Button
    private lateinit var counterText: TextView   
                    
    val program = ProgramBuilder()
                        .outputScheduler(AndroidSchedulers.mainThread())
                        .build(this)            
   

    override fun onCreateView(
            inflater: LayoutInflater, container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View? {
        
        val view = inflater.inflate(R.layout.main_layout, container, false)       
                        
        plusBtn = view.findViewById(R.id.plus_btn)
        minusBtn = view.findViewById(R.id.minus_btn)
        counterText = view.findViewById(R.id.counter_text)
               
        program.run(initialState = IncrementDecrementState(value = savedInstanceState?.getInt("counter", 0) ?: 0))              
    }
    
    override fun update(msg: Msg, state: counterText): Update<IncrementDecrementState> {          
            return when (msg) {            
                is Inc -> Update.state(state.copy(value = state.value + 1))               
                is Dec -> Update.state(state.copy(value = state.value - 1))
                else -> Update.idle()
            }
    }
    
    override fun render(state: IncrementDecrementState) {
        state.apply {
            counterText.setText(value)
        }
    }
    
    override fun onSaveInstanceState(outState  : Bundle) {
      super.onSaveInstanceState(outState)
     
      outState.putString("counter", program.state().value)
    }
    
    @Override
    fun onDestroyView() {
      super.onDestroyView()
      program.stop()
    }
    
}

Sample Project

To see full working sample, check out the sample app

Resources

Taming state in Android with Elm Architecture and Kotlin series of blog posts
Official guide into The Elm Architecture

sgrekov / Teapot