Jumping into Jetpack Compose way too early to see what's inside

Presented in Droidcon Berlin 2019

In Google I/O 2019, Jetpack Compose was announced, with the goal to simplify UI development, by rethinking how the UI toolkit could be. And in the talk, we will jump into the "pre-alpha" stage of the source code, talk to some of the contributors, and see what they are doing to build the future of Android.

Transcript

1. Jumping into Jetpack Compose way too early to see what's inside
2. Disclaimer
4. Louis Tsai erasys @louis993546
5. Quick recap • “simplify UI development” • declarative programming model (React/Flutter) • “unbundled toolkit”
6. import androidx.compose.* import androidx.ui.core.* @Composable fun Greeting(name: String) { Text ("Hello $name! Welcome to droidcon Berlin 2019!") }
7. Compiler Tooling Runtime
8. “It’s not View, It’s not Fragment”
9. @Composable fun Text(/* params */) { /* a lot of magic */ Draw { canvas, _ -> internalSelection.value?.let { renderParagraph.paintSelection(canvas, it) } renderParagraph.paint(canvas, Offset(0.0f, 0.0f)) } /* a lot more magic */ } Composable function that knows how to “draw”
10. @Composable fun Foo(): Unit
11. @Composable fun Foo(): Unit
12. @Composable internal fun Text(/* params */) { /* a lot of magic */ Draw { canvas, _ -> internalSelection.value?.let { renderParagraph.paintSelection(canvas, it) } renderParagraph.paint(canvas, Offset(0.0f, 0.0f)) } /* a lot more magic */ } Side-effects
13. println(“Hello, World!”)
14. @Composable fun App(userName: String) { Column { Text(“Hello”) Text(userName) } }
15. @Composable fun App(userName: String) { Column { Text(“Hello”) Text(userName) } }
16. @Composable fun App(userName: String) { Column { Text(“Hello”) Text(userName) } }
17. @Composable fun App(userName: String) { Column { Text(“Hello”) Text(userName) } }
18. @Composable fun App(userName: String) { Column { Text(“Hello”) Text(userName) } }
19. @Composable fun App(userName: String) { Column { Text(“Hello”) Text(userName) } }
20. @Composable fun App(userName: String) { Column { Text(“Hello”) Text(userName) } }
21. @Composable fun App(userName: String) { Column { Text(“Hello”) Text(userName) } }
22. @Composable fun Foo(): Unit
23. Other frameworks class ReactFoo extends React.Component { render() { return ( <div className="foo-list"> <h1>foo list {this.props.name}</h1> <ul> <li>bar 1</li> <li>bar 2</li> <li>bar 3</li> </ul> </div> ); } } class FlutterFoo extends StatelessWidget { FlutterFoo({this.name}); final String name; @override Widget build(BuildContext context) { return Column( children: [ Text("foo list $name"), ListView( children: [ Text("bar 1"), Text("bar 2"), Text("bar 3"), ], ), ], ); } }
24. UI = f(state)
25. import React from 'react' import { Card, Row, Input, Text} from `./components` import ThemeContext from `./ThemeContext` export default class Greetings extends React.Component { constructor(props) { super(props) this.state = { name: 'Mary', surname: 'Popins', width: width.innerWidth } this.handleNameChange = this.handleNameChange.bind(this) this.handleSurnameChange = this.handleSurnameChange.bind(this) this.handleResize = this.handleResize.bind(this) } componentDidMount() { window.addEventListener('resize', this.handleResize) document.title = this.state.name + ' ' + this.state.surname } componentDidUpdate() { document.title = this.state.name + ' ' + this.state.surname } componentWillUnmount() { window.removeEventListener('resize', this.handleResize) } handleNameChange(event) { this.setState({ name: event.target.value }) } handleSurnameChange(event) { this.setState({ surname: event.target.value }) } handleResize() { this.setState({ width: innerWidth }) } render() { const { name, surname, width } = this.state return ( <ThemeContext.Consumer> {theme => ( <Card theme={theme}> <Row label="Name"> <Input value={name} onChange={this.handleNameChange} /> </Row> <Row label="Surname"> <Input value={surname} onChange={this.handleSurnameChange} /> </Row> <Row label="Width"> <Text>{width}</Text> </Row> </Card> )} </ThemeContext.Consumer> ) } } ⬤ State mutation ⬤ Listeners ⬤ Lifecycle hooks ⬤ Listeners ⬤ Lifecycle hooks ⬤ Lifecycle hooks ⬤ Listener ⬤ State mutation ⬤ State mutation ⬤ State mutation View
26. @prchdk
27. ⚠ State
28. @Composable fun Foo(): Unit
29. @Composable fun SomeView() { TODO() } suspend fun someTask() { TODO() }
32. @Composable fun Author(userName: String) { Column() { Text(“Name”) Text(userName) } }
33. @Composable fun Author(userName: String) { //<- change if userName changes Column() { Text(“Name”) //<- view never change Text(userName) } }
34. Resources • #compose channel @ kotlinlang slack • Compose From First Principles • Android Developer Backstage Podcast #115 • The Google I/O talk • How to clone AOSP and try it out • How to clone the compose part of AOSP • React Hooks: Motivation • ${most React.js stuff} • ${most Flutter stuff}
35. Slides tinyurl.com/into-jetpack-compose
36. Danke Questions?