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

Jetpack Compose - Foundations

Jetpack Compose - Foundations

The presentation used for the compose workshop in DevHack

https://github.com/escueladevhack/jetpackcompose
https://www.youtube.com/devhack

2a31aa30e3f9eeb22493a01a52833883?s=128

Juan Guillermo Gómez Torres

November 25, 2020
Tweet

Transcript

  1. None
  2. Juan Guillermo Gómez ➢ Co-Leader y Co-Founder of GDG Cali.

    ➢ Tech Lead in WordBox & Founder DevHack ➢ Consultant and advisor on software architecture, cloud computing and software development. ➢ Experience in several languages and platforms. (C, C#, Java, NodeJS, android, GCP, Firebase). ➢ Google Developer Expert (GDE) in Firebase & GCP ➢ BS in System Engineering and a MS in Software Engineering. ➢ @jggomezt ➢ youtube/devhack
  3. None
  4. ❖ State of the app changes for user interactions, The

    UI need to be updated to display the current data. Manipulating views can increase the probability of errors and illegal states. For example, an update might try to set a value of a node that was just removed from the UI. ❖ If a piece of data is rendered in multiple places, it’s easy to forget to update one of the views that shows it. It’s also easy to create illegal states ❖ The software maintenance is increasingly complex if the number of views increases. ❖ Imperative programming.
  5. None
  6. ❖ Declarative programming. ❖ DSL Kotlin. ❖ Declarative UI simplifies

    the engineering associated with building and updating user interfaces. ❖ The technique works by conceptually regenerating the entire screen from scratch, then applying only the necessary changes. ❖ Regenerating the entire screen is expensive in terms of time, computing power and battery usage.
  7. None
  8. ❖ Compose is a declarative UI framework. ❖ Compose intelligently

    chooses which parts of the UI need to be redrawn at any given time. ❖ Set of composable functions that take in data and emit UI elements. ❖ Dynamic Content.
  9. The function is annotated with the @Composable annotation The function

    takes in data The function displays text in the UI The function doesn't return anything This function is fast, idempotent, and free of side-effects Dynamic content
  10. None
  11. None
  12. The caller updates the value of clicks. Compose calls the

    lambda with the Text function again to show the new value; this process is called recomposition. Composable functions can execute in any order. Composable functions can run in parallel
  13. None
  14. Limitation of inheritance: we have to have a single parent

    that we inherit from.
  15. ❖ Compose is not an annotation processor ❖ Kotlin compiler

    plugin in the type checking and code generation phases of Kotlin ❖ The implementation of the Composer contains a data structure that is closely related to a Gap Buffer. This data structure is commonly used in text editors.
  16. None
  17. None
  18. ❖ https://developer.android.com/jetpack/compose/mental-model ❖ https://medium.com/androiddevelopers/understanding-jetpack-compose-part-1-of-2-ca316fe39 050 ❖ https://medium.com/androiddevelopers/under-the-hood-of-jetpack-compose-part-2-of-2-37b2c 20c6cdd

  19. https://www.facebook.com/escueladevhack/ Escuela de Hackers www.devhack.co https://github.com/escueladevhack