During ng-conf in May 2019, the Angular team announced that they would be changing how Angular works under-the-hood: Ivy. Ivy is their new internal view rendering engine. It is the engine that uses your components and templates, and in the end, turns all the logic into instructions that run in the browser when you ship your finished Angular application. These instructions update the DOM, update the page, and so on.
Angular 9 was supposed to have a stable release in October/November, but was postponed because replacing the rendering engine is no easy task. But the wait is over, and Angular 9, and thus Ivy, is finally here! At my current client, we didn’t hesitate another second when it launched, and started upgrading. Let me tell you about how we approached this.
1. Upgrade all packages 📦
This is the most obvious one. We have to change all our dependencies to their newer versions. We opted out of using the ng update functionality, and created a new project instead to have a clean fresh start. According to the predictions from the Angular team, Ivy could reduce your bundle size by as much as 40%. For our application, the bundle size went down a whopping 58%! This change is so significant that it will definitely have a positive impact on the experience of our users.
2. Enable Strict Template Checking 🛂
Somewhat lesser known, but in your tsconfig you can enable strictTemplates . When set, it will verify that your component bindings are assignable to their Inputs and will also infer the correct type of $event in bindings.
When we enabled this, we were met with a bunch of compile errors that we had to fix. Sure, it was quite some work, but in the end it made sure our application was now more reliable than ever.
3. Upgrade our unit tests 💉
Angular 9 deprecated the TestBed.get method in the unit tests and replaced it with TestBed.inject. After updating this led to a decrease in time it took for our pipelines to finish. Also, it makes the mock object type-safe! Less bugs, is happy life!
4. Use an npm postinstall hook 🎣
Within our team we manage several applications that are bundled in our Angular CLI mono-repo. It turns out that Ivy, was not ready yet to perform parallel builds, which we do in our pipelines.
Setting a postinstall hook, made sure that we compiled our node_modules before we actually started building the applications. This not only sped up our builds, but also made sure that we could build them in parallel. For the curious, this is the script we use:
”postinstall”: “ngcc — properties es2015 browser module main — first-only — create-ivy-entry-point — async false”
5. We celebrate our success 🎉
We were the first team in the company to successfully upgrade all our applications, which are now all performing better than ever. The team took this opportunity to take a good look at how we do things, cleaned up our dependencies, streamlined our processes, and reached great results.
We have less wait-time during development, our pipelines run smoother, and the strict typing reduces the chance we introduce bugs.
As you can read, upgrading went relatively smooth. I’d like to think that this is partly because of “Improvement Day”. During each sprint we take one whole day on which we don’t focus on the work within the scope of the sprint, but we work on maintaining our infrastructure, and groundwork. These days make sure we always upgrade our dependencies, removed deprecated features, get rid of technical debt, and prepare for upcoming releases of the frameworks and tools we use. But the most driving factor of our success is mainly due to the expertise, focus, and determination of our team!
Who am I?
My name is Arjen Brandenburgh. I’m a senior frontend engineer and consultant working as Technical Lead for Techspire in the Netherlands. Working in the frontend field for almost 10 years and still loving it every single day. My main expertise lies with Angular. As a true geek I love to expand my knowledge and am proficient with Python, Ruby on Rails and AWS.
Do you think you have what it takes to work with us? At Techspire we’re looking for people who love technology as much as we do, and are looking to push themselves to expand their knowledge. Also, we love beer.
