Migrating a large scale banking app to compose

Migrating a large-scale
banking app to Compose
S. Fatih Giris
@fatih_grs

How to migrate existing apps to
Compose?

Agenda
• Integrating Compose
• Interoperability APIs
• Migration strategies
• Migration at DNB
• Take-aways

Integrating Compose
• Entirely Compose
• View based UI + Compose
• Composables inside Views
• Views inside composables

Interoperability APIs
• ComponentActivity.setContent
• ComposeView (View)
• AndroidView (Composable)

Migration Strategies
• Top-down
• Bottom-up

Top-down
• Start with the top most view
• Go deeper and deeper ⬇

Top-down
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
fragment_top_down.xml

Top-down
<LinearLayout
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
<Button
fancy_content.xml

Top-down
<androidx.compose.ui.platform.ComposeView
android:id="@+id/composeView"
android:layout_height="match_parent" />
<Button
fancy_content.xml

Top-down
class TopDownFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(
R.layout.fragment_top_down,
container,
false
)
}
}
TopDownFragment.kt

Top-down
class TopDownFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return ComposeView(requireContext())
}
}
TopDownFragment.kt

Top-down
return ComposeView(requireContext())
TopDownFragment.kt

Top-down
return ComposeView(requireContext()).apply {
// Dispose the Composition when viewLifecycleOwner is destroyed
setViewCompositionStrategy(
ViewCompositionStrategy.DisposeOnLifecycleDestroyed(viewLifecycleOwner)
)
setContent {
// Compose World
}
}
TopDownFragment.kt

Top-down
return ComposeView(requireContext()).apply {
)
setContent {
// Compose World
// Vertical Linear Layout
Column {
// Add views as AndroidView by creating
// programatically or inflating from XML
}
}
}
TopDownFragment.kt

Top-down
setContent {
Column {
}
}
TopDownFragment.kt

Top-down
setContent {
Column {
AndroidView(
modifier = Modifier.fillMaxSize(),
factory = { context ->
// Inflate it from XML
inflater.inflate(
R.layout.fancy_content,
container,
false
)
},
update = { view ->
// View's been inflated or state read in
// this block has been updated
}
)
}
} TopDownFragment.kt

Top-down
setContent {
Column {
AndroidView(
modifier = Modifier.fillMaxSize(),
factory = { context ->
// Create view programatically
// android.widget.Button
Button(requireContext())
},
update = { view ->
// View's been inflated or state read in
// this block has been updated
}
)
}
}
TopDownFragment.kt

Top-down
setContent {
Column {
Button(onClick = {}) {
Text("I am a compose button”)
}
}
}
TopDownFragment.kt

Bottom-up
• Start with the inner most UI elements
• Go up and up ⬆

Bottom-up
fragment_bottom_up.xml
<LinearLayout
android:layout_height="match_parent">
<Button
<TextView
</LinearLayout>

Bottom-up
<LinearLayout
android:id="@+id/buttonComposeView"
<TextView
</LinearLayout>

Bottom-up
class BottomUpFragment : Fragment() {
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
buttonComposeView.apply {
// Configure ComposeView
}
}
}
BottomUpFragment.kt

Bottom-up
// Configure ComposeView
}
BottomUpFragment.kt

Bottom-up
)
}
BottomUpFragment.kt

Bottom-up
)
setContent {
// In Compose world
}
}
BottomUpFragment.kt

Bottom-up
)
setContent {
// In Compose world
Button(onClick = {}) {
Text(text = "I am migrated Button")
}
}
}
BottomUpFragment.kt

Bottom-up
<LinearLayout
android:id="@+id/buttonComposeView"
android:id="@+id/textComposeView"
</LinearLayout>

Bottom-up
<LinearLayout
</LinearLayout>

Bottom-up
android:id="@+id/fragmentComposeView"
android:layout_height="match_parent" />

Design System at DNB
• Eufemia Design System 🌈
• Theming
• Core components (EufemiaTextView, EufemiaButton etc.)
• Tetris 📱(WIP)
• Common UI components (Toolbar etc.)

Eufemia
App1
App2
uses
uses

Eufemia
Tetris
(WIP)
App1
App2
uses
uses
uses

Migration Plan
• Start with Eufemia & Tetris
• Eufemia
• Migrate design system to Compose (colours, shapes, typography)
• Convert each component to Compose one by one
• Tetris
• Create Components as composables from the scratch
• Use AndroidView for Eufemia Android Views

Migration Plan
• Pick a screen in the app
• Apply bottom-up approach
• Create components in Tetris & Eufemia
• Iterate for all screens

During Migration
Eufemia
Compose
Tetris
Compose
App1
App2
uses
uses
uses
Eufemia
uses

After Migration
Eufemia
Compose
Tetris
Compose
App1
App2
uses
uses
uses

Migration of Apps
Activity + Fragment

Migration of Apps
Activity + Fragment
• Single Activity
• Jetpack Navigation

Migration of Apps
• No Fragment
• Activity sets content
• Navigate between composables
• Requires navigation-compose

How to replace Fragments with Composables?

Migration Plan
Activity + Fragment + Compose

Migration Plan
• Only change the way views are
presented (ComposeView +
Composables)
• No change in navigation
• After all screens are migrated,
remove fragments

Compose POC
Toolbar
Header
Selectable item

Compose POC
• Android Studio: Bumblebee Canary 1
• Android Gradle Plugin: 7.1.0-alpha01
• Kotlin: 1.5.21
• Compose: 1.0.1

Compose POC
Gradle Android cache fix plugin + AGP 7.1.0-alpha01 incompatibility
✅ Bypass version check or comment out the plugin :)

Compose POC
Hilt 2.38.1 + AGP 7.1.0-alpha01 bug*
*https://github.com/google/dagger/issues/2618
✅ Update AGP to 7.1.0-alpha06

Compose POC
2 files found with path 'META-INF/ui_release.kotlin_module' from inputs:
- /Users/fatih/.gradle/caches/transforms-3/90edb5b9f55f1931b87d2b5c8a7aa61d/…
- /Users/fatih/.gradle/caches/transforms-3/52dda4f473a3d3633ea54e66766f28d2/…
✅ Exclude META-INF/ui_release.kotlin_module in packaging options

Compose POC
✅ Update all Kotlin versions to the same version

Compose POC
Toolbar ✅
Header ✅
Selectable item ✅

Compose POC
✅ Update androidx.activity version to 1.3.0

Migration Status
• Eufemia
• Theming: Colors, typography, shape ✅
• Core components 🚧
• Tetris 🚧
• Apps 🚧

Take-aways
• Plan your migration
• POC
• Make use of interoperability APIs
• Stick to the migration plan

Migrating a large scale banking app to compose

More Related Content

What's hot (20)

Similar to Migrating a large scale banking app to compose (20)

Recently uploaded (20)

Migrating a large scale banking app to compose