SlideShare a Scribd company logo
Jetpack Compose
A lightning tour
GDG Auckland - May 2019
Disclaimer
• I’m not an expert on any of this :)

• This is the result of building the sample, exploring source
code and some reading

• Flutter and React devs - feel free to speak up

• Compose is pre-alpha and not ready for production
What is it?
• A “…modern, reactive style UI toolkit for Android, which takes advantage
of Kotlin and integrates seamlessly with the platform and all of your
existing code.”

• Declarative - “Simply describe your UI as a set of composable functions,
and the framework handles UI optimizations under the hood and
automatic updates to the view hierarchy.”

• Inspired by/similar to Flutter, React, Litho

• Way to allow the Android UI Framework to evolve, unbundled from
platform releases

• Create smaller, reusable UI components by composing lower-level UI
components, e.g.:
Composable UI
components
/**
* The Bills card within the Rally Overview screen.
*/
@Composable
fun RallyBillsCard() {
Card(color = cardInternalColor) {
Column {
Padding(padding = 12.dp) {
Column {
Text(text = "Bills", style = +themeTextStyle { subtitle2 })
Text(text = "$1,810.00", style = +themeTextStyle { h1 })
}
}
}
}
}
Counter app
class CounterActivity : Activity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
CraneWrapper {
CounterApp()
}
}
}
@Composable
fun CounterApp() {
val counter = +state { 0 }
MaterialTheme {
Button(onClick = { counter.value++ }) {
Text(text = "Counter = ${counter.value}")
}
}
}
}
Q: Wtf is going on here:

val counter = +state { 0 }
@Composable
fun CounterApp() {
val counter = +state { 0 }
MaterialTheme {
Button(onClick = { counter.value++ }) {
Text(text = "Counter = ${counter.value}")
}
}
}
Q: Wtf is going on here:

val counter = +state { 0 }
@Composable
fun CounterApp() {
val result: Effect<State<Int>> = state { 0 }
val counter: State<Int> = +result
MaterialTheme {
Button(onClick = { counter.value++ }) {
Text(text = "Counter = ${counter.value}")
}
}
}
Q: Are components just implemented
with Fragments/Views?
• No*, widgets are just functions that ultimately make
canvas draw calls.
@Composable
fun ColoredRect(brush: Brush, width: Dp? = null, height: Dp? = null) {
Container(width = width, height = height, expanded = true) {
DrawFillRect(brush = brush)
}
}
@Composable
private fun DrawFillRect(brush: Brush) {
Draw { canvas, parentSize ->
val paint = Paint()
brush.applyBrush(paint)
canvas.drawRect(parentSize.toRect(), paint)
}
}
Tangent: KTX tags (?!)
@Composable
fun Draw(
children: @Composable() () -> Unit = {},
@Children(composable = false)
onPaint: DrawScope.(canvas: Canvas, parentSize: PxSize) -> Unit
) {
// Hide the internals of DrawNode
<DrawNode onPaint={ canvas, parentSize ->
DrawScope(this).onPaint(canvas, parentSize)
}>
children()
</DrawNode>
}
Tangent: KTX tags (?!)
Tangent: KTX tags (?!)
@Composable
fun RallyApp() {
val counter = +state { 0 }
RallyTheme {
Scaffold(appBar = { RallyAppBar() }) {
Padding(padding = 16.dp) {
Button(onClick = { counter.value++ }) {
Text(text = "Counter = ${counter.value}",
style = +themeTextStyle { h3 })
}
}
}
}
}
Tangent: KTX tags (?!)
@Composable
fun RallyApp() {
val counter = +state { 0 }
<RallyTheme>
<Scaffold appBar={ <RallyAppBar /> }>
<Padding padding=16.dp>
<Button onClick={ counter.value++ }>
<Text text="Counter = ${counter.value}"
style=+themeTextStyle { h3 } />
</Button>
</Padding>
</Scaffold>
</RallyTheme>
}
Automatic XML -> KTX
conversion
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello world!"/>
</LinearLayout>
Automatic XML -> KTX
conversion
Automatic XML -> KTX
conversion (kinda…)
Q: Are components just implemented
with Fragments/Views?
• No*, widgets are just functions that ultimately make
canvas draw calls.

• *In practise, you need at least one special View:
AndroidCraneView
• Typically you won’t create this directly, but via
CraneWrapper, e.g.:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
CraneWrapper {
RallyApp()
}
}
}
Q: How do I check it out?
• Short answer - follow this guide: https://medium.com/
q42-engineering/try-jetpack-compose-today-
a12bda50aed2
Q: How do I check it out?
Longer answer:

