Building a bridge between two framework versions

Jumbo’s site and app may look simple enough, but just the homepage alone holds more than 50 components that help shape and add content to elements like price tags, menus, and headers. Jumbo.com and its proprietary component library (Kompas) are built on the Vue framework. As everyone in IT knows; frameworks need to be updated every now and then.

Smaller updates usually pose little to no challenge, but it is the major versions that can take up a lot of time and resources. The site must keep working 24/7. So, a major, one-step leap from one version to the next, is out of the question. Marcelo Botega Fontana, Senior Frontend Developer and the frontend chapter @Jumbo Tech Campus oversee the challenging task of upgrading Vue from version 2 to version 3 They share their plans and progress on this unique transition.

One big breaking change

 “The main issue with moving from Vue 2 to 3 is the fact that the new version is basically one big breaking change.”, Marcelo explains. “A lot has changed, from the way templates are built to the way you code.” As a result, everything and everyone would have to move from Vue 2 to Vue 3 at the same time. Marcelo: “With that many users, components and projects using Kompas, that’s a definite no-go”. One of the options was to start working with two code bases, one for each Vue version. “But that would mean double the work, and that is never a good thing.”

Two versions

But staying on Vue 2 is not an option either. Marcelo: “Somewhere in the future, this version will be deprecated. So, we needed a way to make the transition, while keeping what we have until we are fully ready to switch to Vue 3. With that in mind, we started looking for options.”  When they discussed the ‘two code bases’ issue, developer Joseph Anson showed his colleagues the Vue Demi library; a tool that helps create universal libraries that can be used in both Vue versions.

The road to transition

Marcelo found out quickly how little documentation there was about transitions of this size and complexity. So, he tested the plan and created a proof of concept himself. With that, he convinced his colleagues to back his plan. All Kompas components would need to be converted to Composition API (Kompas uses the Options API) but having just one code base would make all that work worth it.

The transition plan is as smart as it is simple. Marcello explains: “For the time being, Vue 2 and Vue 3 will run alongside each other in two packages: Kompas and Kompas Next. Vue 2 components will gradually be converted to Composition API. That will make them compatible with Vue 3. After all the components have been converted and all the teams using Kompas have updated their projects to Vue 3, we will stop supporting Vue 2. This method will provide us with a seamless transition”. 

Marcelo and his colleagues can now convert components from Options API to Composition API. After the conversion, the components can be packaged for both Vue 2 & Vue 3. Using the same tools, they can also create new components that will work for both Vue versions.

The frontend chapter and the challenge

The Frontend developers @ Jumbo Tech Campus work according to a 70/30% schedule. 70% of their time goes toward tasks for their team and the rest goes towards side projects, those side projects can be anything and the frontend chapter is included on that. So now, every Friday, several frontend specialists take some time to work on converting components. “We’re really making progress. We have more than 100 issues to finish and last time I looked, we were at 70%. Considering the complexity and scope of this project, that’s quite amazing.”

Marcelo gets a real kick out of this challenge. “There is little information or support on this kind of update. You must want to really dig into the subject and find out a lot yourself. Add to that the fact that in this project, we must convert everything – where other frameworks have a more relaxed approach to upgrades – and you get an idea of the task we’re taking on here. For most of us Vue frontend developers, this was the first time being involved in a framework upgrade of this magnitude, with the introduction of the Composition API even the way we code changed. But that’s ok, we love a challenge. And in the end, we will have transitioned as smoothly as can be. With the disruption of our business kept to an absolute minimum.”

Let’s make IT amazing bij Jumbo Tech Campus.

 Join the team? Check out our vacancies!