Circuit – A Compose-driven architecture for Kotlin and Android applications

Circuit is a simple, lightweight, and extensible framework for building Kotlin applications that’s Compose from the ground up.

It builds upon core principles we already know like Presenters and UDF, and adds native support in its framework for all the other requirements we set out for above. It’s heavily influenced by Cash App’s Broadway architecture (talked about at Droidcon NYC, also very derived from our conversations with them).

Circuit’s core components are its Presenter and Ui interfaces.

1. A Presenter and a Ui cannot directly access each other. They can only communicate through state and event emissions.
2. UIs are compose-first.
3. Presenters are also compose-first. They do not emit Compose UI, but they do use the Compose runtime to manage and emit state.
4. Both Presenter and Ui each have a single composable function.
5. In most cases, Circuit automatically connects presenters and UIs.
6. Presenter and Ui are both generic types, with generics to define the UiState types they communicate with.
7. They are keyed by Screens. One runs a new Presenter/Ui pairing by requesting them with a given Screen that they understand.

Circuit’s repo is being actively developed in the open, which allows us to continue collaborating with external folks too. We have a trivial-but-not-too-trivial sample app that we have been developing in it to serve as a demo for a number of common patterns in Circuit use.

Counter Example

This is a very simple case of a Counter circuit that displays the count and has buttons to increment and decrement.

There’s some glue code missing from this example that’s covered in the Code Gen (TODO link) section later.

@Parcelize
object CounterScreen : Screen {
  data class CounterState(
    val count: Int,
    val eventSink: (CounterEvent) -> Unit,
  ) : CircuitUiState
  sealed interface CounterEvent : CircuitUiEvent {
    object Increment : CounterEvent
    object Decrement : CounterEvent
  }
}

@CircuitInject(CounterScreen::class, AppScope::class)
@Composable
fun CounterPresenter(): CounterState {
  var count by rememberSaveable { mutableStateOf(0) }

  return CounterState(count) { event ->
    when (event) {
      is CounterEvent.Increment -> count++
      is CounterEvent.Decrement -> count--
    }
  }
}

@CircuitInject(CounterScreen::class, AppScope::class)
@Composable
fun Counter(state: CounterState) {
  Box(Modifier.fillMaxSize()) {
    Column(Modifier.align(Alignment.Center)) {
      Text(
        modifier = Modifier.align(CenterHorizontally),
        text = "Count: ${state.count}",
        style = MaterialTheme.typography.displayLarge
      )
      Spacer(modifier = Modifier.height(16.dp))
      val eventSink = state.eventSink
      Button(
        modifier = Modifier.align(CenterHorizontally),
        onClick = { eventSink(CounterEvent.Increment) }
      ) { Icon(rememberVectorPainter(Icons.Filled.Add), "Increment") }
      Button(
        modifier = Modifier.align(CenterHorizontally),
        onClick = { eventSink(CounterEvent.Decrement) }
      ) { Icon(rememberVectorPainter(Icons.Filled.Remove), "Decrement") }
    }
  }
}

Circuit on GitHub: https://github.com/slackhq/circuit
Blog post from Slack: https://slackhq.github.io/circuit/
Platform: Android
⭐️: 376