JetpackCompose.md

Jetpack Compose and how did we end up here?

Index

• The birth of modern smartphones
• React is taking over the world
• Reacting to React
• How does Jetpack Compose fit into the picture

The birth of modern smartphone

iPhone

• 2007
• It literally change the world
• Make "apps a thing"
• Originally they don't want 3rd party native apps

Android (& Java)

• 2008
• Started in 2003, acquired by Google in 2005
• Pivot away from Blackberry-esq, towards iPhone-esq
• Basically Java SE 6, minue Swing/JavaFX/a bunch of other API

React is taking over the world

• 2013

Web in late 2000s

• Web app is not that common (because it was hard)
  • With HTML/CSS/JS (Ajax)
    • (IE, Firefox, Chrome, Opera, Safari) x (Desktop, Mobile)
    • Old HTML & CSS & JS are quite limited
      • CSS: Sass, Less
      • JS: Underscore, Lodash, jQuery
      • HTML: 🤷‍
  • Flash
    • Don't work well on mobile
    • Never work on iOS

What makes React special

• Perfect timing
  • Desktop browsers got a lot better with HTML5
    • Safari for Windows is dead (2012)
    • Opera adopt Chrome (2013)
    • Windows 7 (2009) gets mainstream with IE9 (2011)
  • Android & iOS become obvious leaders of the market
    • Chrome for Android (2012)
  • CSS3 makes styling stuff easier
  • ECMAScript 5 JS reached desktop browsers
  • Node.js (2009)
• Declartive UI is now easy
  • TBC

What is Declarative UI and what makes it special?

• e.g.: SQL
• Apply the same logic to creating UI
  • just say what the UI should look like, and how it should behave
  • Some magic will tell you exactly that
• Why people like it?
  • Hide complex mental model: event listener, bi-directional data flow, etc.
    • More time on reaching your goal, less time on tinkering with details
    • Analogy: GC is good enough -> less time dealing with memory leaks
  • Introduce simple mental model: UI = f(state)
    • Everything is a Component
    • Props & State
    • (copy some points from the og React video)

What makes React special (cont.)

• "It's from facebook, so it probably pretty good"
• Heavily leaning on proven technologies
  • HTML/CSS/JS
  • Node.js & npm

Reacting to React

(Skip)

• Angular (2)
• Vue
• Litho

To-be-app-dev: React Native

• 2015
• People really like Declartive UI
• "Website disguise as an app" still sucks, even in 2019
• What if the code looks like React, but is powered by platform-specific UI?

Google: Flutter

• 2017
• Learn from React: People love Declaritive UI
• Learn from React Native: Relying on each platform = chasing moving goal post
• Solution: Write a new one from scratch
• Redesign API with Material Design in mind

React: React Hooks

• 2018 (5 years after og React)
• Learn from React
• Declartive UI is fine, but how to get there can be improve
• (TODO insert more stuff from react hooks)

Apple: SwiftUI (Beta)

• 2019
• (In development since 2015)
• struct-base

Google(round 2): Jetpack Compose (Not even alpha)

• 2019
• (In development since 2018)
• function-based

How does Jetpack Compose fit into the picture

• From React
  • Declaritive UI
  • Hook-inspire API
• Flutter
  • Low-level but not that low-level
    • Graphics API is stable enough to work with
  • High-level API design
    • Style as a component
    • Text & Font & everything
• Old Android API
  • What NOT to do with state
  • Composition > Inheritence
• Android community
  • Kotlin (& Java 8)
  • Functional Programming