Jetpack Compose - Next Gen Kotlin UI Toolkit for Android
summary
Claim: Jetpack Compose replaces XML and view plumbing with a Kotlin compiler plugin plus runtime so UI is described as code and UI is a function of state; it emits a tree of nodes via functions marked @Composable and recomposes only changed subtrees. Demo builds a fruit row with a stepper using setContent, memoization and material theming; it works but is pre‑alpha, tooling is rough and adoption may take a year or two.
AI-written summary · about
chapters (18)
- 0:00Start
- 3:35Separation of Concerns
- 9:20Jetpack Compose
- 21:41Ui Is a Function of State
- 33:10State
- 34:07Model Annotation
- 37:35Because if We Want To Have a Component That Has To Have a Specific Width You Wrap It inside a Container Property Right So Which Means Your Code Is Very Small You Can Like Compose Different Kind of Things Right Say for Example if a Component Does Not Have a Width Property or like some Other Random Property You Can Still Write Your Own Compose Function and Make Sure that Your Compose Function Operates on Its Children Right so that's What We'Re Doing and Again Pretty Much Standard Text and the Text I'M Going To Set the Text Property To Bind to the Count Property Itself Right Feels like Xml Already Know and Then I'M Going To Say Style
- 38:17It's Type Safe so We Go To Do a Control Space in It You'Ll Get this List of Styles That Are Applicable in this Context Right so You Know We'Re Going To Get Invalid but Say for Example How To Compute with Xml Is Very Restrictive because We'Re Going To Try To Type for Search for a Style Then You'Re Going To Get a Lot of Matching Properties Which Can Be Very Confusing and Then Again I Want To Add some Space after My Text with Spacer and Would Add a Button plus We Are Pretty Much Done with Our Layout I Think in Terms of Ui
- 38:37Then Again I Want To Add some Space after My Text with Spacer and Would Add a Button plus We Are Pretty Much Done with Our Layout I Think in Terms of Ui I Think You'Re Convinced that We Are Done Are We Yeah So in Terms of Ui We Are Done What about the Functionality like Whatever the Click Events Right Something if You Have To Handle so We'Re Going To Say Hmm-Button I Click on this Something Should Happen Right like a Counts To Decrement So To Say if Count Is Greater than Zero
- 39:07So To Say if Count Is Greater than Zero That Is Okay this this Is Not the Final Epi8 What We'Re Essentially Trying To Do Here Is We Are Disabling the Button When the Count Is Not like It's Zero Right So in Compose the Current Way To Disable a Button Is To Make Sure that the Clickable Property Is Null Right and this Is Not a Final Api There Could Be a Probably Enable Property That You Can Flip On and Off but this Is Just Temporary and this Is How It Is Today so if the Count Is Zero Then You Know To Disable the Button by Setting It to Null or Else We'Re Going To Say on Remove One and on Rimmer One Does Nothing Right It's Just a Function That Has a Callback
- 40:53And this Is all You Have To Write To Build the Component That I Showed You Earlier and this Is Boiled Waste Destruction Right like We Just Completely Got Rid of the Ball Earthquake There's no Qualified in Here Right that's Amazing and Yes of Course the Composable Annotation on the Top of the Function Right Let's Try Out Building the Entire Component Here Let's Try To Build this Row and We Start with the Fruit Robe Which Is Again a Simple Function Right It's Annotated with Composable
- 42:31And Then We Send a Callback and Whenever this Callback Is Invoked Then We Go Change the Value of Priority Pretty Cool and this Is all You Have To Write To Create the Row You Need Dividers You Go Add a Divider Right There's no Xml There Is Nothing Right There like Basically There Is no Ceremony that You Are Supposed To Do like You Can Pull All this Off with Just the Setup So this Is Also Done but Where Is Date Maybe if You Have To Hold On to the State Somewhere Great so this Is Overridden Function on an Activity It's Not Even an App Compat Activity Is Just a Regular Activity
- 47:38They Probably Would Merge this into the Compost System Itself so an Effect Would Be a Function That Returns a Value whereas a Component Compose Ui Component Would Be a Function That Is Returns a Unit Right Ii Don't Know How that Is Going To Work but that's Certainly in Practice and I Hope We'Ll Probably Not Do the Demo I Don't Think We Have Enough Time for the Demo but Let's Say So in Terms of the Future You Can Obviously See a Lot of Productivity because We'Ve Been Writing a Lot Less Boilerplate We Are Using Existing Skills in Multiple Places To Organize Our Code and Things like that
- 48:06You Can Obviously See a Lot of Productivity because We'Ve Been Writing a Lot Less Boilerplate We Are Using Existing Skills in Multiple Places To Organize Our Code and Things Like that It's a Much Higher Level of Abstraction Which Means We as Developers Can Focus on Delivering a Lot of Value for the Business Right so We Can Focus on Delivering Business Value Rather than Plumbing Xml Layouts Styles and It's a Wide Use of Existing Skill Sets So if You Are Really Good at Writing Code You Can Still Go Ahead and Write Code Focus Your Time on Writing Code Right That's all You Have To Do and Collaboration Is Going To Be Pretty Easy because One Thing Is Design Team if You'Re Going To Work for the Design Team and some of the Design Teams That I Know of They Have Sketch Files and these Case Files
- 51:21I Have I Think They Have a Few More Time for Questions and if You Have any Questions I'M Up for It Yes Please So in the Stepper Code We Have if Count Is Zero in the Click Listener Instead We Can Have It outside the Button Itself Is It Possible You Can Do It Say for Example Let's Say You Find It Really Hard To Set the Click Listener to Null so What You Can Actually Do Is Say Hey I'M the Creator Enabled Compose Component That Actually Does this Logic for You
- 52:43But I Want To Pass It Down To Like Maybe Fifth Level in the Function Right Now all Functions Should Have a Context Parameter Right because You'Re Passing It Explicitly this Becomes Really Hard Right So One of the Ways To Fix this Is To Pass these Dependencies Implicitly Right So Compose Gives You Something Called an Ambient Right so You Can Say It's I Mean It's like a Module to Dagger like so You Can Say Hey these Are the Dependencies I Want To Pass Down Implicitly and Then You Say at the End of Ambient and Then the Provider and Then You Can Provide that Instance Right and if I'M a Function Downstream
- 53:17And Then Again I Can Get Access to the Context so There Are Ways To Implicitly Pass Dependencies down the Tree Hierarchy I Have One More Question Does Composable Jetpack Also Provide or Other Functions like You Used a Set Content To Fill the Entire Screen with this Float All Right but What if You Wanted To Add View or Something like that like Call Do You Okay so There Are Native View Adapters That Let You Use no because either the Existing Android View System or the I Don't Really Know the Answer to this Question because Normally if You Define or Expose an Old Way You Need To Like Get an Instance of the Correct Layout and Then You Need To Add View
- 53:56If You Define or Expose an Old Way You Need To Like Get an Instance of the Correct Layout and Then You Need To Add View so that It Goes and Fills in the View Here You Have Just Put a Memo Clause Right and It Assigns So Much Space That's What You Said Is for the State or for the State because during Recomposition You Don't Want To Lose that Information Right because if that Gets Called Again Then Your State Is Reset to the New Object Itself Right that Is Something That You Don't Want To Lose if Okay but Where Does It Add in the Layout like or Is There Add View Class or Something like that and There's no View Class like because if You Want To Add View Then You Have To Have any Instance of the Class Right Correct
related talks
32mJetpack Compose — Next Gen Kotlin UI Toolkit for Android
35mNext Generation Android UI with Jetpack Compose
35mDeclarative UI patterns
45mOn the road to Jetpack Compose
35mCompose Yourself: Designing a Kotlin First UI Toolkit
01h 12mJetpack Compose over inheritance
45mFirst look at Jetpack Compose
19mJumping into Jetpack Compose way too early to see what's inside