Migrating from Fragments to Jetpack Compose with Nibel | droidcon NYC 2023

While the engineering community is excited about adopting Jetpack Compose, in reality, we all have existing codebases that rely on a legacy UI stack.

In this talk, I will share how we designed a Jetpack Compose architecture at Turo that provides seamless integration in the existing fragment-based codebase. It is now available as Nibel - an open-source navigation library.

I will cover how we leveraged the power of Kotlin Symbol Processing (KSP) API to build an abstraction over the navigation that enables easy multi-module navigation out-of-the-box and covers the following navigation scenarios:
• fragment to compose
• compose to compose
• compose to fragment

Transcript

2. About me • Google Developer Expert - Android, Kotlin • Sr. Staff Software Engineer at Turo 2
3. Problem?
4. Problem? • You have a codebase that relies on Fragments 4
5. Problem? • You have a codebase that relies on Fragments • Adopting Jetpack Compose 5
6. Problem? • You have a codebase that relies on Fragments • Adopting Jetpack Compose • Gradual transition 6
7. Problem? class FooFragment : Fragment() { ... } @Composable fun BarScreen() { ... } 7
8. Navigation scenarios • fragment → compose 8
9. Navigation scenarios • fragment → compose • compose → compose 9
10. Navigation scenarios • fragment → compose • compose → compose • compose → fragment 10
11. Problem? • Unified navigation mechanism • Proper Jetpack Compose experience 11
12. Jetpack Compose architecture
13. Jetpack Compose architecture • Developed internally at Turo • Now, open-source: https://github.com/open-turo/nibel 13
14. Basic navigation
15. Declaring an entry @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen() { ... } 15
16. Navigating fragment to compose
17. Navigating fragment to compose class BarFragment : Fragment() { requireActivity().supportFragmentManager.commit { val entry = FooScreenEntry.newInstance().fragment replace(android.R.id.content, entry.fragment) } } 17
18. Navigating fragment to compose class BarFragment : Fragment() { requireActivity().supportFragmentManager.commit { val entry = FooScreenEntry.newInstance().fragment replace(android.R.id.content, entry.fragment) } } 18
19. Navigating compose to compose
20. Navigating compose to compose @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen() { ... } 20
21. Navigating compose to compose @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen() { ... } @UiEntry( type = ImplementationType.Composable, args = BarScreenArgs::class ) @Composable fun BarScreen(args: BarScreenArgs) { ... } 21
22. Navigating compose to compose @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen(navigator: NavigationController) { val args = BarArgs(...) navigator.navigateTo(BarScreenEntry.newInstance(args)) } 22
23. Navigating compose to compose @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen(navigator: NavigationController) { val args = BarArgs(...) navigator.navigateTo(BarScreenEntry.newInstance(args)) } 23
24. Navigating compose to compose @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen(navigator: NavigationController) { val args = BarArgs(...) navigator.navigateTo(BarScreenEntry.newInstance(args)) } 24
25. Navigating compose to fragment
26. Navigating compose to fragment 26 class BazFragment : Fragment() { ... }
27. Navigating compose to fragment 27 @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen(navigator: NavigationController) { val fragment = BazFragment() navigator.navigateTo(FragmentEntry(fragment)) }
28. Navigating compose to fragment 28 @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen(navigator: NavigationController) { val fragment = BazFragment() navigator.navigateTo(FragmentEntry(fragment)) }
29. Thought process
30. Wrap composable with a fragment 30 class FooFragment: Fragment() { override fun onCreateView( ... ) = ComposeView(requireContext()).apply { setContent { AppTheme { FooScreen() // <-- our composable function } } } }
31. Wrap composable with a fragment 31 class FooFragment: Fragment() { val someState: SomeState override fun onCreateView(...) { ... } fun someNonComposeFunction() { ... } fun anotherNonComposeFunction() { ... } }
32. Base fragment class 32 class FooFragment : ComposableFragment() { @Composable override fun ComposableContent() { FooScreen() // <-- our composable function } }
33. ImplementationType.Fragment 33 @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen() { ... }
34. Generated fragment 34 // generated code class FooScreenEntry : ComposableFragment() { @Composable override fun ComposableContent() { FooScreen() // <-- our composable function } }
35. Navigation 35 @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen() { ... } @UiEntry(type = ImplementationType.Fragment) @Composable fun BarScreen() { ... }
36. Navigation - fragment transaction 36 @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen(navigator: NavigationController) { navigator.navigateTo(BarScreenEntry.newInstance()) } @UiEntry(type = ImplementationType.Fragment) @Composable fun BarScreen() { ... }
37. Navigation - fragment transaction 37 @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen(navigator: NavigationController) { navigator.navigateTo(BarScreenEntry.newInstance()) } @UiEntry(type = ImplementationType.Fragment) @Composable fun BarScreen() { ... }
38. Optimization
39. Generated composable wrapper 39 // generated code class BarEntry( override val args: SecondArgs, override val name: String, ) : ComposableEntry<BarArgs>(args, name) { @Composable override fun ComposableContent() { BarScreen() // <-- our composable function } }
40. Generated composable wrapper 40 // generated code class BarEntry( override val args: SecondArgs, override val name: String, ) : ComposableEntry<BarArgs>(args, name) { @Composable override fun ComposableContent() { BarScreen() // <-- our composable function } }
41. Implementation type 41 @UiEntry(type = ImplementationType.Fragment) @Composable fun FooScreen() { ... } @UiEntry(type = ImplementationType.Composable) @Composable fun BarScreen() { ... }
42. Implementation type 42 navigator.navigateTo(BarScreenEntry.newInstance())
43. Implementation type 43 navigator.navigateTo(BarScreenEntry.newInstance()) ???
44. Abstraction over navigation
45. Navigation under-the-hood 45 Fragment entry @Composable type.fragment
46. Navigation under-the-hood 46 compose navigation @Composable entry @Composable Fragment entry @Composable type.fragment type.composable
47. Navigation under-the-hood 47 @Composable entry @Composable Fragment entry @Composable compose navigation @Composable entry @Composable type.composable type.composable
48. Navigation under-the-hood 48 @Composable entry @Composable Fragment entry @Composable fragment transaction @Composable entry @Composable Fragment (legacy) type.composable
49. Navigation under-the-hood 49 Fragment entry @Composable fragment transaction Fragment (legacy)
50. Navigation under-the-hood 50 @Composable entry @Composable Fragment entry @Composable fragment transaction @Composable entry @Composable Fragment (legacy) type.composable
51. Navigation under-the-hood 51 // base class for generated fragments abstract class ComposableFragment : Fragment() { @Composable abstract fun ComposableContent() override fun onCreateView(...) = ComposeView(...).apply { setContent { AppTheme { ... NavHost(..., startDestination = "@root") { composable("@root") { ComposableContent() } } } } } }
52. Navigation under-the-hood 52 // base class for generated fragments abstract class ComposableFragment : Fragment() { @Composable abstract fun ComposableContent() override fun onCreateView(...) = ComposeView(...).apply { setContent { AppTheme { ... NavHost(..., startDestination = "@root") { composable("@root") { ComposableContent() } } } } } }
53. Navigation under-the-hood 53 // base class for generated fragments abstract class ComposableFragment : Fragment() { @Composable abstract fun ComposableContent() override fun onCreateView(...) = ComposeView(...).apply { setContent { AppTheme { ... NavHost(..., startDestination = "@root") { composable("@root") { ComposableContent() } } } } } }
54. Navigation under-the-hood 54 // base class for generated fragments abstract class ComposableFragment : Fragment() { @Composable abstract fun ComposableContent() override fun onCreateView(...) = ComposeView(...).apply { setContent { AppTheme { ... NavHost(..., startDestination = "@root") { composable("@root") { ComposableContent() } } } } } }
55. Navigation under-the-hood 55 // base class for generated fragments abstract class ComposableFragment : Fragment() { @Composable abstract fun ComposableContent() override fun onCreateView(...) = ComposeView(...).apply { setContent { AppTheme { ... NavHost(..., startDestination = "@root") { composable("@root") { ComposableContent() } } } } } }
56. Navigation under-the-hood 56 // base class for generated fragments abstract class ComposableFragment : Fragment() { @Composable abstract fun ComposableContent() override fun onCreateView(...) = ComposeView(...).apply { setContent { AppTheme { ... NavHost(..., startDestination = "@root") { composable("@root") { ComposableContent() } } } } } }
57. Demo
58. Multi-module navigation
59. Navigation module 59 feature A module feature B module
60. Navigation module 60 navigation module feature A module feature B module depends depends
61. 61 screen 2 destination screen 1 screen 2 navigate to Navigation module
62. Declaring a destination // :navigation module object FooScreenDestination : DestinationWithNoArgs 62
63. Declaring a destination // :navigation module object FooScreenDestination : DestinationWithNoArgs data class BarScreenDestination( override val args: BarScreenArgs // Parcelable args ) : DestinationWithArgs<BarScreenArgs> 63
64. Associating a destination with a screen @UiExternalEntry( type = ImplementationType.Fragment, destination = FooScreenDestination::class ) @Composable fun FooScreen() { ... } 64
65. Navigating compose to compose
66. Navigation compose to compose navigator.navigateTo(BarScreenDestination) 66
67. Navigation compose to compose val args = BarScreenArgs(...) navigator.navigateTo(BarScreenDestination(args)) 67
68. Navigating fragment to compose
69. Navigation fragment to compose class BazScreenFragment : Fragment() { ... requireActivity().supportFragmentManager.commit { val entry = Nibel.newFragmentEntry(BarScreenDestination)!! replace(android.R.id.content, entry.fragment) } } 69
70. Navigation fragment to compose class BazScreenFragment : Fragment() { ... requireActivity().supportFragmentManager.commit { val entry = Nibel.newFragmentEntry(BarScreenDestination)!! replace(android.R.id.content, entry.fragment) } } 70
71. Navigation fragment to compose class BazScreenFragment : Fragment() { ... requireActivity().supportFragmentManager.commit { val entry = Nibel.newFragmentEntry(BarScreenDestination)!! replace(android.R.id.content, entry.fragment) } } 71
72. Navigating compose to fragment
73. Navigation fragment to compose @LegacyExternalEntry(destination = QuxScreenDestination::class) class QuxScreenFragment : Fragment() { ... } 73
74. Navigation fragment to compose @LegacyExternalEntry(destination = BasScreenDestination::class) class BazScreenFragment : Fragment() { ... } navigator.navigateTo(BasScreenDestination) 74
75. Jetpack Compose adoption scenarios
76. Scenario 1: Brand new feature module
77. 77 Scenario 1 fragment @UiEntry type.composable @UiEntry type.composable new feature module @UiExternalEntry type.fragment
78. 78 Scenario 1 fragment @UiEntry type.composable @UiEntry type.composable new feature module @UiExternalEntry type.fragment
79. 79 Scenario 1 fragment @UiEntry type.composable @UiEntry type.composable new feature module @UiExternalEntry type.fragment
80. 80 Scenario 1 fragment @UiEntry type.composable @UiEntry type.composable new feature module @UiExternalEntry type.fragment
81. 81 Scenario 1 @UiEntry type.composable @UiEntry type.composable @UiExternalEntry type.fragment @LegacyExternalEntry fragment new feature module
82. 82 Scenario 1 @UiEntry type.composable @UiEntry type.composable @UiExternalEntry type.fragment @LegacyExternalEntry fragment new feature module
83. 83 Scenario 1 @UiEntry type.composable @UiEntry type.composable @UiExternalEntry type.fragment @LegacyExternalEntry fragment new feature module
84. Scenario 2 Expanding existing feature
85. 85 Scenario 3 fragment @UiEntry type.composable fragment old feature module @UiEntry type.fragment
86. 86 Scenario 3 fragment @UiEntry type.composable fragment old feature module @UiEntry type.fragment
87. Scenario 3 Standalone screens
88. 88 Scenario 3 fragment fragment old feature module @UiEntry type.fragment @UiEntry type.fragment
89. 89 Scenario 3 fragment fragment old feature module @UiEntry type.fragment @UiEntry type.fragment
90. To conclude…
91. To conclude... • Abstract navigation fragment → compose, compose → fragment • Simple API, no boilerplate • High configurability 91
92. Materials
93. 93 Blog posts medium.com/turo-engineering/ b11ee5f19ba8
94. 94 Blog posts medium.com/turo-engineering/ b11ee5f19ba8 medium.com/turo-engineering/ 541c7b2f3f84