Slide 1
Slide 1 text
Mental Models of
Jetpack Compose
@louis993546
Slide 2
Slide 2 text
Google I/O 2019
@louis993546
Slide 3
Slide 3 text
import androidx.compose.*
import androidx.ui.core.*
@Composable
fun Greeting(name: String) {
Text ("Hello $name!")
}
@louis993546
Slide 4
Slide 4 text
1. Mental Model
2. Programming Paradigm
3. Inheritance
4. Composition
5. Reactive Declarative UI
6. Component
7. Functional component
8. Hindsight
@louis993546
Slide 5
Slide 5 text
1. Mental Model
@louis993546
Slide 6
Slide 6 text
A mental model is an explanation of someone's
thought process about how something works in
the real world.
-- Wikipedia
@louis993546
Slide 7
Slide 7 text
2. Programming Paradigm
@louis993546
Slide 8
Slide 8 text
State
Visibility Data Flags
@louis993546
Slide 9
Slide 9 text
@louis993546
Slide 10
Slide 10 text
val linearLayout = LinearLayout(context).apply {
orientation = LinearLayout.VERTICAL
}
linearLayout.addView(
TextView(context).apply { text = "Hello, World" }
)
linearLayout.addView(
ImageView(context).apply { imageResource = R.drawable.star }
)
@louis993546
Slide 11
Slide 11 text
val linearLayout = LinearLayout(context).apply {
orientation = LinearLayout.VERTICAL
} // a statement (instruction)
linearLayout.addView(
TextView(context).apply { text = "Hello, World" }
) // another statement (instruction)
linearLayout.addView(
ImageView(context).apply { imageResource = R.drawable.star }
) // yet another statement (instruction)
@louis993546
Slide 12
Slide 12 text
Imperative programming
val linearLayout = LinearLayout(context).apply {
orientation = LinearLayout.VERTICAL
} // a statement (instruction)
linearLayout.addView(
TextView(context).apply { text = "Hello, World" }
) // another statement (instruction)
linearLayout.addView(
ImageView(context).apply { imageResource = R.drawable.star }
) // yet another statement (instruction)
@louis993546
Slide 13
Slide 13 text
@louis993546
Slide 14
Slide 14 text
@louis993546
Slide 15
Slide 15 text
Declarative programming
@louis993546
Slide 16
Slide 16 text
Declarative programming
@louis993546
Slide 17
Slide 17 text
3. Inheritance
@louis993546
Slide 18
Slide 18 text
@louis993546
Slide 19
Slide 19 text
Animal
@louis993546
Slide 20
Slide 20 text
Animal
@louis993546
Slide 21
Slide 21 text
@louis993546
Slide 22
Slide 22 text
Commonalities
Breath Walk Work
Take
over
the
world Blep Blop
✅ ✅ ✅ ✅
✅ ✅
✅
✅
@louis993546
Slide 23
Slide 23 text
Commonalities
Breath Walk Work
Take
over
the
world Blep Blop
✅ ✅ ✅ ✅
✅ ✅
✅
✅
Animal
@louis993546
Slide 24
Slide 24 text
Commonalities
Breath Walk Work
Take
over
the
world Blep Blop Blup
✅ ✅ ✅ ✅
✅ ✅
✅
✅
✅ ✅
✅ ✅
@louis993546
Slide 25
Slide 25 text
@louis993546
Slide 26
Slide 26 text
@louis993546
Slide 27
Slide 27 text
@louis993546
Slide 28
Slide 28 text
4. Composition
@louis993546
Slide 29
Slide 29 text
Commonalities
Breath Walk Work
Take
over
the
world Blep Blop Blup
✅ ✅ ✅ ✅
✅ ✅
✅
✅
✅ ✅
✅ ✅
@louis993546
Slide 30
Slide 30 text
Commonalities
Breath Walk Work
Take
over
the
world Blep Blop Blup
✅ ✅ ✅ ✅
✅ ✅
✅
✅
✅ ✅
✅ ✅
@louis993546
Slide 31
Slide 31 text
class : Breathable, Walkable, Workable, Blopable
class : Breathable, Walkable, TakeOverTheWorldable, Blepable
class : Walkable, Workable, TakeOverTheWorldable, Blupable
@louis993546
Slide 32
Slide 32 text
class : Breathable, Walkable, Workable, Blopable
class : Breathable, Walkable, TakeOverTheWorldable, Blepable
class : Walkable, Workable, TakeOverTheWorldable, Blupable
class : Breathable, Blupable
@louis993546
Slide 33
Slide 33 text
5. Reactive Declarative UI
@louis993546
Slide 34
Slide 34 text
@louis993546
S
A
B
C
D
F
?
XML
?
?
?
?
Slide 35
Slide 35 text
@louis993546
S
A
B
C
D
F
?
XML
?
?
?
?
Slide 36
Slide 36 text
Google I/O 2015
@louis993546
Slide 37
Slide 37 text
@louis993546
Slide 38
Slide 38 text
S
A
B
C
D
F
?
XML
Data
Binding
?
?
?
@louis993546
Slide 39
Slide 39 text
JSConf US 2013
@louis993546
Slide 40
Slide 40 text
Composition
Declarative Programming +
@louis993546
Slide 41
Slide 41 text
React.js
Move markup into logic
Data Binding
Move logic into markup
@louis993546
Slide 42
Slide 42 text
// a JavaScript file
class HelloWorld extends React.Component {
render() {
// ↓ HTML ↓ JS ↓ Back to HTML
return
Hello, {this.props.target}!
} } @louis993546Slide 43
Slide 43 text
UI = f(state)
@louis993546
Slide 44
Slide 44 text
sealed class ViewState {
data class Success(val data: List) : ViewState()
data class Error(val error: Throwable) : ViewState()
}
viewStateLiveData.observe(this) { viewState ->
when (viewState) {
is Success -> { ... }
is Error -> { ... }
}
}
@louis993546
Slide 45
Slide 45 text
WWDC 2019
@louis993546
Slide 46
Slide 46 text
6. Component
@louis993546
Slide 47
Slide 47 text
class HelloWorld extends React.Component {
render() {
return (
Hello, {this.props.target}!
) } } class HelloWorld extends React.Component { constructor(props) { super(props); this.state = {target: "World"} } componentDidMount() { console.log('mounting......') } componentWillUnmount() { /* ... */ } render() { return (Hello, {this.state.target}!
) } } @louis993546Slide 48
Slide 48 text
@louis993546
Slide 49
Slide 49 text
1. Notify someone when click
2. Have a background
3. Display Text
1. Notify someone when click
2. Have a background
3. Display Image
@louis993546
Slide 50
Slide 50 text
1. Notify someone when click
2. Have a background
3. Display Text
1. Notify someone when click
2. Have a background
3. Display Image
@louis993546
Slide 51
Slide 51 text
1. Notify someone when click
2. Have a background
3. Display something
@louis993546
Slide 52
Slide 52 text
1. Notify someone when click
2. Have a background
3. Display anything
@louis993546
Slide 53
Slide 53 text
//...
FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
child: Icon(Icons.navigation),
backgroundColor: Colors.green,
),
//...
@louis993546
Slide 54
Slide 54 text
//...
FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
child: Text('¯\_(ツ)_/¯'),
backgroundColor: Colors.green,
),
//...
@louis993546
Slide 55
Slide 55 text
class HelloWorld extends React.Component {
render() {
if (this.props.isFormal) {
return /* 2000 lines of very complex layout #1 */
}
return /* 2000 lines very complex layout #2 */
}
}
@louis993546
Slide 56
Slide 56 text
class FormalHelloWorld extends React.Component {
render() {
return /* 2000 lines of very complex layout #1 */
}
}
class InformalHelloWorld extends React.Component {
render() {
return /* 2000 lines of very complex layout #2 */
}
}
@louis993546
Slide 57
Slide 57 text
Why now?
● Better IDE (Autocomplete, linter, etc.)
● Better performance -> Better developer ergonomics
● Better languages (type inference, lambda/closure, etc.)
○ JavaScript
○ TypeScript/Flow
○ Dart
○ Swift
○ Kotlin
○ (Java 10+)
● etc.
@louis993546
Slide 58
Slide 58 text
@louis993546
S
A
B
C
D
F
Flutter
XML
Data
Binding
React
Compose
SwiftUI
Slide 59
Slide 59 text
7. Functional component
@louis993546
Slide 60
Slide 60 text
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {target: "World"}
}
componentDidMount() {
console.log('mounting......')
}
componentWillUnmount() { /* ... */ }
render() {
return (
Hello, {this.state.target}!
) } } @louis993546Slide 61
Slide 61 text
UI = f(state)
@louis993546
Slide 62
Slide 62 text
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {target: "World"}
}
componentDidMount() {
console.log('mounting......')
}
componentWillUnmount() { /* ... */ }
render() {
return (
Hello, {this.state.target}!
) } } @louis993546Slide 63
Slide 63 text
function HelloWorld(props) {
const [target, setTarget] = useState("World")
useEffect(() => log())
return
Hello, {target}!
} function log() { console.log('mounting......') } @louis993546 class HelloWorld extends React.Component { constructor(props) { super(props); this.state = {target: "World"} } componentDidMount() { console.log('mounting......') } componentWillUnmount() { /* ... */ } render() { return (Hello, {this.state.target}!
) } } →Slide 64
Slide 64 text
function HelloWorld(props) {
const [target, setTarget] = useState("World")
useEffect(() => log())
return
Hello, {target}!
} function log() { console.log('mounting......') } function HelloWorld2(props) { // ... log() // ... } @louis993546 class HelloWorld extends React.Component { constructor(props) { super(props); this.state = {target: "World"} } componentDidMount() { console.log('mounting......') } componentWillUnmount() { /* ... */ } render() { return (Hello, {this.state.target}!
) } } →Slide 65
Slide 65 text
ReactConf 2018
@louis993546
Slide 66
Slide 66 text
8. Hindsight
@louis993546
Slide 67
Slide 67 text
perception of the nature of an event after it has happened
-- Merriam-Webster
@louis993546
Slide 68
Slide 68 text
“Read later”
● ${React.js stuff}
○ React hooks
● ${Flutter stuff}
○ Material Components widgets
● Architecture-stuff
○ “Events & Data”
○ MVI, BLoC, etc.
○ Redux, MobX, etc.
● Kotlin extension properties
● Kotlin IR
● Kotlin compiler plugin
● How suspend function compiles
● Virtual DOM
@louis993546
Slide 69
Slide 69 text
“Read later”
● ${React.js stuff}
○ React hooks
● ${Flutter stuff}
○ Material Components widgets
● Architecture-stuff
○ “Events & Data”
○ MVI, BLoC, etc.
○ Redux, MobX, etc.
● Kotlin extension properties
● Kotlin IR
● Kotlin compiler plugin
● How suspend function compiles
● Virtual DOM
@louis993546
https://bit.ly/2kVVO93
Slide 70
Slide 70 text
@louis993546