Slide 1

Slide 1 text

Android to Everywhere: Jetpack Compose in a Multi-Platform World Yangon 2024 Su Myat Tun, Android GDE

Slide 2

Slide 2 text

What if one codebase can ran everywhere?

Slide 3

Slide 3 text

What is Compose?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Write less code, focusing on business logic and design. Preview reduce iteration time. It’s reactive programming, so automatically updates the UI when state changes Simplicity Faster UI rendering Build complex UIs effortlessly with a rich set of composable functions. You can easily style according to the design. Powerful UI customization 01 02 03 Reusable composables promote clean and modular architecture. Works alongside existing Views, letting you migrate gradually. Improved Maintainability Seamless Interoperability Material3 support for cutting-edge design.Animation APIs for creating smooth, engaging experiences. Modern Features 01 02 03 What is compose?

Slide 6

Slide 6 text

@Composable fun JetpackCompose() { Card { var expanded by remember { mutableStateOf(false) } Column(Modifier .clickable { expanded = !expanded } ) { Image( painter = painterResource(R.drawable.jetpack_compose) ) AnimatedVisibility(expanded) { Text( text = "Jetpack Compose", style = MaterialTheme.typography.bodyLarge ) } } } }

Slide 7

Slide 7 text

@Composable fun JetpackCompose() { Card { var expanded by remember { mutableStateOf(false) } Column(Modifier .clickable { expanded = !expanded } ) { Image( painter = painterResource(R.drawable.jetpack_compose) ) AnimatedVisibility(expanded) { Text( text = "Jetpack Compose", style = MaterialTheme.typography.bodyLarge ) } } } }

Slide 8

Slide 8 text

@Composable fun JetpackCompose() { Card { var expanded by remember { mutableStateOf(false) } Column(Modifier .clickable { expanded = !expanded } ) { Image( painter = painterResource(R.drawable.jetpack_compose) ) Compose state: describe how ui looks at a moment

Slide 9

Slide 9 text

@Composable fun JetpackCompose() { Card { var expanded by remember { mutableStateOf(false) } Column(Modifier .clickable { expanded = !expanded } ) { Image( painter = painterResource(R.drawable.jetpack_compose) ) AnimatedVisibility(expanded) { Text( text = "Jetpack Compose", style = MaterialTheme.typography.bodyLarge ) } } } }

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

42% Top 1k app use Jetpack Compose

Slide 16

Slide 16 text

Effortless Large Screen support? It's all possible with Jetpack Compose!

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Active large screen devices including Foldables, Tablets, Chromebooks 300+ million

Slide 19

Slide 19 text

Source: Counterpoint Research 100+ million Forecasted foldable shipments by 2027

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Compose Adaptive Compose offer new layouts and components that adapt seamlessly between small and large window sizes.

Slide 22

Slide 22 text

Adaptive Navigation UI

Slide 23

Slide 23 text

NavigationSuiteScaffold dynamically adjusts navigation UIs based on WindowSizeClass. 1) Navigation Bar: if the width or height is compact or if the device is in tabletop posture 2) Navigation Rail: for everything else 3) Or you can customize Navigation Drawer

Slide 24

Slide 24 text

NavigationSuiteScaffold( navigationSuiteItems = { Screens.entries.forEachIndexed { index, screens -> item(selected = index == selectedIndex, onClick = { selectedIndex = index }, label = { Text(text = screens.title) }) } } ){}

Slide 25

Slide 25 text

val currentWindowWidthSize = currentWindowAdaptiveInfo().windowSizeClass.windowWidthSizeClass NavigationSuiteScaffold( navigationSuiteItems = {...}, layoutType = if (currentWindowWidthSize == WindowWidthSizeClass.EXPANDED) NavigationSuiteType.NavigationDrawer else NavigationSuiteScaffoldDefaults .calculateFromAdaptiveInfo(currentWindowAdaptiveInfo()) ){}

Slide 26

Slide 26 text

ListDetailPanScaffold

Slide 27

Slide 27 text

Three pains * scaffold handles all calculation for allocating window space * On large screen, lists of items with detail view * On small screen, either main or supporting

Slide 28

Slide 28 text

NavigableListDetailPaneScaffold(navigator = navigtor, listPane = {MainPane(navToDetail = {item-> navigtor.navigateTo( pane = ListDetailPaneScaffoldRole.Detail, content = "$item" )})}, detailPane = { val content = navigtor.currentDestination?.content.toString() DetailPane()})},)

Slide 29

Slide 29 text

SupportingPaneScaffold

Slide 30

Slide 30 text

Compose in Multiplatform Single codebase for UI across platforms

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Kotlin Multiplatform 1. Open-Source by JetBrains 2. Support IOS, Android, macOS, Windows, Linux, and more. 3. Share business logic across them while retaining the native IOS Android Desktop Web

Slide 33

Slide 33 text

Jetpack Compose + Kotlin Multiplatform

Slide 34

Slide 34 text

Beta Alpha

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

LeverKotlin/Native ensures performance close to native for non-UI logic. Compose uses a declarative programming model, enabling you to build UIs faster and with less boilerplate compared to XML (Android) or UIKit (iOS). Kotlin First Declarative UI allows sharing UI and business logic between Android, iOS, and Desktop applications, reduces development time Shared Codebase Across 01 02 03 Ensures that apps maintain the native look and feel on each platform. UIKit for iOS, Skia for Desktop Provides the flexibility to mix Compose with platform-specific UI when necessary Native-like Experience Extensibility Built on Jetpack Compose, which has a mature and growing ecosystem of libraries, tools, and community support. Strong Ecosystem 04 05 06 Pros of Compose Multiplatform

Slide 37

Slide 37 text

While Jetpack Compose has strong support on Android, Compose Multiplatform for iOS and other platforms has fewer resources, libraries, and community contributions. Developers unfamiliar with Kotlin or Compose may face a steep learning curve. Limited resources Learning Curve Compose Multiplatform is still relatively new for iOS and doesn’t match the maturity of UIKit or SwiftUI. Immature Ecosystem 01 02 03 iOS developers may find the Compose Multiplatform tooling in IntelliJ or Android Studio less refined compared to Xcode's support. Performance might lag in very complex UIs or animations compared to fully optimized native solutions. Tooling Limitations Performance Concerns For highly platform-specific UIs (e.g., iOS's UINavigationController or specific Material Design components), Compose Multiplatform might not offer a complete abstraction. Platform-Specific Features 04 05 06 Cons of Compose Multiplatform

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

55+ repositories

Slide 40

Slide 40 text

Compose MultiPlatform in Action Let’s make our hands dirty ;

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Migration Journey 1) Check dependencies 2) Understand expect/actual 3) List items that only available on native

Slide 50

Slide 50 text

Migration Journey . 1) Check dependencies 2) Understand expect/actual 3) List things that are only available on Native

Slide 51

Slide 51 text

Migration Journey . 1) Check dependencies 2) Understand expect/actual 3) List things that are only available on Native

Slide 52

Slide 52 text

https://github.com/suhtun/BurmeseCrypto

Slide 53

Slide 53 text

Thank You Su Myat Tun she/her GDE Android