Angular Ivy migration, a contrasted feeling, this is not what we expected !

hugo mercier
Oct 21 · 4 min read
Image for post
Image for post

Introduction

This article is a feedback of our Angular Ivy migration. It won’t be opinionated, but rather following a pragmatic method. We will detail the process, the breaking changes and the final measurements.

We started 3 years ago in Angular V4 (first article), the migration from V8 to V10 was definitely the most impacting and the most exciting !

A bit of context : what is our application ?

This is the funnel that allows the visitor to enter his personal information to apply for a loan.

We customize the experience and the translations for the each country, so we build 10 packages, one per country (France, Italy, Spain, Portugal, Germany) and per device type (desktop, mobile). As a result, we have a French desktop funnel, a French mobile funnel, an Italian desktop funnel, and so on.

The Funnel handles around 20K visitors per day. It brings a major part of the company revenue.

What did we expected from the migration ? Why migrate ?

The most important announced features of Angular V9 were :

🚀 Faster build times (with a more incremental compilation)

🔥 Smaller build sizes (with a generated code more compatible with tree-shaking)

🔓 Unlocking new potential features (fullTemplateTypeCheck, lazy loading of component instead of modules, new features for i18n)

🧪 Faster unit testing

When and How we Proceeded ?

We created a dedicated branch to start the update in April, to quickly identify any breaking changes. We dedicated up to 5 hours per week for this migration. We regularly merged the master branch into this branch to keep the latest updates.

In the end, it is only during summer holidays, with some team members in vacations, that we were able to focus on the migration for a whole week, without being disturbed with merging new features into the master branch.

Breaking changes

  • regression with i18n attribute on custom elements😥

The retrieval of the `i18n-xxx` attribute on a custom component is broken. The attribute value was null inside the custom component.

To fix this, we introduced a function getI18nAttributeValuein the custom component. This function is called during ngOnInit and it ensures that, at this life-cycle hook, the attribute is not null anymore.
In 9.0 version, Angular moved the build-time i18n substitutions later in the build process, which probably caused this regression.

  • inner text is now mandatory🤔

In a template, we had :

With V10, the content of the span is not replaced by the translation value.
As a result, we are forced to put a text in the span :

Until Angular V9, for each component related unit test, the component was recompiled so we were spending ~75% of you time re-compiling components for testing purposes. So we were able to use this optimization to only reconfigure the current test suit to prevent angular components compilation after every test run.

Thanks to Angular V9, this optimization isn’t required anymore. It actually becomes harmful to keep it. TestBed does not recompile components between tests unless a component has been manually overridden, which allows it to avoid recompilation between the grand majority of tests.

becomes

The custom decorators are not working using AoT and Ivy. So we had to find a dirtier solution for our decorators :

There is an open issue but even if a solution will be available soon, we already removed our decorators by implementing the logic in an abstract class.

Measurements

We ran the application build several time to be able to obtain average features.

  • Build Time 38% decrease 😀
  • Unit test run time : 15% increase 😑
  • total artifacts size (before gzip) 😶
    V8 27.3 MB (feature modules : 928 KB)
    V9 27.2 MB (feature modules : 785 KB)

We set up a scheduled cron job to run node lighthouse against the website to measure the end-user impact.

  • speed index : no impact 😶
  • time to interactive : 13,5 s to 12 s 😉

Conclusion

For our users there is no visible impact, but for us the build time improvements make a world of difference.

When using a framework like Angular, not following the version update is not an option if we want to ensure maintainability as the time passes, so no regret but we hope that the future will be brighter.

There is no magic. You can’t expect for huge improvements from a framework update, you always have to challenge yourself. For us, I am sure that the biggest improvement regarding build time will done on our side by migrating from an application built 10 times to a multi-tenant application. Thanks to the new i18n features, it will help to achieve this.

YounitedTech

Le blog Tech de Younited, où l’on parle de développement…

Thanks to Arnaud TAMAILLON, Slim Ayache, Etienne Delattre, and Nicholas Suter

hugo mercier

Written by

YounitedTech

Le blog Tech de Younited, où l’on parle de développement, d’architecture, de microservices, de cloud, de data… Et de comment on s’organise pour faire tout ça. Ah, et on recrute aussi, on vous a dit ?

hugo mercier

Written by

YounitedTech

Le blog Tech de Younited, où l’on parle de développement, d’architecture, de microservices, de cloud, de data… Et de comment on s’organise pour faire tout ça. Ah, et on recrute aussi, on vous a dit ?

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store