• Get a Repo client (Google’s VCS)

• Check out the androidx branch of AOSP (~3GB)

• Run a script to DL/build a custom unstable version of
Android Studio (30min+)

• Play with the sample projects
Further Reading/Watching
• Diving into Jetpack Compose - Thijs Suijten

https://medium.com/q42-engineering/android-jetpack-
compose-895b7fd04bf4

• Android Jetpack Compose Review - Karumi. Mentions some
areas for improvement

https://blog.karumi.com/android-jetpack-compose-review/

• Android developers page

https://developer.android.com/jetpack/compose

• Declarative UI Patterns (Google I/O’19)

https://youtu.be/VsStyq4Lzxo
Thank you
Questions, opinions, further thoughts?
Matt Clarke

Twitter: @kiwiandroiddev

More Related Content

What's hot

Jetpack Compose beginner.pdf
Jetpack Compose beginner.pdfJetpack Compose beginner.pdf
Jetpack Compose beginner.pdfAayushmaAgrawal
 
Kotlin Jetpack Tutorial
Kotlin Jetpack TutorialKotlin Jetpack Tutorial
Kotlin Jetpack TutorialSimplilearn
 
Jetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UIJetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UIGilang Ramadhan
 
Introduction To Angular's reactive forms
Introduction To Angular's reactive formsIntroduction To Angular's reactive forms
Introduction To Angular's reactive formsNir Kaufman
 
Jetpack Compose a nova forma de implementar UI no Android
Jetpack Compose a nova forma de implementar UI no AndroidJetpack Compose a nova forma de implementar UI no Android
Jetpack Compose a nova forma de implementar UI no AndroidNelson Glauber Leal
 
Kotlin Coroutines. Flow is coming
Kotlin Coroutines. Flow is comingKotlin Coroutines. Flow is coming
Kotlin Coroutines. Flow is comingKirill Rozov
 
Threading Made Easy! A Busy Developer’s Guide to Kotlin Coroutines
Threading Made Easy! A Busy Developer’s Guide to Kotlin CoroutinesThreading Made Easy! A Busy Developer’s Guide to Kotlin Coroutines
Threading Made Easy! A Busy Developer’s Guide to Kotlin CoroutinesLauren Yew
 
Kotlin Basics & Introduction to Jetpack Compose.pptx
Kotlin Basics & Introduction to Jetpack Compose.pptxKotlin Basics & Introduction to Jetpack Compose.pptx
Kotlin Basics & Introduction to Jetpack Compose.pptxtakshilkunadia
 
Introduction to Coroutines @ KotlinConf 2017
Introduction to Coroutines @ KotlinConf 2017Introduction to Coroutines @ KotlinConf 2017
Introduction to Coroutines @ KotlinConf 2017Roman Elizarov
 
Deep dive into Coroutines on JVM @ KotlinConf 2017
Deep dive into Coroutines on JVM @ KotlinConf 2017Deep dive into Coroutines on JVM @ KotlinConf 2017
Deep dive into Coroutines on JVM @ KotlinConf 2017Roman Elizarov
 
Compose Camp - Jetpack Compose for Android Developers Introduction Session De...
Compose Camp - Jetpack Compose for Android Developers Introduction Session De...Compose Camp - Jetpack Compose for Android Developers Introduction Session De...
Compose Camp - Jetpack Compose for Android Developers Introduction Session De...JassGroup TICS
 
Introduction to kotlin coroutines
Introduction to kotlin coroutinesIntroduction to kotlin coroutines
Introduction to kotlin coroutinesNAVER Engineering
 
Introduction to Koltin for Android Part I
Introduction to Koltin for Android Part I Introduction to Koltin for Android Part I
Introduction to Koltin for Android Part I Atif AbbAsi
 
RxJS + Redux + React = Amazing
RxJS + Redux + React = AmazingRxJS + Redux + React = Amazing
RxJS + Redux + React = AmazingJay Phelps
 
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOMReact.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOMJimit Shah
 
React state
React  stateReact  state
React stateDucat
 
RxJS & Angular Reactive Forms @ Codemotion 2019
RxJS & Angular Reactive Forms @ Codemotion 2019RxJS & Angular Reactive Forms @ Codemotion 2019
RxJS & Angular Reactive Forms @ Codemotion 2019Fabio Biondi
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 formsEyal Vardi
 

What's hot (20)

