API Design with Compose

From our basic experimentations with Jetpack Compose to pushing the first Composable to Production with our brand new design system, it took us roughly 2 years! Yeah 2 years might be long you would say but wasn't for us!

This talk will mainly focus on how we design the API of our new Compose Design System, which is not based on Material, with the different iterations we experimented along the way. You will see the importance of a good communication between the tech and design teams and the impact the migration might have on the QA when automation tests are already in place.

In the end, you'll have a glance at how we introduce Compose in our production app 🚀

Transcript

1. 1 The Power of Conversation aircall.io API Design avec Compose Julien Salvi - Android GDE | Android @ Aircall Mobilis In Mobile 🐘 @JulienSalvi
2. 2 The Power of Conversation aircall.io Bonjour ! Julien Salvi Lead Android Engineer @ Android GDE “Android dev in shorts!” @JulienSalvi
3. 3 The Power of Conversation aircall.io Intro & context A Design System - where API design matters Demo time! Summary
4. 4 The Power of Conversation aircall.io Introduction and context
5. 5 The Power of Conversation aircall.io “ ” The Hare and the Tortoise 🐇🐢
6. 6 The Power of Conversation aircall.io Better productivity Why Compose? 1 2 3 Improving maintainability A future proof UI framework Moving to Compose will help us improve our productivity by building UI faster with less code. Simplifying the existing code made of Kotlin code + XML and reducing the number of lines by ~20%. Simplifies UI development with a modern declarative approach and provides powerful tools for creating dynamic, responsive interfaces “Because it’s coooool!”
7. 7 The Power of Conversation aircall.io Consistency across UI Why a Design System? 1 2 3 Better productivity Seamless iteration Ensure a uniform look and feel across the app with reusable components and standardized styles, making maintenance and scaling easier. Streamline development with predefined, customizable components, reducing the time and effort needed to build and update UI elements. Quickly adapt to design changes with Compose declarative approach, enabling faster iterations and real-time previews during development. “Because it’s coooool!” (again)
8. 8 The Power of Conversation aircall.io Our Compose journey 2021 2022 2023 2024 Compose stability Experimenting with Compose Building Compose components and defining the architecture Screens and architecture migration First Compose screen in production Start building components and samples all together Design System iterations Color tokens from the design team
9. 9 The Power of Conversation aircall.io Compose Cookbook Screen 100% Compose
10. 10 The Power of Conversation aircall.io From a simple Material2 button…
11. 11 The Power of Conversation aircall.io …to a fully styled Compose button
12. 12 The Power of Conversation aircall.io Now let’s see how we built our Design System and improved the API over time 🚀
13. 13 The Power of Conversation aircall.io A Design System 🔬 󰳘 Where API design matters
14. 14 The Power of Conversation aircall.io “ ” Building the foundations
15. 15 The Power of Conversation aircall.io Building the foundations • 📝 Assessing what is already existing • 🤝 Recurrent sync with the design team • 🎨 Having color tokens from the begin is a major advantage to establish the theme • 🧪 Experiment all together to everyone know how it started
16. 16 The Power of Conversation aircall.io Material or custom? • 🧪 We first thought that going with a classic material theme would work… • … we quickly realised that was NOT the right way for us 😆
17. 17 The Power of Conversation aircall.io Material or custom? • 🧪 We first thought that going with a classic material theme would work… • … we quickly realised that was NOT the right way for us 😆 • But having a fully custom theme would be better according to our design requirements • Let’s see how we built a bridge to Material with our custom theme thanks to CompositionLocalProvider
18. 18 The Power of Conversation aircall.io Defining the color tokens • First, the design team will set up global brand colors to use in the app
19. 19 The Power of Conversation aircall.io Defining the color tokens • First, the design team will set up global brand colors to use in the app • Then, define the colors in your app in a BrandPalette file for example
20. 20 The Power of Conversation aircall.io Defining the color tokens • First, the design team will set up global brand colors to use in the app • Then, define the colors in your app in a BrandPalette file for example • Next, the design team will give you the different color tokens (text, surface, icon…)
21. 21 The Power of Conversation aircall.io Defining the color tokens • First, the design team will set up global brand colors to use in the app • Then, define the colors in your app in a BrandPalette file for example • Next, the design team will give you the different color tokens (text, surface, icon…) • Finally, let’s add that to the app 🚀 It also open the way to dynamic theming
22. 22 The Power of Conversation aircall.io Design System principles • While developing our new design system with Compose we kept a few principles in mind: ◦ Do NOT use Material components directly ◦ DO have an good API to facilitate the integration in the app ◦ DO have scalable components ◦ DO keep the notion of Atomic design: from atomic components to complex molecules ◦ DO have an interoperability with the current design system • Push a first concept agreed with everyone… then iterate!
23. 23 The Power of Conversation aircall.io “ ” DevExp matters! Build a robust API
24. 24 The Power of Conversation aircall.io Enhancing Developer Experience (DevExp) Why API design? 1 2 3 Improving code maintainability Increasing reusability Well-designed APIs simplify the development process, making it easier for developers to understand, use, and integrate different components, leading to higher productivity and satisfaction Clear and consistent API design reduces the complexity of the codebase, making it easier to maintain, debug, and extend. This ensures long-term sustainability and flexibility. A well-thought-out API design promotes the creation of reusable components and modules, enabling developers to build applications faster and with greater consistency across different projects. “Because you’ll feel cooool!”
25. 25 The Power of Conversation aircall.io OK remember that slide?
26. 26 The Power of Conversation aircall.io Let’s see how we reached that API for our buttons 🔘
27. 27 The Power of Conversation aircall.io The monolith approach • When we pushed the first iteration, we had a simple monolith containing everything… • … but with a bit of package organization 😅 • We previously seen how we were able to provide custom colors or dimens 🤓 Now let’s see how we can improve the API of our button component
28. 28 The Power of Conversation aircall.io To style the button we can just call the different styled functions We need to style our buttons, let’s expose ButtonStyle class
29. 29 The Power of Conversation aircall.io We can now build the Composable for the different type of buttons
30. 30 The Power of Conversation aircall.io It was a good start but wanted to have a better API for styling
31. 31 The Power of Conversation aircall.io Having a Style builder could improve the way define the different styles
32. 32 The Power of Conversation aircall.io And this could be done for every components (TextField, CompoundButtons…) So we’re good? well not yet 😅
33. 33 The Power of Conversation aircall.io Our latest iteration, less permissive in style but less error prone
34. 34 The Power of Conversation aircall.io Atoms & molecules • We kept the same logic for other atomic components or molecules using mostly Compose Foundation APIs • Keeping the core logic internal and exposing only what’s needed for the developer in a understandable way • And then, we decided to break this monolith into different modules…
35. 35 The Power of Conversation aircall.io Module & package mngt • In the end, we splitted the components in several modules and packages • This help us having a more granular approach when building and exposing components to app • A demo is worth a thousand slides, let’s switch to Android Studio 󰳕
36. 36 The Power of Conversation aircall.io API Design • Here are a few things you should keep in mind when working on the API of your design system: ◦ ✅ It should be easy to use now and after ◦ ✅ It should be understandable by everyone ◦ ✅ It doesn’t have to be perfect! ◦ ✅ Make it scalable ◦ ✅ Don’t hesitate to challenge and experiment
37. 37 The Power of Conversation aircall.io “ ” Setting up a migration plan
38. 38 The Power of Conversation aircall.io Migration plan • Here are key points of the migration plan you should have in mind: ◦ Architecture ◦ Interoperability ◦ Navigation ◦ Testing • Let’s explore some tips to best achieve the migration to Compose
39. 39 The Power of Conversation aircall.io Architecture
40. 40 The Power of Conversation aircall.io Architecture
41. 41 The Power of Conversation aircall.io Interoperability • Our application is built with many Activities, Fragment and BottomSheetFragment • First approach was to migrate all Fragments content in Compose thanks to ComposeView • Once done, the same thing is done with the BottomSheetFragment content
42. 42 The Power of Conversation aircall.io
43. 43 The Power of Conversation aircall.io Interoperability • Once all fragment and bottomsheet have been migrated, you can now get rid of the fragments in each “Universe”. • Here each “Universe” is an Activity that is used in the application • Why? To have the best interoperability with our navigation stack
44. 44 The Power of Conversation aircall.io Navigation • Our global Router manages the navigation between Activities, Fragments, modals or external links • Our Router has its own stack and is very tight to the View framework • So what are the option? First we experimenting with the androidx Compose Nav. https://medium.com/inside-aircall/why-did-we-move-away-from-navigation-component-f2160f7c3f4b
45. 45 The Power of Conversation aircall.io Navigation • It was doing the job at first, we were not 100% happy with several aspects early 2023: ◦ Not very straightforward to have a multi module navigation ◦ The API seems OK but could be better ◦ Lack of a type safe navigation (not true with the new version) • So what we chose? Let me show you the benefit of Voyager 🚀
46. 46 The Power of Conversation aircall.io Navigation • While experimenting with Voyager, we quickly saw that was the right choice for the team: ◦ Great API that fits our needs ◦ Easy multi module navigation with the ScreenRegistry ◦ Type safe navigation • Here is a quick snippet how Voyager is implemented in our app 🚀 https://github.com/adrielcafe/voyager
47. 47 The Power of Conversation aircall.io
48. 48 The Power of Conversation aircall.io UI tests • Make sure you keep your screen testable • Compose has a great API to add test tags to your Composable • Try to keep the same tag ID from View to Compose to ease the migration • If a QA team is in charge of the UI tests, sync early and make a POC
49. 49 The Power of Conversation aircall.io UI tests https://medium.com/@juliensalvi/ui-tests-with-jetpack-co mpose-and-appium-x-uiautomator-5d276fb655aa
50. 50 The Power of Conversation aircall.io Demo time! See you in the Studio
51. 51 The Power of Conversation aircall.io Demo time! • Let’s see a tiny screen that showcase the Compose design system API • Have a glimpse at the new architecture • Let’s live demo 🙈
52. 52 The Power of Conversation aircall.io Key takeaways Why moving to Compose Design System? • 100% Kotlin 🚀 • Get rid of View/XML components • Coroutine/Flow support in your components • Having a better consistency across all components • Reusability • Futureproof UI framework Why the API design matters? • Improve the developer experience • Having a better productivity • Easier app development • Consistency across all component APIs. • Keep experimenting!
53. 53 The Power of Conversation aircall.io Compose documentation https://developer.android.com/develop/ui/compose Compose Component API Guidelines https://github.com/androidx/androidx/blob/androidx-main/compose/docs/compose- component-api-guidelines.md Design systems in Compose https://developer.android.com/develop/ui/compose/designsystems Composing an API the *right* way https://www.droidcon.com/2023/11/15/composing-an-api-the-right-way/ Design Scalable Compose APIs https://io.google/2024/explore/7c08e61e-27d6-4f6a-93fd-590145e83b90/ Resources
54. 54 The Power of Conversation aircall.io Merci ! Enjoy the Compose world! Julien Salvi - Android GDE | Android @ Aircall Mobilis In Mobile 🐘 @JulienSalvi