Lifecycles at Scale: with Multiplatform Dinorah Tovar Google Developer Expert Android @ddinorahtovar @ddinorahtovar @ddinorahtovar @ddinorahtovar

This talk has many many many Layers, so please excuse me if I jump from topics fast ✨🏃 @ddinorahtovar Many Many Maaaanyyy

Compose But I promise you this topics are related to one With a twist 🍋♻🐇 @ddinorahtovar Multiplatform

@ddinorahtovar A little bit of Before we start, this talk is needs ✨ context ✨

@ddinorahtovar

Compose Multiplatform First: Just a quick stop here 🛑✨ @ddinorahtovar

Compose Is like regular Android Compose but for 🍎🕸🖥 Multiplatform @ddinorahtovar @Composable fun Hello() { Text(“Hello") }

@ddinorahtovar As Kotlin Multiplatform Compose Multiplatform Is not a hard compromise

@ddinorahtovar Web Kotlin/WASM What it means for every platform WebAssembly DOM support Alpha iOS Kotlin Native Swift Framework Objective-C Framework Safari support WIP Desktop Kotlin/JVM Beta

Compose fuctions Second Has lifecycle ♻… well kinda @ddinorahtovar

Composition & Recomposition is important in Lifecycle First Interaction Composition Insert “A” Insert “B” Second Interaction Re-composition @ddinorahtovar

/** * A common LifecycleOwner * provides a lifecycle for * all interconnected * entities * * In Multiplatform all * composable share the same * lifecycle and can listen * changes **/ @Stable sealed class CompositionLocal constructor(defaultFactory: () -> T) { @Suppress("UNCHECKED_CAST") internal val defaultValueHolder = LazyValueHolder(defaultFactory) @Composable internal abstract fun provided(value: T): State @OptIn(InternalComposeApi::class) inline val current: T @ReadOnlyComposable @Composable get() = currentComposer.consume(this) } @ddinorahtovar

@Stable sealed class CompositionLocal constructor(defaultFactory: () -> T) { @Suppress("UNCHECKED_CAST") internal val defaultValueHolder = LazyValueHolder(defaultFactory) @Composable internal abstract fun provided(value: T): State @OptIn(InternalComposeApi::class) inline val current: T @ReadOnlyComposable @Composable get() = currentComposer.consume(this) } @ddinorahtovar /** * A common LifecycleOwner * provides a lifecycle for * all interconnected * entities * * In Multiplatform all * composable share the same * lifecycle and can listen * changes **/

@Stable sealed class CompositionLocal constructor(defaultFactory: () -> T) { @Suppress("UNCHECKED_CAST") internal val defaultValueHolder = LazyValueHolder(defaultFactory) @Composable internal abstract fun provided(value: T): State @OptIn(InternalComposeApi::class) inline val current: T @ReadOnlyComposable @Composable get() = currentComposer.consume(this) } @ddinorahtovar /** * A common LifecycleOwner * provides a lifecycle for * all interconnected * entities * * In Multiplatform all * composable share the same * lifecycle and can listen * changes **/

@Stable sealed class CompositionLocal constructor(defaultFactory: () -> T) { @Suppress("UNCHECKED_CAST") internal val defaultValueHolder = LazyValueHolder(defaultFactory) @Composable internal abstract fun provided(value: T): State @OptIn(InternalComposeApi::class) inline val current: T @ReadOnlyComposable @Composable get() = currentComposer.consume(this) } @ddinorahtovar /** * A common LifecycleOwner * provides a lifecycle for * all interconnected * entities * * In Multiplatform all * composable share the same * lifecycle and can listen * changes **/

CompositionLocal To CompositionLocal Key, Value @ddinorahtovar CompositionLocalProvider( LocalColorScheme provides rememberedColorScheme, LocalIndication provides rippleIndication, LocalRippleTheme provides MaterialRippleTheme, LocalShapes provides shapes, LocalTextSelectionColors provides selectionColors, LocalTypography provides typography, ) { ProvideTextStyle(value = typography.bodyLarge, content = content) }

A pair of To CompositionLocalProvider Key, Value @ddinorahtovar CompositionLocalProvider( LocalColorScheme provides rememberedColorScheme, LocalIndication provides rippleIndication, LocalRippleTheme provides MaterialRippleTheme, LocalShapes provides shapes, LocalTextSelectionColors provides selectionColors, LocalTypography provides typography, ) { ProvideTextStyle(value = typography.bodyLarge, content = content) } Key Value

To add to CompositionLocal Variables @ddinorahtovar @Composable @OptIn(InternalComposeApi::class) fun CompositionLocalProvider(vararg values: ProvidedValue<*>,content: @Composable () -> Unit) { currentComposer.startProviders(values) content() currentComposer.endProviders() }

CompositionLocalProvider Values for the three Binds @ddinorahtovar @Composable @OptIn(InternalComposeApi::class) fun CompositionLocalProvider(vararg values: ProvidedValue<*>,content: @Composable () -> Unit) { currentComposer.startProviders(values) content() currentComposer.endProviders() }

This classs values for the composition three Associates @ddinorahtovar @Stable abstract class ProvidableCompositionLocal internal constructor(defaultFactory: () -> T) : CompositionLocal (defaultFactory) { @Suppress("UNCHECKED_CAST") infix fun provides(value: T) = ProvidedValue(this, value, true) @Suppress("UNCHECKED_CAST") infix fun providesDefault(value: T) = ProvidedValue(this, value, false) }

@ddinorahtovar You can make your own theme or use the MaterialTheme Column LazyColumn Rows Text Root SomeTheme CompositionLocalProvider A clear example With a Theme for Compose

@Composable fun DesignTheme( colors: DesignColorPalette = lightColorPalette(), children: @Composable() () -> Unit ) { CompositionLocalProvider( LocalDlsColors provides colors, ) { MaterialTheme( colors = colors.materialColors ) { children() } } } object DesignTheme { val colors: DesignColorPalette @Composable @ReadOnlyComposable get() = LocalDlsColors.current } internal val LocalDlsColors = staticCompositionLocalOf { lightColorPalette() } /** * As we use * CompositionLocal * to create themes, and * make available the colors * we can do it for * Lifecycle **/ @ddinorahtovar

@ddinorahtovar If you wanna see more about Custom designs themes @rharte on #ChicagoRoboto

@ddinorahtovar If you wanna know more about Design Systems using Material Design You can see mine :)

LifecycleOwner is over CompositionalLocal “Hosted” @ddinorahtovar @Composable fun SomeComposableFunction () { val lifecycleOwner = LocalLifecycleOwner.current } val LocalLifecycleOwner = staticCompositionLocalOf { noLocalProvidedFor("LocalLifecycleOwner") }

@Stable sealed class CompositionLocal constructor(defaultFactory: () -> T) { @Suppress("UNCHECKED_CAST") internal val defaultValueHolder = LazyValueHolder(defaultFactory) @Composable internal abstract fun provided(value: T): State @OptIn(InternalComposeApi::class) inline val current: T @ReadOnlyComposable @Composable get() = currentComposer.consume(this) } @ddinorahtovar /** * A common LifecycleOwner * provides a lifecycle for * all interconnected * entities * * In Multiplatform all * composable share the same * lifecycle and can listen * changes **/

@ddinorahtovar @Composable fun SomeComposableFunction () { val lifecycleOwner = LocalLifecycleOwner.current } val LocalLifecycleOwner = staticCompositionLocalOf { noLocalProvidedFor("LocalLifecycleOwner") } LifecycleOwner is over CompositionalLocal “Hosted”

@ddinorahtovar @Composable fun SomeComposableFunction () { val lifecycleOwner = LocalLifecycleOwner.current lifecycleOwner.lifecycleScope } LifecycleOwner is over CompositionalLocal “Hosted”

@ddinorahtovar public interface LifecycleOwner { public val lifecycle: Lifecycle } public val LifecycleOwner.lifecycleScope: LifecycleCoroutineScope get() = lifecycle.coroutineScope LifecycleOwner holds On Android and a little scope Lifecycle

Lifecycle Third Is 🦆 complex @ddinorahtovar

Lifecycle on Android @ddinorahtovar General Application Activity Fragment Composables Classes*

Classes can have Hold on cowboy 🤠 A lifecyle… Well no, not exactly, but first a little bit of ✨ context ✨ @ddinorahtovar

@ddinorahtovar Lifecycle dependes🥂 On LifecycleOwner and Lifecycle Lifecycle LifecycleOwner States Events OnLifecycleEvent ViewTreeLifecycleOwner ProcessLifecycleOwner

@ddinorahtovar Lifecycle dependes🥂 States are stages in the graph Lifecycle Operation For States DESTROYED, INITIALIZED, CREATED, RESUMED, STARTED Creates, initialize and destroy all the stages over the lifecycle

@ddinorahtovar Lifecycle dependes🥂 Events are edges between the Stages Lifecycle Operation For Events ON_CREATE, ON_STARTED, ON_RESUME, ON_PAUSE, ON_STOP, ON_DESTROY, ON_ANY Creates initialize and destroy all the stages over the lifecycle

@ddinorahtovar Created Started Events and States Resumed Paused Stoped Destroyed onCreate() onStart() onResume() onPause() onStop() onDestroy()

Events can be On regular clasess Used @ddinorahtovar class AppOwner : DefaultLifecycleObserver { override fun onStart(owner: LifecycleOwner) { super.onStart(owner) // App was resumed or started } override fun onPause(owner: LifecycleOwner) { super.onPause(owner) // App has been moved to background // includes switch to other app // includes just moving to task manager } }

Once this class is created you can In ApplicationClass Attach @ddinorahtovar ProcessLifecycleOwner.get() .lifecycle.addObserver(AppOwner())

LifecycleOwner Lifecycle depends on MORE things such as the classes A lifecyle… kinda, but first more ✨ context ✨ @ddinorahtovar

@ddinorahtovar Owners Fragment 
 Initialize lifecycle Set View - to ViewThreeLifecycleOwner FragmentView LifecycleOwner 
 Init of LifecycleRegistry Repo rt lifecycle of view Set View - to ViewThreeViewModelStoreOw Set View - to ViewThreeSavedStateRegistry Repo rt accessors of SavedStateRegistryOwner Repo rt s accessors of ViewModelStoreOwner

Left Aligned Title @ddinorahtovar /** * Handle observers - addObserver() * Used on Fragments and Activities * Handle and dispatch events around the process of the activity and fragment **/ LifecycleRegistry

Lifecycle Four Are everywhere ✨🙆 @ddinorahtovar

iOS and Web I lie to you… cause this talk also includes Cause they have lifecycles too ✨🎉👩💻👩🎨🏹 @ddinorahtovar

@ddinorahtovar iOS Lifecycle

@ddinorahtovar iOS Lifecycle

@ddinorahtovar iOS Lifecycle OnStart OnResume OnStop

@ddinorahtovar Lifecycle Events on iOS 🥂 iOS Lifecycles Lifecycle event For viewDidDisappear - viewcontroller ON_STOP STARTED → CREATED viewWillAppear - viewcontroller ON_START CREATED → STARTED willResignActive - app ON_PAUSE RESUMED → STARTED didBecomeActive - app ON_RESUME STARTED → RESUMED didEnterBackground - app ON_STOP STARTED → CREATED willEnterForeground - app ON_START CREATED → STARTED

Compose Finally, at the end It shows how finally we could generalize lifecycle managed on both Android, Web & iOS 🍋♻🐇 @ddinorahtovar Multiplatform

Lifecycles at Scale: with Multiplatform Dinorah Tovar Google Developer Expert Android @ddinorahtovar @ddinorahtovar @ddinorahtovar @ddinorahtovar