Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

C6c3d6539516edbde775453d8a6867fb?s=128

Louis Tsai

July 02, 2019
Tweet

Transcript

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

    inside
  2. Disclaimer

  3. None
  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() }
  30. None
  31. None
  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?

  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None