Reactive UI in android - Gil Goldzweig Goldbaum, 10bis

Reactive UI in Android
Composing a new UI toolkit (pun intended)

Gil Goldzweig Goldbaum
@GilLongName GilGoldzweig GilGoldzweig

AOSP View
TextView
Button
ViewGroup
FrameLayout LinearLayout EditText
Button
EditText

Spinner
Highest quality I found 😕
Android 0.8
Nov 5, 2007

android.view.ViewAndroid 4.2
Min SDK < 17 = No luck
😔

“API design is building future regret”
Chat haase

A fresh start
As part of JetPack family

Jetpack compose
@Composable
fun Greeting(name: String) {
Text("Hello: $name")
}
Declarative UI
● Take data as input
● Emits UI hierarchy when invoked

@Composable
}
Hello: Gil

@Composable
}
Hello: Rachel

@Composable
}
Hello: David

Compiler plugin
@Composable
}

Composable functions are not
UI elements

Compiler plugin
@Composable
fun Greeting(name: String): Unit {
}

What are composable functions?

Composable function
Compiler plugin
@Composable
}

Composable function
Compiler plugin
@Composable
}
Greeting

Composable function
Compiler plugin
@Composable
}
Greeting
Text

Composable function
Compiler plugin
@Composable
}
Greeting
Text
Text

Composable function
Compiler plugin
@Composable
}
Instructions tree
Greeting
Text
Text

Runtime
Takeaway
(10bis) mobile
app

Compose uses canvas under the
hood

AOSP View
TextView
Button
ViewGroup
FrameLayout EditTextLinearLayout
Button
EditText

Gradle dependency
Compose
Canvas
Surface Text VectorImage

@Composable
fun Button(text, onClick) {
}
Button

@Composable
Surface(shape, color, border, elevation) {
}
}
Surface
Button

@Composable
Ripple(color = rippleColor) {
}
}
}
Surface
Ripple
Button

@Composable
Clickable(onClick = onClick) {
}
}
}
}
Surface
Ripple
Clickable
Button

@Composable
Container(padding = paddings) {
}
}
}
}
}
Surface
Ripple
Clickable
Container
Button

@Composable
Text(text)
}
}
}
}
}
Surface
Ripple
Clickable
Container
Text
Button

@Composable
Text(text)
}
}
}
}
}
Surface
Ripple
Clickable
Container
Text
ImageButton

@Composable
Image(image)
}
}
}
}
}
Surface
Ripple
Clickable
Container
Image
ImageButton

@Composable
Image(image)
}
}
}
}
}
Surface
Ripple
Clickable
Container
ImageButton
Image

Reactive data ﬂow
Data
Events

Spinner
Item Clicked
Selection
changed
We get
notiﬁed
Item Clicked
We get
notiﬁed
UI changes
Selection
updated
UI changes
Change
selection?
Current Compose

Reactive data ﬂow
UIUpdate Data
Change UI

Reactive data ﬂow
UIUpdate Data
✅
✅
Change data
Data changed,
Notifying UI

Reactive data ﬂow
UIUpdate Data
Single source of truth

@Composable
fun Counter() {
}
Reactive data ﬂow

@Composable
fun Counter() {
val count
}
Reactive data ﬂow

@Composable
fun Counter() {
val count = 0
}
Reactive data ﬂow

@Composable
fun Counter() {
val count = state { 0 }
}
Reactive data ﬂow

@Composable
fun Counter() {
}
Reactive data ﬂow
Should be treated
as an “observer”

@Composable
fun Counter() {
Column {
}
}
Reactive data ﬂow

@Composable
fun Counter() {
Column {
Text("Counter demo")
}
}
Reactive data ﬂow

@Composable
fun Counter() {
Column {
Button(text = "Add",
onClick = { count.value++ })
Button(text = "Subtract",
onClick = { count.value-- })
}
}
Reactive data ﬂow

@Composable
fun Counter() {
Column {
Text("Clicks: ${count.value}")
}
}
Reactive data ﬂow

@Composable
fun Counter() {
Column {
Text("Clicks: ${count.value}")
}
}
Reactive data ﬂow
Single source of truth

@Model
data class NewsModel(
var title: String,
var auther: String,
var imageUrl: String
)

@Model
@Model
var title: String,
var auther: String,
)

@Model
@Model
var title: String,
var auther: String,
)
data class NewsHolder(var news: List<NewsModel>)

@Model
@Model
var title: String,
var auther: String,
)
@Model
data class NewsHolder(var news: List<NewsModel>)

@Model
@Composable
fun NewsItem(model: NewsModel) {
}

@Model
@Composable
Row {
}
}

@Model
@Composable
Row {
Image(url = model.imageUrl)
}
}

@Model
@Composable
Row {
Column {
}
}
}

@Model
@Composable
Row {
Column {
Text(model.title)
}
}
}

@Model
@Composable
Row {
Column {
Text(model.title)
Text(model.auther, style = TextStyle(Color.Gray))
}
}
}

@Model
@Composable
fun NewsFeed(holder: NewsHolder) {
}

@Model
@Composable
VerticalScroller {
}
}

@Model
@Composable
VerticalScroller {
Column {
}
}
}

@Model
@Composable
VerticalScroller {
Column {
holder.news.forEach { newsModel ->
}
}
}
}

@Model
@Composable
VerticalScroller {
Column {
NewsItem(newsModel)
}
}
}
}

@Model
@Composable
VerticalScroller {
Column {
NewsItem(newsModel)
Divider(height = 1.dp)
}
}
}
}

Jetpack compose
var newsHolder: NewsHolder
override fun onCreate(savedState: Bundle?) {
super.onCreate(savedState)
}

Jetpack compose
setContent {
}
}

Jetpack compose
setContent {
NewsFeed(newsHolder)
}
}

UI Repository
Presenter /
ViewModel
Jetpack compose
pullNews
newsPulled
fetchNews
onNewsFetched

override fun onNewsFetched(newsHolder: NewsHolder) {
}
Jetpack compose

override fun onNewsFetched(newsHolder: NewsHolder) {
this.newsHolder = newsHolder
}
Jetpack compose

override fun onUpdate() {
}
Jetpack compose

override fun onUpdate() {
newsHolder.news[0].title = "New title"
}
Jetpack compose

Compose can still work with the current
toolkit

@GenerateView
@Composable
...
}

@GenerateView
@Composable
@GenerateView
...
}

Compose is not
production ready!!!!!!!!!!

Available in Android
studio 4+

Reactive UI in android - Gil Goldzweig Goldbaum, 10bis

More Related Content

What's hot (20)

Similar to Reactive UI in android - Gil Goldzweig Goldbaum, 10bis (20)

More from DroidConTLV (20)

Recently uploaded (20)

Reactive UI in android - Gil Goldzweig Goldbaum, 10bis