Chambéry, November 22th 2023
Members of the Dalibo team have been working on a rewrite of the UI (Javascript/CSS) part of PoWA web, to make it more up-to-date with current frameworks.
As some of you already know, PoWA is a project that initialy came to life at Dalibo. After some of the main contributors left the company, it was decided that the project would belong to a dedicated organization and the gouvernance would be held by the independant PoWA team.
This didn’t mean that Dalibo was going to stop contributing to the project. Quite the opposite, in fact. And today, we are proud to give you some details about an important work that a few people at Dalibo have been working on for several months: a complete rewrite of the User Interface with modern frameworks.
Was a rewrite really worth?
Grumpy people would say that, in the web sector, new fancy frameworks are created almost every day. And the trends also evolve quickly, which makes it very hard to follow. They may not be completely wrong.
When it was created, PoWA was relying on Backbone.js for the JavaScript, Foundation for the CSS and Bower as a package manager.
Even if they are still maintained, those projects are not active anymore and more importantly only a few people still use them. Which may make the maintenance or evolution of projects relying on them difficult. Bower does even recommend migrating to other solutions.
Because of that, contributing to the project was becoming very painful and insecure even for changing a small part of the user interface. And I’m not talking about fixing potential bugs or adding new features.
How it all started?
With that in mind, in July/August 2019 I decided to give the switch to new JS/CSS frameworks a try. At that time, I was already using VueJS and Bootstrap for other projects I was working on, and was very happy with them and Bootstrap for other projects I was working on.
Even though I was not used to the way Backbone.js was working, I quickly had promising results by doing some reverse engineering and replacing it with the combination of VueJS 2, Bootstrap, and WebPack at that time.
A long process
In October 2019, I had 80% of the work done. However, other projects were given priority, and I left this initial work untouched for almost 2 years. Moreover I knew that the remaining 20% would probably require 80% of the total time. Nevertheless, it was very frustrating to leave it unfinished and I kept hoping to finish it one day.
In July 2022, I took a coworking session outside my home office as an opportunity to relaunch this project. Of course, after 2 years, things had evolved and I revised some of the choices initialy made… And I’m convinced it was a good idea.
Then in December 2022, with the invaluable help from Marion Giusti and Pierre-Louis Gonon, we pushed forward to a new conclusive step.
The finishing touches and adjustments happening during Spring and Summer 2023, we submited a huge merge request that has been accepted recently after a careful and thorough review from Julien Rouhaud.
The result
Here’s the detail of which frameworks are now used:
| previously used | → | replaced by |
|---|---|---|
| Backbone.js | → | Vue.js |
| Foundation | → | Vuetify |
| Bower | → | Vite |
| Rickshaw | → | D3JS |
Among the numerous improvements, we can mention:
- overall better looking user interface,
- improved responsiveness and performance perception,
- light / dark mode,
- easier to use date range selector.
Here’s what it looks like (previous version on the left for comparison):
When will it be available?
This work has not yet been merged into the master branch so it’s not available for production use. However, last week, it was integrated in the process for an upcoming version 5, which we hope to release in the next few weeks.
Stay tuned!
What’s next?
With more modern and more familiar frameworks, we are more confident to improve the usability, integrate new components, rearrange the layout. We (the PoWA team) already have enhancements / evolutions in mind.
We also hope that more contributors will be interested in joining the project.
Aknowledgements
I would like to thank Ronan Dunklau for building the initial version of the UI for PoWA and imagining an architecture that separates the backend from the UI as much as possible, and has a clear separation of the model from the data. I think that the concept of the dashboard with nested widgets was a very good idea. We kept it and it still works very well. Back-end contributors don’t have to worry about what happens on the client side when they want to add a new table or chart.
Thanks also go to Julien Rouhaud for his patience, support, and very useful reviews throughout the process.
Thanks to my colleagues Marion and Pierre-Louis.
And finally thanks to Dalibo for giving us the opportunity to contribute to this nice open-source project.
