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

More Decks by Louis Tsai

Other Decks in Programming

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