In this talk Martin and John live code the development of Confetti, a fullstack conference app using a graphql-kotlin backend and KMM based mobile clients The talk 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. Confetti: building a Kotlin Multiplatform conference app in 40min 🎊
Martin Bonnin 🇫🇷
John O’Reilly 🇮🇪
AndroidMakers, April 2023

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 (server)
- Takes your Kotlin code and turns it into GraphQL types and schema
- Spring Boot and Ktor support
Apollo Kotlin (client)
- Takes your GraphQL queries and generate type safe Kotlin models
- In-memory and persistent caches
- 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
Android Auto 🏎
Auto Persisted Queries
Google Cloud CDN
Settings sync
O
ffl
ine mode
Background refresh
Screenshot tests
a11y
…

18. @martinbonnin 🎊 @joreilly
One more thing platform?
+

19. @martinbonnin 🎊 @joreilly
Thanks! 🎊
@joreilly
@oreillyj@mastodon.social
@martinbonnin@mastodon.social
@martinbonnin
github.com/joreilly/Confetti

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

21. @martinbonnin 🎊 @joreilly
Compose
Repository
Kotlin Multiplatform Shared Code
Kotlin
Swift
SwiftUI
GraphQL Server
Apollo
ViewModel
- schema.graphqls
- queries.graphql