Decompose

Project Url: arkivanov/Decompose
Introduction: Kotlin Multiplatform lifecycle-aware business logic components (aka BLoCs) with routing functionality and pluggable UI (Jetpack Compose, SwiftUI, JS React, etc.)
More: Author   ReportBugs   
Tags:

Download License Twitter URL

Kotlin Multiplatform lifecycle-aware business logic components (aka BLoCs) with routing functionality and pluggable UI (Jetpack Compose, SwiftUI, JS React, etc.) This project is inspired by Badoos RIBs fork of the Uber RIBs framework.

Supported targets:

  • Android
  • iosX64, iosArm64
  • JavaScript

Setup

Add Bintray repository to your root build.gradle file:

repositories {
    maven {
        url  "https://dl.bintray.com/arkivanov/maven"
    }
}

Add Decompose dependency to your build.gradle:

implementation "com.arkivanov.decompose:decompose:<version>"

Overview

Component

Each Component is represented by the Component interface (actually, should I find a better name?).

ComponentContext

Each Component has an associated ComponentContext which implements the following interfaces:

The Router

A key unit is the Router. It is responsible for managing Components, just like FragmentManager.

The Router supports back stack and so each Component has its own Lifecycle. Each time a new Component is pushed, the currently active Component is stopped. When a Component is popped from the back stack, the previous Component is resumed. This allows business logic to run while the component is in the back stack.

Each Component is created based on an associated Configuration. Configurations can be persisted via Android's saved state, thus allowing back stack restoration after configurations change or process death. When the back stack is restored, only currently active Components are recreated. All others in the back stack remain destroyed, and recreated on demand when navigating back.

Routers can be nested, and each Component can have more than one Router.

Sample apps

There are two sample apps.

Sample counter app

This sample demonstrates the following features:

  • Nested Components
  • Routing
  • Reused Components
  • State preservation (using StateKeeper)
  • Retaining instances (using InstanceKeeper)
  • Pluggable UI (Jetpack Compose, SwiftUI, JS React)

Content:

  • Shared module which includes the following Components:
    • Counter - this Component just increments the counter every 250 ms. It starts counting once created and stops when destroyed. So Counter continues counting while in the back stack, unless recreated. It uses the InstanceKeeper, so counting continues after configuration changes.
    • CounterInnerContainer - this Component contains the Counter and two Routers on the left and on the right side. Each Router displays its stack of Counters and two buttons for navigation. "Next" button pushes another Counter to the corresponding Router, "Prev" button pops the active Counter for the Router.
    • CounterRootComponent - this Component contains the Counter, the Router of CounterInnerContainer and a button pushing another CounterInnerContainer to the stack. System back button is used for backward navigation.
  • Android sample app
  • iOS sample app
  • JavaScript sample app

Sample Counter Component structure

Sample todo app

This sample can be found here.

It demonstrates the following features:

  • Nested Components
  • Routing
  • Using Lifecycle
  • Multi-module structure (one Component per module)
  • Inter-Component communication (via Reaktive, just an example)
  • MVI using MVIKotlin
  • Data persistance using SQLDelight
  • Pluggable UI (Jetpack Compose, SwiftUI, JS React)

There are multiple Components, each in a separate module:

  • list - the top part of the Main screen, displays a list of todo items. Tap on an item opens the Editor screen.
  • add - the bottom part of the Main screen, displays input field and a button. Tap on the button adds a new todo item to the list.
  • main - aggregates both list and add Components, represents the Main screen.
  • edit - provides the ability to edit a selected todo item.
  • root - aggregates both main and edit components and uses Router to switch between them.

Sample Todo Component structure

Author

Twitter: @arkann1985

Apps
About Me
GitHub: Trinea
Facebook: Dev Tools