1 The Power of Conversation aircall.io API Design avec Compose Julien Salvi - Android GDE | Android @ Aircall Mobilis In Mobile 🐘 @JulienSalvi

2 The Power of Conversation aircall.io Bonjour ! Julien Salvi Lead Android Engineer @ Android GDE “Android dev in shorts!” @JulienSalvi

3 The Power of Conversation aircall.io Intro & context A Design System - where API design matters Demo time! Summary

4 The Power of Conversation aircall.io Introduction and context

5 The Power of Conversation aircall.io “ ” The Hare and the Tortoise 🐇🐢

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 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 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 The Power of Conversation aircall.io Compose Cookbook Screen 100% Compose

10 The Power of Conversation aircall.io From a simple Material2 button…

11 The Power of Conversation aircall.io …to a fully styled Compose button

12 The Power of Conversation aircall.io Now let’s see how we built our Design System and improved the API over time 🚀

13 The Power of Conversation aircall.io A Design System 🔬 󰳘 Where API design matters

14 The Power of Conversation aircall.io “ ” Building the foundations

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 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 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 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 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 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 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 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 The Power of Conversation aircall.io “ ” DevExp matters! Build a robust API

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 The Power of Conversation aircall.io OK remember that slide?

26 The Power of Conversation aircall.io Let’s see how we reached that API for our buttons 🔘

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 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 The Power of Conversation aircall.io We can now build the Composable for the different type of buttons

30 The Power of Conversation aircall.io It was a good start but wanted to have a better API for styling

31 The Power of Conversation aircall.io Having a Style builder could improve the way define the different styles

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 The Power of Conversation aircall.io Our latest iteration, less permissive in style but less error prone

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 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 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 The Power of Conversation aircall.io “ ” Setting up a migration plan

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 The Power of Conversation aircall.io Architecture

40 The Power of Conversation aircall.io Architecture

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 The Power of Conversation aircall.io

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 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 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 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 The Power of Conversation aircall.io

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 The Power of Conversation aircall.io UI tests https://medium.com/@juliensalvi/ui-tests-with-jetpack-co mpose-and-appium-x-uiautomator-5d276fb655aa

50 The Power of Conversation aircall.io Demo time! See you in the Studio

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 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 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 The Power of Conversation aircall.io Merci ! Enjoy the Compose world! Julien Salvi - Android GDE | Android @ Aircall Mobilis In Mobile 🐘 @JulienSalvi