Microservice architecture has become ubiquitous for many software engineering teams. This approach to building software promotes maintainability and interoperability of the many components required 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 the 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 tool has its own “micro” user interface, built within its repository and deployed in its container alongside the backend services in our Kubernetes cluster. Separating these tools into their universes makes it simple to quickly respond to developer feedback and enable new features as we build and maintain these tools.
Streamlining Product Development
Developer Hub, our central developer tooling portal, highlighting our common navigation (on the left)
While we build these tools separately, we want to ensure that the user experience across them is uniform. To achieve this, we use several 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. 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
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 possible. 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 reduces the time required for an engineer to move a new tool from inception to deployment.
Simple GUIs over CLIs
EZ-Deploy, our internal deployment tool, showing an example of the “state of the world” on deploy
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 tend to hide information. For example, our deployment process often requires deploying multiple separate resources one after another, making it essential 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 we tackle at WHOOP daily.
If you are interested in building infrastructure at WHOOP, check out our open positions.