Jetpack Compose beginner.pdf
Jetpack Compose beginner.pdfJetpack Compose beginner.pdf
Jetpack Compose beginner.pdf
 
Kotlin Jetpack Tutorial
Kotlin Jetpack TutorialKotlin Jetpack Tutorial
Kotlin Jetpack Tutorial
 
Jetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UIJetpack Compose - Android’s modern toolkit for building native UI
Jetpack Compose - Android’s modern toolkit for building native UI
 
Introduction To Angular's reactive forms
Introduction To Angular's reactive formsIntroduction To Angular's reactive forms
Introduction To Angular's reactive forms
 
Jetpack Compose a nova forma de implementar UI no Android
Jetpack Compose a nova forma de implementar UI no AndroidJetpack Compose a nova forma de implementar UI no Android
Jetpack Compose a nova forma de implementar UI no Android
 
Kotlin Coroutines. Flow is coming
Kotlin Coroutines. Flow is comingKotlin Coroutines. Flow is coming
Kotlin Coroutines. Flow is coming
 
Threading Made Easy! A Busy Developer’s Guide to Kotlin Coroutines
Threading Made Easy! A Busy Developer’s Guide to Kotlin CoroutinesThreading Made Easy! A Busy Developer’s Guide to Kotlin Coroutines
Threading Made Easy! A Busy Developer’s Guide to Kotlin Coroutines
 
Kotlin Basics & Introduction to Jetpack Compose.pptx
Kotlin Basics & Introduction to Jetpack Compose.pptxKotlin Basics & Introduction to Jetpack Compose.pptx
Kotlin Basics & Introduction to Jetpack Compose.pptx
 
Angular
AngularAngular
Angular
 
Introduction to Coroutines @ KotlinConf 2017
Introduction to Coroutines @ KotlinConf 2017Introduction to Coroutines @ KotlinConf 2017
Introduction to Coroutines @ KotlinConf 2017
 
Deep dive into Coroutines on JVM @ KotlinConf 2017
Deep dive into Coroutines on JVM @ KotlinConf 2017Deep dive into Coroutines on JVM @ KotlinConf 2017
Deep dive into Coroutines on JVM @ KotlinConf 2017
 
Compose Camp - Jetpack Compose for Android Developers Introduction Session De...
Compose Camp - Jetpack Compose for Android Developers Introduction Session De...Compose Camp - Jetpack Compose for Android Developers Introduction Session De...
Compose Camp - Jetpack Compose for Android Developers Introduction Session De...
 
Introduction to kotlin coroutines
Introduction to kotlin coroutinesIntroduction to kotlin coroutines
Introduction to kotlin coroutines
 
Introduction to Koltin for Android Part I
Introduction to Koltin for Android Part I Introduction to Koltin for Android Part I
Introduction to Koltin for Android Part I
 
Retrofit
RetrofitRetrofit
Retrofit
 
RxJS + Redux + React = Amazing
RxJS + Redux + React = AmazingRxJS + Redux + React = Amazing
RxJS + Redux + React = Amazing
 
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOMReact.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
 
React state
React  stateReact  state
React state
 
RxJS & Angular Reactive Forms @ Codemotion 2019
RxJS & Angular Reactive Forms @ Codemotion 2019RxJS & Angular Reactive Forms @ Codemotion 2019
RxJS & Angular Reactive Forms @ Codemotion 2019
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
 

Similar to Jetpack Compose - A Lightning Tour

Scripting languages
Scripting languagesScripting languages
Scripting languagesteach4uin
 
Scala+swing
Scala+swingScala+swing
Scala+swingperneto
 
Reactive UI in android - Gil Goldzweig Goldbaum, 10bis
Reactive UI in android - Gil Goldzweig Goldbaum, 10bisReactive UI in android - Gil Goldzweig Goldbaum, 10bis
Reactive UI in android - Gil Goldzweig Goldbaum, 10bisDroidConTLV
 
How to Leverage APIs for SEO #TTTLive2019
How to Leverage APIs for SEO #TTTLive2019How to Leverage APIs for SEO #TTTLive2019
How to Leverage APIs for SEO #TTTLive2019Paul Shapiro
 
eMan Dev Meetup: Kotlin For Android (part 03/03) 18.5.2017
eMan Dev Meetup: Kotlin For Android (part 03/03) 18.5.2017eMan Dev Meetup: Kotlin For Android (part 03/03) 18.5.2017
eMan Dev Meetup: Kotlin For Android (part 03/03) 18.5.2017eMan s.r.o.
 
bbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docx
bbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docxbbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docx
bbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docxikirkton
 
Advisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptAdvisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptdominion
 
Kotlin Mullets
Kotlin MulletsKotlin Mullets
Kotlin MulletsJames Ward
 
Java Applet and Graphics
Java Applet and GraphicsJava Applet and Graphics
Java Applet and GraphicsOXUS 20
 
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin XuSenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin XuSencha
 
Introduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RIntroduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RPaul Richards
 
Billing in a supermarket c++
Billing in a supermarket c++Billing in a supermarket c++
Billing in a supermarket c++varun arora
 
CS101- Introduction to Computing- Lecture 35
CS101- Introduction to Computing- Lecture 35CS101- Introduction to Computing- Lecture 35
CS101- Introduction to Computing- Lecture 35Bilal Ahmed
 
VMWorld 2017 Hackathon training: Getting Started with Clarity
VMWorld 2017 Hackathon training: Getting Started with ClarityVMWorld 2017 Hackathon training: Getting Started with Clarity
VMWorld 2017 Hackathon training: Getting Started with ClarityJeeyun Lim
 

Similar to Jetpack Compose - A Lightning Tour (20)

mobl
moblmobl
mobl
 
Dash Intro.pdf
Dash Intro.pdfDash Intro.pdf
Dash Intro.pdf
 
Scripting languages
Scripting languagesScripting languages
Scripting languages
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
Scala+swing
Scala+swingScala+swing
Scala+swing
 
Reactive UI in android - Gil Goldzweig Goldbaum, 10bis
Reactive UI in android - Gil Goldzweig Goldbaum, 10bisReactive UI in android - Gil Goldzweig Goldbaum, 10bis
Reactive UI in android - Gil Goldzweig Goldbaum, 10bis
 
J Query Public
J Query PublicJ Query Public
J Query Public
 
How to Leverage APIs for SEO #TTTLive2019
How to Leverage APIs for SEO #TTTLive2019How to Leverage APIs for SEO #TTTLive2019
How to Leverage APIs for SEO #TTTLive2019
 
eMan Dev Meetup: Kotlin For Android (part 03/03) 18.5.2017
eMan Dev Meetup: Kotlin For Android (part 03/03) 18.5.2017eMan Dev Meetup: Kotlin For Android (part 03/03) 18.5.2017
eMan Dev Meetup: Kotlin For Android (part 03/03) 18.5.2017
 
bbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docx
bbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docxbbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docx
bbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docx
 
Html css
Html cssHtml css
Html css
 
Advisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptAdvisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScript
 
Kotlin Mullets
Kotlin MulletsKotlin Mullets
Kotlin Mullets
 
Java Applet and Graphics
Java Applet and GraphicsJava Applet and Graphics
Java Applet and Graphics
 
Java Applet and Graphics
Java Applet and GraphicsJava Applet and Graphics
Java Applet and Graphics
 
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin XuSenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
 
Introduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RIntroduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in R
 
Billing in a supermarket c++
Billing in a supermarket c++Billing in a supermarket c++
Billing in a supermarket c++
 
CS101- Introduction to Computing- Lecture 35
CS101- Introduction to Computing- Lecture 35CS101- Introduction to Computing- Lecture 35
CS101- Introduction to Computing- Lecture 35
 
VMWorld 2017 Hackathon training: Getting Started with Clarity
VMWorld 2017 Hackathon training: Getting Started with ClarityVMWorld 2017 Hackathon training: Getting Started with Clarity
VMWorld 2017 Hackathon training: Getting Started with Clarity
 

Recently uploaded

A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdfA Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdfkalichargn70th171
 
Breaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdfBreaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdfMeon Technology
 
Crafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM IntegrationCrafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM IntegrationWave PLM
 
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
KLARNA -  Language Models and Knowledge Graphs: A Systems ApproachKLARNA -  Language Models and Knowledge Graphs: A Systems Approach
KLARNA - Language Models and Knowledge Graphs: A Systems ApproachNeo4j
 
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1KnowledgeSeed
 
Agnieszka Andrzejewska - BIM School Course in Kraków
Agnieszka Andrzejewska - BIM School Course in KrakówAgnieszka Andrzejewska - BIM School Course in Kraków
Agnieszka Andrzejewska - BIM School Course in Krakówbim.edu.pl
 
GraphAware - Transforming policing with graph-based intelligence analysis
GraphAware - Transforming policing with graph-based intelligence analysisGraphAware - Transforming policing with graph-based intelligence analysis
GraphAware - Transforming policing with graph-based intelligence analysisNeo4j
 
