In 2021 we started to modernise our technology stack. Last fall you could already notice this when we updated our company website and refreshed Academy.
This spring we will take the next step with a new frontend. In this article we provide some technical background on this change.
Where we come from
Originally websites used only HTML. This was pretty static. To write a web application, instead of a website, you could use JavaScript on the frontend. The problem with that is, that you need to write everything from scratch and the developers are responsible for the structure themselves.
Around 2010 JavaScript Frameworks became popular. They help to keep a good structure and code faster. Dovetail used one of the first frameworks: Backbone. This always supported us to create a stable frontend.
In the last years Backbone was superseded by new frameworks like React, Angular and Vue. They load content in a more dynamic way. That’s why we started using React to dynamically load some of the Dovetail components.
Developers
Last year we decided to migrate completely to React. Backbone, as its name implies, is the backbone of a frontend application. How do you replace a backbone? We decided to do it step by step.
Lucas Leite and Flyn Heijmans were the lead developers on this project. We spoke with them about the challenges in this project and how they managed to overcome these.
Their first approach of the project was dividing all the parts of the Dovetail application into manageable chunks to be implemented step by step. Flyn explains; ‘for the Flow Designer we decided to first focus on the left and right panels, and take on the middle panel after that.’.
Rebuilding the frontend in React was more than just a building project, it took a lot of research as well. Lucas: ‘Our first aim was to rebuild what we had in Backbone. Once we have that, we can use that as our jumping off point for improvements.’
Flyn Heijmans
Both building and testing were extensive tasks. Everything that was built needed to be tested. However these were all first time tests, so there was no testing protocol or plan. Lucas and Flyn resolved this through thorough manual testing.
Lucas Leite
Whenever they saw an opportunity to incorporate an improvement, they did. Flyn explains: ‘We tried improving functionality where possible to make it user friendlier, for example by adding error tooltips to table cells that show the error to the user more clearly. Previously only the cells were shown in red without an error message’.
During the entire project Lucas and Flyn were looking out for code refactoring possibilities to keep code clean and concise. Lucas: ‘We did not want to create duplications, and where possible we aimed for simplifying the used logic. Also, some of the logic that was used in Backbone was not applicable, usable or necessary within the React frontend.’
Flyn concludes: ‘I am happy with the general improvements of the whole application, it feels a lot nicer to interact with now. The application is smoother, faster (for example, switching pages or loading flows), and a lot more user friendly than it was before. I am also pleased with how the Flow Designer turned out, especially with the canvas being boundless now.’
The new release
Releasing Dovetail with the React frontend was done in steps as well. First we migrated the Flow Manager (4.12.0) and then the Tenant Manager and Instance Manager (4.13.0).
We saved the biggest migration for last. In Dovetail 4.14.0 we will migrate the Flow Designer. A release candidate is expected in April.
For Dovetail finalising the migration is an important step to have a solid frontend for the coming years. On top of this we can develop new functionality.
The first one we introduce with 4.14.0 is the new canvas. This is an infinite canvas, as Flyn mentioned. Integration specialists now can design their flows without the limits of the current canvas.
