Debugging Using Remote Compose, Made Easy with Livewire
summary
Livewire is an open source remote-Compose sidecar that serializes a custom Compose tree, diffs it (first frame a few KB, subsequent patches tens of bytes), and ships it over USB using ADB reverse forward for Android and a stitched USB muxd tunnel for iOS; the host runs the server and decrypts frames after a public key handshake. Built plugins include a SQL inspector, network capture, and a recomposition inspector that shows skip counts and invalidation causes; it works live with reconnects and throttled frame clocks.
AI-written summary · about
chapters (29)
- 0:00Introduction to Livewire
- 1:04Traditional debugging problems
- 3:32Sidecar debugging concept
- 4:59Remote Compose and limitations
- 6:44Compose compiler and runtime
- 7:47Custom Compose tree structure
- 8:50Implementing applier and composition
- 10:14Adding node emitters and modifiers
- 13:03Tree design with UI meaning
- 16:32Modifiers for UI elements
- 18:18Device connections setup
- 20:06Discovery and connection phases
- 21:49Android and iOS connections
- 24:37iOS connection challenges
- 25:39Security and encryption
- 27:03Reconnection handling
- 28:05Rendering UI trees
- 29:13Recursive node rendering
- 30:17Optimizing with structural diffs
- 31:20Handling user actions
- 33:50Click and interaction actions
- 34:32Livewire host app interface
- 35:14Built-in debugging plugins
- 36:18Recomposition inspector plugin
- 37:20Integrating Livewire client
- 38:02Creating custom plugins
- 38:46Live demo and use cases
- 41:39Custom plugin examples
- 42:21Closing remarks
related talks
48mMobile debugging
36mBlazing Fast UI Development with Compose Hot Reload
26mFlipper: A Debugging Platform for Mobile Developers
27mLeverage Compose Tooling to Improve Your Workflow
43mDebug Better in Android Studio
27mLeverage Compose Tooling to Improve Your Workflow
35mFlipper – the best darn Android development tool you’ve never heard of
32mBuilding a screen capture library for Compose