SlideShare a Scribd company logo
1 of 68
Download to read offline
Kotlin Multiplatform &
Compose Multiplatform
Starter kit for pragmatics
Andrei Dotsenko
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
󰎴󰑆󰏃󰐮
��
��
✈
��
❤
��
⚠ DISCLAIMER ⚠
⚠ DISCLAIMER 2 ⚠
Table of contents
● Key concepts and terminology
● How does that work
● KMP & Compose - current state
● Where to start
● Building blocks
● Limitations & Challenges
● Resources
Key concepts and terminology
��
Key concepts and terminology
● Kotlin Multiplatform
● KMP (or KMM?!)
● Jetpack Compose
● Compose Multiplatform
��
How does that work
��
How does that work
Kotlin Multiplatform
How does that work
Kotlin Multiplatform
How does that work
Kotlin Multiplatform
How does that work
Kotlin Multiplatform
How does that work
Kotlin Multiplatform
How does that work
Kotlin Multiplatform for mobile targets
How does that work
⁉
How does that work
Jetpack Compose (Android)
Not a new kid on the block anymore
How does that work
Jetpack Compose (Android)
How does that work
Compose Multiplatform
How does that work
Compose Multiplatform
How does that work
Compose Multiplatform
How does that work
Compose Multiplatform
How does that work
Compose Multiplatform
How does that work
Compose Multiplatform
How does that work
expect-actual concept
How does that work
expect-actual concept
How does that work
expect-actual concept
How does that work
expect-actual concept
How does that work
expect-actual concept
KMP & Compose - current state
��
KMP & Compose - current state
��
Okay…
Where to start
��
Where to start
OR
+
+
Where to start
https://kmp.jetbrains.com/
https://github.com/Kotlin/kdoctor
Pre-configured project, that is
ready for writing shared code
Pre-configured build configurations
for both Android and iOS
Shared Kotlin code
Xcode project (with info.plist, UIkit/SwiftUI entry point)
Shared Kotlin code is added as .framework
Android-specific code (manifest, activity, etc.)
Ready for having fun
Beyond Hello World
��
Building blocks
��
Building blocks
��
Network client
DB / key-value storage
Navigation
Resources / localization
ViewModels
Native look & feel
Maps
DI
Network
��
https://github.com/terrakok/kmp-awesome
Network
��
https://github.com/terrakok/kmp-awesome
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)
Network client
DB / key-value storage
Navigation
Resources / localization
ViewModels
Native look & feel
Maps
DI
✅
��
Building blocks
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.
Building blocks
Network client
DB / key-value storage
Navigation
Resources / localization
ViewModels
Native look & feel
Maps
DI
✅
��
✅
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
Building blocks
Network client
DB / key-value storage
Navigation
Resources / localization
ViewModels
Native look & feel
Maps
DI
✅
��
✅
✅
✅
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
Building blocks
Network client
DB / key-value storage
Navigation
Resources / localization
ViewModels
Native look & feel
Maps
DI
✅
��
✅
✅
✅
✅
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
Building blocks
Network client
DB / key-value storage
Navigation
Resources / localization
ViewModels
Native look & feel
Maps
DI
✅
��
✅
✅
✅
✅ (almost)
✅
Native look & feel
��🏼
Compose Multiplatform release changelogs:
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).
Building blocks
Network client
DB / key-value storage
Navigation
Resources / localization
ViewModels
Native look & feel
Maps
DI
✅
��
✅
✅
✅
✅ (almost)
✅
��🏼
Maps
��
Wonderous Compose
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.
Building blocks
Network client
DB / key-value storage
Navigation
Resources / localization
ViewModels
Native look & feel
Maps
DI
✅
��
✅
✅
✅
✅ (almost)
✅
��🏼
��
��
Pro tip
Unofficial wizard. Creates the
project with preselected
dependencies
https://terrakok.github.io/Compose-Multiplatform-Wizard/
Limitations & Challenges
��
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
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
Thank you!
��
@dosssik
linkedin.com/in/andrei-dotsenko

More Related Content

Similar to Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics

201507_NeoHsu_Portfolio
201507_NeoHsu_Portfolio201507_NeoHsu_Portfolio
201507_NeoHsu_Portfolio
Neo Hsu
 
Programming for non tech entrepreneurs
Programming for non tech entrepreneursProgramming for non tech entrepreneurs
Programming for non tech entrepreneurs
Rodrigo Gil
 

Similar to Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics (20)

Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
 
Introduction to Modern DevOps Technologies
Introduction to  Modern DevOps TechnologiesIntroduction to  Modern DevOps Technologies
Introduction to Modern DevOps Technologies
 
Ballerina Serverless with Kubeless
Ballerina Serverless with KubelessBallerina Serverless with Kubeless
Ballerina Serverless with Kubeless
 
Ballerina Serverless with Kubeless
Ballerina Serverless with KubelessBallerina Serverless with Kubeless
Ballerina Serverless with Kubeless
 
201507_NeoHsu_Portfolio
201507_NeoHsu_Portfolio201507_NeoHsu_Portfolio
201507_NeoHsu_Portfolio
 
MongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDB
MongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDBMongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDB
MongoDB Days Silicon Valley: Winning the Dreamforce Hackathon with MongoDB
 
DevEx | there’s no place like k3s
DevEx | there’s no place like k3sDevEx | there’s no place like k3s
DevEx | there’s no place like k3s
 
Collaborative data science and how to build a data science toolchain around n...
Collaborative data science and how to build a data science toolchain around n...Collaborative data science and how to build a data science toolchain around n...
Collaborative data science and how to build a data science toolchain around n...
 
Introduction to Cloud Computing with Google Cloud
Introduction to Cloud Computing with Google CloudIntroduction to Cloud Computing with Google Cloud
Introduction to Cloud Computing with Google Cloud
 
PykQuery.js
PykQuery.jsPykQuery.js
PykQuery.js
 
Building an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stackBuilding an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stack
 
[20200720]cloud native develoment - Nelson Lin
[20200720]cloud native develoment - Nelson Lin[20200720]cloud native develoment - Nelson Lin
[20200720]cloud native develoment - Nelson Lin
 
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularNativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
 
Programming for non tech entrepreneurs
Programming for non tech entrepreneursProgramming for non tech entrepreneurs
Programming for non tech entrepreneurs
 
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud RunDesigning flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
 
Instant developer onboarding with self contained repositories
Instant developer onboarding with self contained repositoriesInstant developer onboarding with self contained repositories
Instant developer onboarding with self contained repositories
 
Cross Platform Mobile App Development
Cross Platform Mobile App DevelopmentCross Platform Mobile App Development
Cross Platform Mobile App Development
 
Odo improving the developer experience on OpenShift - hack & sangria
Odo   improving the developer experience on OpenShift - hack & sangriaOdo   improving the developer experience on OpenShift - hack & sangria
Odo improving the developer experience on OpenShift - hack & sangria
 
Anko - The Ultimate Ninja of Kotlin Libraries?
Anko - The Ultimate Ninja of Kotlin Libraries?Anko - The Ultimate Ninja of Kotlin Libraries?
Anko - The Ultimate Ninja of Kotlin Libraries?
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics