Pax Familia
Supporting PaxFamilia in migrating their Vue2 application to Vue3 based on a component library in Storybook
The Client
Abbove (formerly PaxFamilia) is a company based in Brussels that offers a financial planning platform under the same name.
Our Services
Frontend development
Training/Coaching
The Context
The platform was originally thought of as a patrimonial passport, developed for and in collaboration with a hundred wealthy families, to allow them to manage their assets without losing their peace of mind. When the word spread to financial advisors, the platform was adapted for them, adding powerful tools to the suite, while still granting the families access to their data. Now, after a successful case, and growing demand from the banking sector, Abbove is being adapted to cater to the needs of larger financial institutions too.
Strategy
The Challenges
The frontend of the web application changed a lot in a few years, having to be adapted to fit different profiles of customers. With time, those changes brought some technical baggage in the form of splintered small apps with different technologies powering them. The goal of our mission at Abbove was to bring those different technologies under one overarching technology, Vue3, with the help of Typescript for the added safety and a better developer experience.
Scope
The Solution
The plan to transition as smoothly as possible from a couple of decoupled Vue2 smaller apps in JavaScript to a single page application with TypeScript was three-pronged:
Learn about the new technologies
Migrate the existing codebase
Create an in-house, documented library of components
Different internal workshops were organized to keep the developers up to date with the latest features and changes of Vue3. Another workshop served as an introduction to Typescript, soon to be followed by hands-on mob programming sessions of live refactoring of parts of the codebase to TypeScript.
Regarding the migration, it started with swapping the build tool, Webpack, with Vite, considerably shortening wait times and offering a quick win for a better DX. Before updating Vue2 to its third version, the different dependencies had to be updated to ensure ongoing compatibility, sometimes requiring a total change of dependency when that compatibility was not present.
In parallel, we started working on an internal library of components, documented with Storybook, that would offer many advantages. Initially, the usual ones: having a centralized location to keep all UI components easily accessible by everyone in the company, while enforcing a style guide and a developer guide to writing Vue3 components, as components were extracted and refactored one by one, along with tests written for them.
It was also a solution that helped us circumnavigate the main blocking point of the migration: the lack (at the time) of combability with Vue3 of the UI library the components were based on. This allowed us to create useable components based on intermediary functional clones of that UI library that we re-created from scratch in Vue3. This way the development of the app could go on, while an eventual swap of those intermediary components to their full-featured equivalent in the UI library was still possible.
Mirahi is a trust-worthy and professional partner, they understood our specific needs and constraints. Our codebase migration to Vue3 and Typescript was a big challenge. Mirahi also helped us define and set up a robust architecture around implementing a component library and collaborative workflows with our design team. They managed it not only technically, but also while coaching our engineering team through tailor-made workshops.
)
Manuel Sousa, Pax Familia
VP Engineering
Manuel Sousa, Pax Familia
VP Engineering
Structure
The Results
There is now one single Vue 3 app for the platform, in a monorepo along with the component library.
With Mirahi's help we bootstrapped the web application development in the right direction of the migration towards Vue3, and now the team is confident about the architecture choice.
Manuel Sousa, Pax Familia
VP Engineering
Manuel Sousa, Pax Familia
VP Engineering
An idea to explore?
Drop us a line