Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics

Transcript

1. Kotlin Multiplatform & Compose Multiplatform Starter kit for pragmatics Andrei Dotsenko
2. Android fan Work with Android for the last 10 years Geek and digger Like to play around with new technologies Traveler Passionate about discovering new places About me Love tech communities Has been part of several conferences and meetups. GDG organizer Family guy Most of my free time belongs to 󰙐🐶󰘲 Lived in different cultures Has been living in 󰎴󰑆󰏃󰐮 ✈ ❤
3. ⚠ DISCLAIMER ⚠
4. ⚠ DISCLAIMER 2 ⚠
5. Table of contents • Key concepts and terminology • How does that work • KMP & Compose - current state • Where to start • Building blocks • Limitations & Challenges • Resources
6. Key concepts and terminology
7. Key concepts and terminology • Kotlin Multiplatform • KMP (or KMM?!) • Jetpack Compose • Compose Multiplatform
8. How does that work
9. How does that work Kotlin Multiplatform
10. How does that work Kotlin Multiplatform
11. How does that work Kotlin Multiplatform
12. How does that work Kotlin Multiplatform
13. How does that work Kotlin Multiplatform
14. How does that work Kotlin Multiplatform for mobile targets
15. How does that work ⁉
16. How does that work Jetpack Compose (Android)
17. Not a new kid on the block anymore
18. How does that work Jetpack Compose (Android)
19. How does that work Compose Multiplatform
20. How does that work Compose Multiplatform
21. How does that work Compose Multiplatform
22. How does that work Compose Multiplatform
23. How does that work Compose Multiplatform
24. How does that work Compose Multiplatform
25. How does that work expect-actual concept
26. How does that work expect-actual concept
27. How does that work expect-actual concept
28. How does that work expect-actual concept
29. How does that work expect-actual concept
30. KMP & Compose - current state
31. KMP & Compose - current state
32. Okay…
33. Where to start
34. Where to start OR + +
35. Where to start https://kmp.jetbrains.com/ https://github.com/Kotlin/kdoctor
37. Pre-configured project, that is ready for writing shared code Pre-configured build configurations for both Android and iOS
38. Shared Kotlin code
39. Xcode project (with info.plist, UIkit/SwiftUI entry point) Shared Kotlin code is added as .framework
40. Android-specific code (manifest, activity, etc.)
42. Ready for having fun
43. Beyond Hello World
44. Building blocks
45. Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI
46. Network https://github.com/terrakok/kmp-awesome
47. Network https://github.com/terrakok/kmp-awesome
48. Network • Ktor - mature network client by JetBrains. Feature-rich (HTTP requests, Bearer authentication, web sockets, etc.) • Kotlinx.serialization - multi-format (JSON, Protobuf and many more) reflectionless serialization • Ktorfit - Ktor-based REST API client (syntax mirrors Retrofit)
49. Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ Building blocks
50. DB / key-value storage • SQLDelight - powerful SQL DB, made by Block (ex. Square) • Realm - NoSQL database • Multiplatform Settings - key-value data storage, supports KeyChain. Wrapper for SharedPreferences and NSUserDefaults.
51. Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅
52. Navigation & ViewModels • Compose Multiplatform Navigation - official solution from Jetbrains. Familiar APIs (mirrors Jetpack Compose Navigation), but experimental and has limitations (no deep links support, limited back handler) • Compose Multiplatform ViewModel - official solution from Jetbrains. Familiar APIs (mirrors Android ViewModel), but experimental and has limitations (additional setup required for iOS and web targets) • Decompose - library for breaking down your code into lifecycle-aware business logic components (aka BLoC), with routing functionality. • PreCompose - navigation, ViewModel, inspired by Jetpack Lifecycle, ViewModel, LiveData and Navigation, provides similar (or even the same) components
53. Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅ ✅ ✅
54. Dependency Injection • Koin - lightweight dependency injection framework. Koin is a DSL, a light container and a pragmatic API • Kodein - very simple and yet very useful dependency retrieval container
55. Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅ ✅ ✅ ✅
56. Resources / localization • Compose Multiplatform Resources - official solution from Jetbrains. Experimental, has several limitations (big raw files, multi module). Supports language, density and theme qualifiers. Custom fonts too. • MOKO Resources - system resources manager that provides access to the resources on iOS & Android with the support of the default system localization
57. Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅ ✅ ✅ ✅ (almost) ✅
58. Native look & feel 🏼 Compose Multiplatform release changelogs:
59. Native look & feel 🏼 Compose Cupertino - provides various UI components for making native-looking iOS applications, including: • cupertino - Compose Multiplatform implementation of iOS-like Cupertino theme and widgets • cupertino-native - UIKit native wrappers for Cupertino Widgets. Allows to seamlessly use some UIKit widgets for iOS • cupertino-adaptive - adaptive theme and wrappers for Cupertino and Material3 widgets. • cupertino-icons-extended - more than 800 most used monochrome Apple SF Symbols as Compose ImageVectors • cupertino-decompose - iOS-like swipe-back animation for the 'predictive back' navigation feature (native-feeling or truly native page transitions and swipe gestures).
60. Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅ ✅ ✅ ✅ (almost) ✅ 🏼
61. Maps Wonderous Compose
62. Maps https://github.com/ShreyashKore/wonderous_compose Wonderous Compose - is a port of Wonderous (Flutter) in Compose Multiplatform. Map View demonstrates how KMP and Compose's interoperability layer can be used to embed native UIs in Compose. • For Android - Google Map compose library is used. • For IOS - MKMapView is used. • For web - Wasm Html interop library is used to draw DOM elements on canvas. • For desktop - uses OpenStreetMap data to draw map tiles on Compose Canvas.
63. Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅ ✅ ✅ ✅ (almost) ✅ 🏼
64. Pro tip Unofficial wizard. Creates the project with preselected dependencies https://terrakok.github.io/Compose-Multiplatform-Wizard/
65. Limitations & Challenges
66. Limitations & Challenges • Platform-specific APIs (e.g. Share Extension on iOS, in-app purchases, etc.) No magic here 󰤇 • Compose Multiplatform iOS performance != native iOS performance • Configuring build scripts and managing dependencies is an adventure • Mac is required for building iOS or MacOS targets • Wouldn’t recommend for beginners with no Android or iOS experience • Under active development • Best practices have not yet been settled • (sometimes) It’s hard to convince iOS devs to try it out
67. Resources • https://www.jetbrains.com/help/kotlin-multiplatform-dev/ • https://github.com/Kotlin/kdoctor • https://github.com/ShreyashKore/wonderous_compose • https://github.com/terrakok/kmp-awesome • https://github.com/touchlab • https://terrakok.github.io/Compose-Multiplatform-Wizard/ • https://youtu.be/FWVi4aV36d8?si=AfMmlVhkojU7j5j6 • https://youtu.be/EKFdYgjCNOs • https://medium.com/@uwaisalqadri/kotlin-multiplatform-mobile-concept-of-expect- actual-f967d2e948ce • https://t.me/kotlinmpp
68. Thank you! @dosssik linkedin.com/in/andrei-dotsenko