Confetti: building a Kotlin conference app in 40 min 🎊

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 covers:
- 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)

Transcript

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