Meet Jewel — Create IDE plugins in Compose (with Chris Sinco)

Jetpack Compose is the declarative UI toolkit for Android that makes it easy to create beautiful, responsive apps. However, until recently, there was no easy way to use Compose to create IDE plugins without too many compromises. Jewel is a new library that solves this problem by providing a set of tools and components that make it easy to create Compose for Desktop-based plugins for Android Studio and IntelliJ IDEA.

In this talk, we will introduce Jewel and show you how to use it to create your own IDE plugins. The session will cover the following topics:

* Why Compose makes a huge difference in IDE plugin development
* How to set up Compose in your IDE plugin project
* What's Jewel, a library implementing the IntelliJ themes and a composables
* What are the tradeoffs in using Compose and Jewel
* Case studies of existing implementations
* What's the future for Jewel and Compose as a plugin UI framework

This talk is intended for Android developers who are familiar with Compose but have never created an IDE plugin because they don't wanna learn Swing. By the end of this talk, you will have a good understanding of how to use Jewel to create your own Compose-based IDE plugins.

Transcript

1. Sebastiano Poggi Chris Sinco @seb@androiddev.social @csinco@androiddev.social Meet Jewel Create IDE plugins in Compose
3. IntelliJ Platform plugins
4. IntelliJ Platform Plugins
5. plugins.jetbrains.com/docs Gradle plugin Platform APIs Swing
6. Anyone knows Swing in here?
8. Sure, you could.
9. Sure, you could. But.
10. Sure, you could. But. Obsolete model Little documentation No community & support API didn’t age well Prevents best practices
11. Multiplatform What about using Compose?
12. Compose Multiplatform Supports Desktop and iOS and web
13. Supports Desktop (and iOS and web) Compose Multiplatform
14. Supports Desktop (and iOS and web) Works in the IntelliJ Platform Modern and easy to use Why isn’t it already being used? Compose Multiplatform
15. Material Design? Compose Multiplatform
19. Not optimized for desktop Not consistent with IntelliJ Material Design? Compose Multiplatform
20. Introducing Jewel !
21. Jewel is a Compose for Desktop implementation of the IntelliJ New UI design system Int UI. Built on Compose Foundation Limited to desktop for now
22. Jewel is a Compose for Desktop implementation of the IntelliJ New UI design system Int UI. Built on Compose Foundation Limited to desktop for now Check it out!
25. Jewel was born out a hackathon at JetBrains, spurred by the Toolbox team.
26. Jewel has three parts.
27. Jewel has three parts. Core Foundation (components, styling primitives) Int UI theme Standalone theme of the IntelliJ New UI Swing bridge Bridge to the IntelliJ Platform for IDE plugins
28. needs special tricks Running in the IDE
29. The Bridge™
30. How? Mostly reverse engineering
31. How? Not trivial! Mostly reverse engineering
32. How? Not trivial! Mostly reverse engineering Replicate IJP magic
33. How? Not trivial! Mostly reverse engineering Replicate IJP magic Reuse over reimplement
34. How? Not trivial! Mostly reverse engineering Goal: consistency Replicate IJP magic Reuse over reimplement
35. How? Not trivial! Mostly reverse engineering Goal: consistency Replicate IJP magic Reuse over reimplement Specs ! implementation
36. How? Not trivial! Mostly reverse engineering Goal: consistency “Swing compat” mode Replicate IJP magic Reuse over reimplement Specs ! implementation
37. How? Not trivial! Mostly reverse engineering Goal: consistency “Swing compat” mode Replicate IJP magic Reuse over reimplement Specs ! implementation
38. expect breaking changes Whatever Cancel Warning The Jewel library is not prod level yet. Do you still want to use it?
39. expect breaking changes
40. expect breaking changes No API stability yet Immature tooling Missing features
41. Don’t run away yet!
42. Demo time!
43. Looking forward
44. Package Search
45. Studio Bot
46. Android Profilers
47. What’s happening NOW Piloting with several teams Across JetBrains and Google Working with IntelliJ Platform Supporting Jewel and Compose for Desktop
48. What’s happening LATER Focus on core Stabilize API, complete v1 catalog
49. How to get started kotlinlang Slack #jewel channel GitHub github.com/JetBrains/jewel
50. Why Jewel Better DevEx  Better UX Modern language and ecosystem Ability to iterate and debug faster Higher UI fidelity and quality
51. Thank you. Sebastiano Poggi Chris Sinco @seb@androiddev.social @csinco@androiddev.social