In this talk Martin and John will live code the development of Confetti, a fullstack conference app using a graphql-kotlin backend and KMM based mobile clients The talk will cover * development of the graphql-kotlin backend * use of Apollo library and it's Kotlin Multiplatform support allowing addition of GraphQL * queries and related logic in code shared between iOS and Android clients. * development of mobile clients that consume the shared KMM code (using Jetpack Compose on Android and SwiftUI on iOS)

1. @joreilly 🇮🇪
@martinbonnin 🇫🇷
KotlinConf’23
Amsterdam
Confetti: Building a
Kotlin Multiplatform
conference app in
40mins 🎊

2. @martinbonnin 🎊 @joreilly

3. @martinbonnin 🎊 @joreilly
Agenda
- Brief overview of Kotlin Multiplatform, Declarative UI and GraphQL
- Live coding session where we build out backend and iOS/Android
versions of the Confetti conference app that use these technologies

4. @martinbonnin 🎊 @joreilly
Kotlin Multiplatform
- Ability to run Kotlin code natively on a range of platforms
- Di
ff
ers from other approaches in that it supports optional code
sharing that allows incremental adoption
- Focussed primarily on sharing of non-UI code
- Allows full access to platform capabilities
- KMM currently in beta with plan to go stable this year.

5. @martinbonnin 🎊 @joreilly

6. @martinbonnin 🎊 @joreilly
Declarative UI (Compose/SwiftUI)
- Describe UI in terms of what it should be like in a particular state. Any change in
state will be re
fl
ected automatically in UI.
- Encourages use of MVVM/Unidirectional Data Flow
- Jetpack Compose
- announced at Google I/O in 2019
- stable release 2021
- SwiftUI
- announced at WWDC in 2019
- allows building of user interfaces across all Apple platforms (SwiftUI Multiplatform!)

7. @martinbonnin 🎊 @joreilly
GraphQL
- “Open source query language to describe and run your APIs”
- Type safe: your compiler/runtime ensure your
fi
elds are present at
runtime.
- No overfetching: you get the data you asked for and only this.
- Self documenting: introspection and tools means you always have
docs up to date.

8. @martinbonnin 🎊 @joreilly

9. @martinbonnin 🎊 @joreilly
GraphQL ❤ Kotlin
GraphQL Kotlin
- Takes your Kotlin code and turn it into GraphQL types and schema
- Spring Boot and Ktor support
Apollo Kotlin
- Takes your GraphQL queries and generate type safe Kotlin models
- In-memory and persistent cache
- Multiplaform

10. @martinbonnin 🎊 @joreilly

11. @martinbonnin 🎊 @joreilly

12. @martinbonnin 🎊 @joreilly
Compose
Repository
Kotlin Multiplatform Shared Code
Kotlin
Swift
SwiftUI
GraphQL Server
(Apollo)
ViewModel

13. @martinbonnin 🎊 @joreilly
Coding!

14. @martinbonnin 🎊 @joreilly

15. @martinbonnin 🎊 @joreilly
Wrap up!

16. @martinbonnin 🎊 @joreilly
Compose
Repository
Kotlin Multiplatform Shared Code
Kotlin
Swift
SwiftUI
GraphQL Server
(Apollo)
ViewModel

17. @martinbonnin 🎊 @joreilly
Sessions
Session Details
Speaker Details
Share
Search
Bookmarks
Dark Mode
Material 3
iOS
Wear OS
Compose Desktop
…
Confetti is on the App/Play store
Auto Persisted Queries
Google Cloud CDN
Settings sync
O
ffl
ine mode
Background refresh
Screenshot tests
a11y
…

18. @martinbonnin 🎊 @joreilly
One more thing platform
- Confetti on the web
- Using Wasm?
- Still lots to do!

19. Thank you,
and don’t forget
to vote
@joreilly
@martinbonnin
github.com/joreilly/Confetti
KotlinConf’23
Amsterdam

20. @martinbonnin 🎊 @joreilly
Resources
- KMM - https://kotlinlang.org/lp/mobile/
- Jetpack Compose - https://developer.android.com/jetpack/compose
- SwiftUI - https://developer.apple.com/xcode/swiftui/
- Confetti repo - https://github.com/joreilly/Confetti
- Apollo Kotlin Multiplatform - https://www.apollographql.com/docs/
kotlin/tutorial/00-introduction/
- GraphQL Kotlin - https://opensource.expediagroup.com/graphql-
kotlin/docs/
- Compose Web - https://compose-web.ui.pages.jetbrains.team/
- Kotlin wasm - https://kotl.in/wasm