iGaming Platform & Lottery Solutions by Skilrock
iGaming Platform & Lottery Solutions by SkilrockiGaming Platform & Lottery Solutions by Skilrock
iGaming Platform & Lottery Solutions by SkilrockSkilrock Technologies
 
INGKA DIGITAL: Linked Metadata by Design
INGKA DIGITAL: Linked Metadata by DesignINGKA DIGITAL: Linked Metadata by Design
INGKA DIGITAL: Linked Metadata by DesignNeo4j
 
Secure Software Ecosystem Teqnation 2024
Secure Software Ecosystem Teqnation 2024Secure Software Ecosystem Teqnation 2024
Secure Software Ecosystem Teqnation 2024Soroosh Khodami
 
Benefits of Employee Monitoring Software
Benefits of  Employee Monitoring SoftwareBenefits of  Employee Monitoring Software
Benefits of Employee Monitoring SoftwareMera Monitor
 
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Anthony Dahanne
 
Into the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdfInto the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdfOrtus Solutions, Corp
 
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product UpdatesGraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product UpdatesNeo4j
 
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...rajkumar669520
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2
 
Workforce Efficiency with Employee Time Tracking Software.pdf
Workforce Efficiency with Employee Time Tracking Software.pdfWorkforce Efficiency with Employee Time Tracking Software.pdf
Workforce Efficiency with Employee Time Tracking Software.pdfDeskTrack
 

Recently uploaded (20)

A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdfA Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
 
Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
 
Breaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdfBreaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdf
 
Crafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM IntegrationCrafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM Integration
 
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
KLARNA -  Language Models and Knowledge Graphs: A Systems ApproachKLARNA -  Language Models and Knowledge Graphs: A Systems Approach
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
 
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
 
Agnieszka Andrzejewska - BIM School Course in Kraków
Agnieszka Andrzejewska - BIM School Course in KrakówAgnieszka Andrzejewska - BIM School Course in Kraków
Agnieszka Andrzejewska - BIM School Course in Kraków
 
GraphAware - Transforming policing with graph-based intelligence analysis
GraphAware - Transforming policing with graph-based intelligence analysisGraphAware - Transforming policing with graph-based intelligence analysis
GraphAware - Transforming policing with graph-based intelligence analysis
 
iGaming Platform & Lottery Solutions by Skilrock
iGaming Platform & Lottery Solutions by SkilrockiGaming Platform & Lottery Solutions by Skilrock
iGaming Platform & Lottery Solutions by Skilrock
 
INGKA DIGITAL: Linked Metadata by Design
INGKA DIGITAL: Linked Metadata by DesignINGKA DIGITAL: Linked Metadata by Design
INGKA DIGITAL: Linked Metadata by Design
 
Secure Software Ecosystem Teqnation 2024
Secure Software Ecosystem Teqnation 2024Secure Software Ecosystem Teqnation 2024
Secure Software Ecosystem Teqnation 2024
 
Benefits of Employee Monitoring Software
Benefits of  Employee Monitoring SoftwareBenefits of  Employee Monitoring Software
Benefits of Employee Monitoring Software
 
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
 
Into the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdfInto the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdf
 
5 Reasons Driving Warehouse Management Systems Demand
5 Reasons Driving Warehouse Management Systems Demand5 Reasons Driving Warehouse Management Systems Demand
5 Reasons Driving Warehouse Management Systems Demand
 
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product UpdatesGraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
 
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
Workforce Efficiency with Employee Time Tracking Software.pdf
Workforce Efficiency with Employee Time Tracking Software.pdfWorkforce Efficiency with Employee Time Tracking Software.pdf
Workforce Efficiency with Employee Time Tracking Software.pdf
 

