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

hugo mercier
Oct 21, 2020 · 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.

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.

What did we expected from the migration ? Why migrate ?

The most important announced features of Angular V9 were :

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.

Breaking changes

i18n

  • regression with i18n attribute on custom elements😥

Unit Testing : custom optimization is not required anymore !👌

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.

No more custom Decorators 🤐

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

Measurements

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

  • 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)
  • 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.

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