Accelerating native mobile development at Talkdesk with KMM

How to deliver new apps fast?

This is probably one of the most heard questions in mobile development. There are no magical recipes, but luckily nowadays in the mobile world we have tools that help achieve this goal without compromising a fully native experience.

This talk will be a brief overview of our journey in the KMM world, considering the following topics:
- How the development of shared code approach for mobile apps fits in our business case;
- What we were able to share between the two platforms;
- How a single source of ‘truth’ can give more reliability, allied with a strong test coverage over the domain aspect of the App (avoiding divergences in the platforms);
- Some of the challenges we had during this journey, including the platform specific UI and UX (Compose, SwiftUI) and concurrency model.

droidCon Lisbon 2022
https://www.lisbon.droidcon.com/session/accelerating-native-mobile-development-at-talkdesk-with-kmm

Transcript

1. The information contained in this document is property of Talkdesk and can only be used by the intended recipients. The reproduction or communication of information in this document without Talkdesk approval is forbidden. Filipe Baptista @filipebatista APRIL 2022 Accelerating native mobile development at Talkdesk with KMM
2. The information contained in this document is property of Talkdesk and can only be used by the intended recipients. The reproduction or communication of information in this document without Talkdesk approval is forbidden. How to deliver new Mobile Apps faster? Why use KMM?
3. TALKDESK PROPRIETARY & CONFIDENTIAL 3 How to deliver new Mobile Apps faster?
4. TALKDESK PROPRIETARY & CONFIDENTIAL 4 How to deliver new Mobile Apps faster?
5. TALKDESK PROPRIETARY & CONFIDENTIAL Why use KMM? • A new request came to build a new mobile app in a short period of time 5
6. TALKDESK PROPRIETARY & CONFIDENTIAL Why use KMM? • A new request came to build a new mobile app in a short period of time • The application should be available to Android and iOS 6
7. TALKDESK PROPRIETARY & CONFIDENTIAL Why use KMM? • A new request came to build a new mobile app in a short period of time • The application should be available to Android and iOS • No BFF (Backend For Frontend) 7
8. TALKDESK PROPRIETARY & CONFIDENTIAL Why use KMM? • A new request came to build a new mobile app in a short period of time • The application should be available to Android and iOS • No BFF (Backend For Frontend) • Short amount of workforce 8
9. TALKDESK PROPRIETARY & CONFIDENTIAL Why use KMM? • A new request came to build a new mobile app in a short period of time • The application should be available to Android and iOS • No BFF (Backend For Frontend) • Short amount of workforce 9
10. The information contained in this document is property of Talkdesk and can only be used by the intended recipients. The reproduction or communication of information in this document without Talkdesk approval is forbidden. What does a new App need?
11. TALKDESK PROPRIETARY & CONFIDENTIAL What does a new app need? Feature Flags Reporting mechanism Authorized Requests Authentication Each new app needs to authenticate using a OAuth2 system Each request must be authorized by an authenticated user who has access to that data Analytics events, logging and crash reporting also a vital to give us feedback of what's happening A mechanism that allows you to choose between different code paths in the system at runtime 11 All the product features +
12. TALKDESK PROPRIETARY & CONFIDENTIAL Comparison of options for the groundwork 12 Write everything from scratch Cannot be reused by different projects (lots of copy+pastes) ✗ Duplicate code demands maintenance and evolution "same" code in N different projects ✗ iOS App Android App
13. TALKDESK PROPRIETARY & CONFIDENTIAL Comparison of options for the groundwork 13 Write native libs for Android and iOS Libs can be used by different mobile projects ✓ Duplicate code demands maintenance and evolution of 2 different projects ✗ Android App Android Library iOS App iOS Library
14. TALKDESK PROPRIETARY & CONFIDENTIAL Comparison of options for the groundwork 14 Shared code library for Android and iOS in KMM Libs can be used by different mobile projects ✓ Extremely low amount of custom implementations. Maintenance and evolution of one single codebase ✓ Multiplatform Library Android App iOS App
15. The information contained in this document is property of Talkdesk and can only be used by the intended recipients. The reproduction or communication of information in this document without Talkdesk approval is forbidden. Shared Code
16. TALKDESK PROPRIETARY & CONFIDENTIAL Shared code Common Android iOS 16
17. TALKDESK PROPRIETARY & CONFIDENTIAL Shared code Common Android iOS 17 • One codebase for Android & iOS • Ready to use in new projects • Developers can jump to feature implementation
18. TALKDESK PROPRIETARY & CONFIDENTIAL App anatomy 18 App Domain (unique to this App) Product features Groundwork (common to any Talkdesk app) Auth, Logging, Feature Flags, Analytics, … UI (Jetpack Compose), Platform specific implementations UI (SwiftUI), Platform specific implementations AAR Library XCFramework Library
19. TALKDESK PROPRIETARY & CONFIDENTIAL App anatomy 19 Host App Schedule Presentation core Talkdesk UI Schedule Core Talkdesk Core What is inside? Base Module with common building blocks: - Authorization; - Feature Flag system; - Logging; - Crash Reporting; - Analytics tracker; - Default HTTPClient for authorized requests - Generic Error handling
20. TALKDESK PROPRIETARY & CONFIDENTIAL 20 ./ Common expect class CorePreferencesPersistence : PreferencesPersistence { override fun setString(key: String, value: String) } ./ Android actual class CorePreferencesPersistence(...) : PreferencesPersistence { actual override fun setString(key: String, value: String) { sharedPreferences .edit() .putString(key, value) .apply() } } ./ ios actual class CorePreferencesPersistence(...) : PreferencesPersistence { actual override fun setString(key: String, value: String) { nsUserDefault.setValue(value, forKey = key) } }
21. TALKDESK PROPRIETARY & CONFIDENTIAL App anatomy 21 Host App Schedule Presentation core Talkdesk UI Schedule Core Talkdesk Core What is inside? Business logic related to the Schedule domain: - User Information; - Schedules; - Access validation;
22. TALKDESK PROPRIETARY & CONFIDENTIAL 22 ./ Common class CoreScheduleUserScheduleManager(...) : UserScheduleManager(...) { fun getUserSchedule(startDate: LocalDate, endDate: LocalDate) { (...) } }
23. TALKDESK PROPRIETARY & CONFIDENTIAL App anatomy 23 Host App Schedule Presentation core Talkdesk UI Schedule Core Talkdesk Core What is inside? Presentation layer for the Schedules app: - Presenters; - Formatters; - View/UI models.
24. TALKDESK PROPRIETARY & CONFIDENTIAL 24 ./ Common class CoreDailySchedulePresenter(...) { fun loadSchedule(dayModel: DayModel){ (...) } }
25. TALKDESK PROPRIETARY & CONFIDENTIAL App anatomy 25 Host App Schedule Presentation core Talkdesk UI Schedule Core Talkdesk Core What is inside? UI building blocks and app themes for Schedules
26. TALKDESK PROPRIETARY & CONFIDENTIAL 26 ./ Common UI class ThemeLightColors : ThemeColors<SystemColor> { override val onPrimary = MainColors.white override val primaryButton: ButtonTheme by lazy { ButtonTheme( foreground = ControlState(normal = onPrimary, disabled = MainColors.white), background = ControlState( normal = MainColors.dark, pressed = primaryVariant, disabled = MainColors.dark300 ), fontSize = 15 ) } }
27. TALKDESK PROPRIETARY & CONFIDENTIAL 27 ./ Android App @Composable fun DefaultButton(...) { TextButton( colors = ButtonDefaults.buttonColors( disabledBackgroundColor = ScheduleTheme.colors.primaryButton.background.disabled.color, backgroundColor = ScheduleTheme.colors.primaryButton.background.normal.color, disabledContentColor = ScheduleTheme.colors.primaryButton.foreground.disabled.color ) ){ (...) } }
28. TALKDESK PROPRIETARY & CONFIDENTIAL App anatomy 28 Host App Schedule Presentation core Talkdesk UI Schedule Core Talkdesk Core What is inside? Host app integrates the module schedule presentation core and Talkdesk UI
29. TALKDESK PROPRIETARY & CONFIDENTIAL 29
30. TALKDESK PROPRIETARY & CONFIDENTIAL Challenges 30 Setup of the testing environment • Initial effort checking what was the best approach for test doubles in KMM Learning curve • For iOS developers, the learning curve is a bit more steep Concurrency Uncaught Kotlin exception: kotlin.native.concurrent.InvalidMutabilityException: mutation attempt of frozen com.Stuff@1adc036
31. TALKDESK PROPRIETARY & CONFIDENTIAL 31 “The hardest single part of building a software system is deciding precisely what to build.” — FRED BROOKS
32. TALKDESK PROPRIETARY & CONFIDENTIAL Thank you! 32 Filipe Baptista @filipebatista