Jetpack Compose - A Lightning Tour

  • 1. Jetpack Compose A lightning tour GDG Auckland - May 2019
  • 2. Disclaimer • I’m not an expert on any of this :) • This is the result of building the sample, exploring source code and some reading • Flutter and React devs - feel free to speak up • Compose is pre-alpha and not ready for production
  • 3. What is it? • A “…modern, reactive style UI toolkit for Android, which takes advantage of Kotlin and integrates seamlessly with the platform and all of your existing code.” • Declarative - “Simply describe your UI as a set of composable functions, and the framework handles UI optimizations under the hood and automatic updates to the view hierarchy.” • Inspired by/similar to Flutter, React, Litho • Way to allow the Android UI Framework to evolve, unbundled from platform releases • Create smaller, reusable UI components by composing lower-level UI components, e.g.:
  • 4. Composable UI components /** * The Bills card within the Rally Overview screen. */ @Composable fun RallyBillsCard() { Card(color = cardInternalColor) { Column { Padding(padding = 12.dp) { Column { Text(text = "Bills", style = +themeTextStyle { subtitle2 }) Text(text = "$1,810.00", style = +themeTextStyle { h1 }) } } } } }
  • 5. Counter app class CounterActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { CounterApp() } } } @Composable fun CounterApp() { val counter = +state { 0 } MaterialTheme { Button(onClick = { counter.value++ }) { Text(text = "Counter = ${counter.value}") } } } }
  • 6. Q: Wtf is going on here:
 val counter = +state { 0 } @Composable fun CounterApp() { val counter = +state { 0 } MaterialTheme { Button(onClick = { counter.value++ }) { Text(text = "Counter = ${counter.value}") } } }
  • 7. Q: Wtf is going on here:
 val counter = +state { 0 } @Composable fun CounterApp() { val result: Effect<State<Int>> = state { 0 } val counter: State<Int> = +result MaterialTheme { Button(onClick = { counter.value++ }) { Text(text = "Counter = ${counter.value}") } } }
  • 8. Q: Are components just implemented with Fragments/Views? • No*, widgets are just functions that ultimately make canvas draw calls.
  • 9. @Composable fun ColoredRect(brush: Brush, width: Dp? = null, height: Dp? = null) { Container(width = width, height = height, expanded = true) { DrawFillRect(brush = brush) } } @Composable private fun DrawFillRect(brush: Brush) { Draw { canvas, parentSize -> val paint = Paint() brush.applyBrush(paint) canvas.drawRect(parentSize.toRect(), paint) } }
  • 10. Tangent: KTX tags (?!) @Composable fun Draw( children: @Composable() () -> Unit = {}, @Children(composable = false) onPaint: DrawScope.(canvas: Canvas, parentSize: PxSize) -> Unit ) { // Hide the internals of DrawNode <DrawNode onPaint={ canvas, parentSize -> DrawScope(this).onPaint(canvas, parentSize) }> children() </DrawNode> }
  • 12. Tangent: KTX tags (?!) @Composable fun RallyApp() { val counter = +state { 0 } RallyTheme { Scaffold(appBar = { RallyAppBar() }) { Padding(padding = 16.dp) { Button(onClick = { counter.value++ }) { Text(text = "Counter = ${counter.value}", style = +themeTextStyle { h3 }) } } } } }
  • 13. Tangent: KTX tags (?!) @Composable fun RallyApp() { val counter = +state { 0 } <RallyTheme> <Scaffold appBar={ <RallyAppBar /> }> <Padding padding=16.dp> <Button onClick={ counter.value++ }> <Text text="Counter = ${counter.value}" style=+themeTextStyle { h3 } /> </Button> </Padding> </Scaffold> </RallyTheme> }
  • 14. Automatic XML -> KTX conversion <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello world!"/> </LinearLayout>
  • 15. Automatic XML -> KTX conversion
  • 16. Automatic XML -> KTX conversion (kinda…)
  • 17. Q: Are components just implemented with Fragments/Views? • No*, widgets are just functions that ultimately make canvas draw calls. • *In practise, you need at least one special View: AndroidCraneView • Typically you won’t create this directly, but via CraneWrapper, e.g.: override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { RallyApp() } } }
  • 18. Q: How do I check it out? • Short answer - follow this guide: https://medium.com/ q42-engineering/try-jetpack-compose-today- a12bda50aed2
  • 19. Q: How do I check it out? Longer answer: • Get a Repo client (Google’s VCS) • Check out the androidx branch of AOSP (~3GB) • Run a script to DL/build a custom unstable version of Android Studio (30min+) • Play with the sample projects
  • 20. Further Reading/Watching • Diving into Jetpack Compose - Thijs Suijten
 https://medium.com/q42-engineering/android-jetpack- compose-895b7fd04bf4 • Android Jetpack Compose Review - Karumi. Mentions some areas for improvement
 https://blog.karumi.com/android-jetpack-compose-review/ • Android developers page
 https://developer.android.com/jetpack/compose • Declarative UI Patterns (Google I/O’19)
 https://youtu.be/VsStyq4Lzxo
  • 21. Thank you Questions, opinions, further thoughts? Matt Clarke
 Twitter: @kiwiandroiddev