Embracing Progress Part 3: Pulling the tablecloth

Introduction

In our previous post we tackled the challenges of moving to Vue 3 and touched on the work that had to be done and some of the work-arounds we had to put in place. In this post, we get to the fun part! How did we roll this out gradually to millions of people with no one noticing. That’s right, millions of users across over 70 different web shops had the code swapped out, a few hundred thousand at a time, with no modification needed on the part of our partners, technical integrators or customers. And what’s best, we could roll it back in a matter of seconds.

Bundling

If you remember from the previous post, probably the largest challenge was moving from vue-cli (webpack based) to vite (rollup based). This change probably had the biggest impact on what our code looked like. And I don’t mean our git hosted codebase, I mean our transpiled JavaScript library. Not only were the files generated completely different, but the entire module loading system had changed. Rollup doesn’t provide a module loader like webpack does, and so whatever the browser provides has to do all the work. This both simplifies and complicates things. Although building is much faster, and results in a smaller bundle, we wanted to be sure that almost all of our users can actually load said bundle. Because of this, we didn’t want to roll everything out all at once, and have to scramble to undo this or fix the resulting issues. We’re used to A/B testing features and having feature toggles in our system, but feature toggling an entire bundle is a different story!

Staged rollout

We opted for a staged/progressive rollout. Firstly, instead of relying on our deployment to roll things back if something went critically wrong, we decided to bundle our old deployment as part of this release. We replaced our old entry point with a new file of the same name, that simply loaded the old entry point, and in certain cases, loaded the new entry point.

The approach was as follows:

• Default to the old bundle
• If domain in list of explicitly enabled domains, use the new bundle. This list included our production test environment and test stores.
• If a random number is below a threshold value, use the new bundle. This enabled us to do a phased rollout, initially with 0% of our traffic using the new bundle.
• If the current loading product’s url contains a special parameter, use the new bundle.

This allowed us to roll things out at our own pace, such that we could monitor the errors. We could also manually test integrations that we know are a bit different/custom. Some of our partners have overridden CSS classes. Although we don’t officially support this, we also don’t want to break our customers’ integrations without giving them ample time to update their implementations. Good luck writing Unit tests for this! We did find several issues, all of which were fixed before increasing the rollout percentage. After we were happy that it was stable on our biggest partners, we put the dial to 20% and waited.

You get Vue 3, everybody gets Vue 3!

At this point, we were confident that things should go well, however a part of me still expected to hear something from one of our partners. What we got was…silence. Monitoring errors coming through, there were some, but nothing that we hadn’t seen before. The usual array of caching or very specific legacy browser issues. During that time, we patched anything that we thought needed fixing, and then after a few more days, turned the dial to 50%. A few more days later, and we’d still heard nothing. We spotted a few more very specific edge cases, resolved them, and kept waiting. During this time, we even improved our Snow effect and added a Rainbow effect behind the popup - both of which can be enabled in our partner portal. Finally in early January, we flipped the switch, and put it at 100%.

The new loader, not just in case of emergency

Although we didn’t need to use it, we still have the ability to immediately switch back to our old Vue 2 bundle. The custom bundle loader has enabled us to test new things that go beyond the usual feature flags, and can even allow us to build new PDP components, without our partners having to update their implementation at all! This also provides a tiny entry point, with only 1.2kb initial network transfer, with a grand total of under 130kb to load the Faslet Size Me Up button on the PDP and perform on product sizing. 

Conclusion

That wraps up this series on our migration to Vue 3. Not only did we pull out the tablecloth from under the dinner service, but we managed to put a newer tablecloth back in! One that not only provides us with a future facing code base, but also gives end users with a better user experience due to performance improvements and shorter load times. It’s a win-win situation!