Deployment Descriptors Editor

About the Client

In November 2018, I joined a company called Camunda. Their primary specialty is everything related to business processes. One of their main products is a BPMN Engine and a JavaScript modeling library called bpmn-js (both open-source).

Since joining, I have been part of a team of 6 people responsible for building Cawemo (short for Camunda Web Modeler). Imagine it like a combination of GitHub and Visio: a place in the cloud to create, manage, and design business processes. Through plugins and connections with other Camunda products, these processes can then be integrated with the automated workflow engine.

Technical Details

During the latest installment of hack days at Camunda, I teamed up with a colleague who had the great idea of making the complicated and unintuitive configuration of the Camunda BPMN Workflow Engine available through a UI. Currently, the configuration can only be done in YAML files on the server, with poor documentation without further examples.

I created a design from scratch based on Camunda's Corporate Design. The goal was to provide a clean, simple, self-explanatory, and functional UI that assisted the user but also didn't stand in the way.

My framework of choice was React without any other libraries. I stuck to React's state management and used only functional components. The frontend communicates through REST APIs with a backend, like making changes or reading the current configuration. My colleague built the Java backend, providing me with JSON that the front end could consume and display.

While I finished the UI on day one, the interesting part started when I implemented relations between different engine properties. I also had to take care of different input types, validation, default values, etc. Overall, the final result turned out better than I expected and got featured during our final presentation and, later on, even at CamundaCon.