A legacy UI
Around 2020, we started to rethink the UI of our leading product. It was a multi-page application, based on jQuery.
The main drawback of this approach is that the app is not divided into components, code from one page cannot be reused on another page and leads to code duplication, different styles and behaviours between pages and difficult maintenance.
In addition, on each page, the code is an endless list of functions, not grouped and isolated by components, each of which calls the others, producing the well-known spaghetti code.
Tests were performed completely manually, on the whole page, without unit tests for individual components.
React apps
To solve our problems, taking advantage of new technologies, each page was turned into a React app. In the end, we had as many React apps as pages before.
We had the components!
The unit and integration tests!
A UI Library
Now, another problem had arisen, maintaining the same UI and UX by sharing components between apps.
We evaluated three solutions:
- sharing of components by Bit.dev
- direct import of a repo
- using a private NPM package
Bit.dev is interesting, with a lot of features, but we were sceptical about using an external service and then we didn’t want to have individually shared components with different versions.
On the other hand, importing a repo would have required having a sub-repo within each project. The complexity of configuration and maintenance did not convince us.
In the end, having a private NPM package suited our needs. We had all the components in one package with a single version that could be easily imported.
A private NPM package
In order to use a private NPM package, we configured our cloud with the following things:
- a repo containing the UI Library
- a private NPM registry to host the package
- a release pipeline to create and publish the package from the repo
It was 2021, all React apps were updated with the UI Library and it worked like a charm.
A Design System
In order to harmonise all app styles, we proceeded by establishing style guides for spacing, typography, colour palette, etc.
At the end of 2021, Our Design System was born.
App themes
Other company projects had been based on our UI Library and Design System, but they needed other colour palettes, fonts, etc.
Therefore, we included the theme configuration in the UI Library.
At the beginning of 2022, we have three themes.
Conclusion
I hope you find this story useful if you are on a similar journey or if you simply want to explore it in the future.
What do you think about our choices?
Would you have made them differently?
Please, let us know in the comments!
