Microservice architecture has become ubiquitous for many software engineering teams. This approach to building software promotes maintainability and interoperability of the many different components it takes to produce a product. At WHOOP we apply the same microservice principles when building the user interfaces for our internal developer tools, opting for small-footprint, individual UIs built on top of our microservices. This allows us to streamline developer workflows, while limiting downtime and hiccups for any individual tool.
Our Developer Tooling
The Application Infrastructure team (App-Infra) at WHOOP maintains a number of common developer tools that enable developers to deliver features to customers as quickly as possible. Our tools enable application configuration and deployment, control rollout of features, and manage topics in Apache Kafka. We build the user interfaces of these tools with the VueJS web framework, which offers us a progressive framework that is straightforward to bootstrap and simple to develop and scale. Each of these tools has its own separate “micro” user interface, built within its own repository and deployed in its own container alongside the backend services in our Kubernetes cluster. Separating these tools into their own universes makes it simple for us to quickly respond to developer feedback and enable new features as we continue to build and maintain these tools.
Loosely Coupled Unity
While we build these tools separately, we want to ensure that the user experience across them is as uniform as possible. To achieve this, we use a number of common components and libraries across all of our UIs, such as BootstrapVue and CoreUI Vue. We have additionally developed an internal Vue component library, enabling a consistent design and shared navigational interface across our tools. We create documentation for these components using Vue Styleguidist, making it straightforward for anyone creating a new UI to integrate them into their project. All of our efforts on this front allow us to create and maintain tools that are deployed and developed independently, but appear to be part of one consistent user interface, simplifying the user experience for developers.
Simple Bootstrapping
In order to minimize the amount of time our backend engineers spend building and maintaining frontend code, we strive to simplify the bootstrapping process as much as we can. To achieve this, we use GitHub’s Template Repositories, which allows us to provide boilerplate code that can be used to bootstrap a micro UI with our preset common components and repository structure. This drastically cuts down the time required for an engineer to move a new tool from inception to deployment.
Simple GUIs over CLIs
For the majority of developer tools, App-Infra has opted for web-based graphical user interfaces over command line interfaces. CLIs, while offering a native environment to develop, push, and deploy code, also have the tendency to hide information. For example, our deployment process often requires deploying multiple separate resources one after another, making it important that a developer understand the “state of the world” in our production environment when they deploy. With a GUI, it is much easier to view the state of interdependent services when deploying, reducing the chance of unintended consequences when releasing a new version of code.
As our engineering team continues to grow at WHOOP, we want to ensure that developers are never blocked by bugs or downtime in any tooling, or by inflexible release and configuration processes for applications. As we continue to provide new features to our customers, we also want to ensure that any new technologies we adopt can easily fit into existing workflows in our tools. Focusing on these “Micro UI” principles when creating our tooling allows us to provide the best possible developer experience, giving our engineering team the leverage to solve hard engineering problems that we tackle at WHOOP every day.
If you are interested in building infrastructure at WHOOP check out our open positions.
