Building an IDE with Compose Multiplatform
Since September 2021, we’ve been building on a vision: we wanted people developing with TypeDB to have a better integrated development environment.
This time last year, our existing graphical interface for TypeDB only allowed for the running of simple queries. We wanted to replace it with something expansive that gave our users a top-down view of their entire database. Building this product, an integrated development environment (IDE), is no mean feat. We had to find a flexible, multiplatform user interface (UI) framework that could handle what members of the TypeDB community were going to throw at it.
Goodbye Electron…
There are a few UI frameworks that fit this description and are very popular choices right now, the most notable of which is Electron. We built our previous UI, Workbase, on Electron with Vue.js but found it did not scale well with the complexity of the application.
When searching for a new framework there were, naturally, a lot of considerations to make and constraints to meet. We wanted to be able to use a language that had strong support for multithreading and a sensible build system, and JavaScript doesn’t quite fit the bill compared to a more mature language such as Java. Java has concurrency and type safety at the heart of the language and uses them as guiding principles, rather than having been added iteratively at a later stage. As such, using these features during development is easier and makes for a smoother experience.
There are, of course, things about Java that are not ideal. Principally, it is quite verbose. Also, the type system is far from perfect: for example we’d rather avoid the infamous ‘null’, a “Billion Dollar Mistake”. The various UI frameworks for Java are also fairly old (e.g. Swing released in 1998, JavaFX released in 2008) and haven’t been brought up to speed with the latest in modern UI development.
While we were looking for solutions to this dilemma, we came across a new kid on the block.
Hello Compose Multiplatform!
First, there was Jetpack Compose, which was created by Google for building interfaces for Android applications. Jetpack Compose follows a declarative design model akin to Vue and Angular and has the ability to make intelligent choices about which parts of the UI to ‘recompose’ based on changes to the underlying state of the program. Then came Compose Multiplatform, the result of collaboration between Google and JetBrains, the creators of our favourite IDEs like IntelliJ IDEA. We loved Compose Multiplatform for bringing the latest UI development patterns used in creating Android applications to the desktop.
Another key advantage of Compose Multiplatform (as well as Jetpack Compose) is that it is written in Kotlin. Kotlin is both more concise and has stricter, more expressive typing and elegant null safety features whilst still allowing us to leverage the maturity and architectural elegance of the JVM and all Java code that has been written for it previously. Kotlin is also fully integrated with our existing build system, Bazel, which was very important to us. This killed two birds with one stone — we’ve found a framework we love and also solved our Java woes.
Here’s a small taste of how well Compose Multiplatform, Jetpack Compose and Kotlin work together: if you want to define a Row with text you can do so using:
Row {
Text(“Hello world!”)
}This takes advantage of the fact that when the final argument of a Kotlin function is another function, it can be passed between curly brackets separate from the preceding arguments. When building larger applications with Compose Multiplatform and Jetpack Compose, you’ll appreciate that the simple things are made simple.
While Compose was in early alpha at the time that we began development, we bet on its rapid maturation and have been very happy to see the progress since. We’re extremely grateful to the team at JetBrains for their tireless efforts in bringing Jetpack Compose to the Desktop.
What We’ve Built
Built upon the shoulders of Compose Multiplatform, TypeDB Studio emerged: a comprehensive IDE for TypeDB. It enables end-to-end development of TypeDB databases, database queries and data exploration via a clean and intuitive UI.
If you’re not familiar, TypeDB is a strongly-typed database with a rich type system. TypeDB enables developers to tackle complex problems by allowing you to model your domain based on logical and object-oriented principles (for an introduction to TypeDB, see this presentation.). You may notice parallels between TypeDB’s philosophy and the platforms we chose to build Studio upon — you need strong platforms to build good software.
As many software engineers will be painfully aware, one of the most important aspects of software design is reducing the effort of maintenance by keeping the complexity of programs to a minimum. Leveraging Compose Multiplatform, we’ve been able to continually build features for TypeDB Studio exactly how we want them while managing the overall complexity and keeping the maintenance workload low.
Here are just a few features of TypeDB Studio we’ve built using Jetpack Compose and Compose Multiplatform:
- A rich text editor and query runner with syntax highlighting.
- A force-graph visualiser based on d3-force that makes the structure of data immediately apparent to developers.
- Tools to manage databases and their schemas.
- Many TypeDB-specific features such as explanation of inferred concepts.
None of these came for free or were provided to us by libraries. This might surprise you, but Compose Multiplatform is a very young framework, getting its first Alpha release in August 2021 compared to Vue.js which launched in February 2014.
Complex components like rich text editors and force-graph visualisers take time to build and mature. Nevertheless, we found designing and creating them a pleasure, and are confident other developers will find the same as Compose Multiplatform and Jetpack Compose have been built with extensibility and composability at their hearts. A robust core codebase allows for robust community-built components.
Come check it out!
This is just what we think, and there’s no need for you to take our word at face value — we are an open-source company and as such, if you’re interested, you can contribute to and read the source code of TypeDB, which Studio requires in order to empower you in modelling your data and creating useful databases. TypeDB and TypeDB Studio are licensed under AGPLv3, so you’re also free to make use of everything we’ve built in your own programs as long as you publish your code too!
If you enjoyed this article, you might fit in with us at Vaticle.
