Angular is undeniably one of the most popular and widely used open-source web app frameworks of all time. Developers across the world choose Angular as their preferred framework for building web apps. Google released Angular in 2016, and since then, developers the world over have migrated to this robust framework.
Presently, developers in huge numbers use Agular, and they are always waiting for the next update to see what the improvements and features the Angular team has added to the platform. The people have not disappointed their community of developers with the latest rollout of Angular 8.
The release of Angular 8 has come with its most talked about feature, which is a renderer named Ivy. All through this post, we are going to review in detail what the new Angular 8 is going to offer and especially take a look at Ivy and its contribution to the entire framework’s functionality and efficiency.
With this new release, Angular comprises of a set of new and powerful tools and features that developers are going to appreciate. The incorporated the features in more than one level, and they include, the core framework, CLI, and Angular Material library.
Angular 8 has enabled various partner launches that include: Angular Console (a console to run Angular projects on your system), StackBlitz (an online IDE for Angular), NativeScript (a framework for building native mobile apps with angular) and AngularFire (for the integration of Firebase with Angular).
Now let’s dig into the details of what Angular 8 has to offer developer “nation.”
Differential Loading of Modern JavaScript
Like most buzzwords in the tech industry, “differential loading” is outright blurred regarding its meaning. In simple terms, differential loading means sending the newer and flashier code to newer browsers and more stable legacy code to legacy browsers.
Starting with Angular 8 and moving forward, CLI will produce separate bundles for legacy (ES5) and the new JavaScript bundles (ES2015+), which is going to be part of the overall building process. This results in a boost in loading speed and time to interactive (TTI) for newer browsers.
Some of the notable features of differential loading include:
• Create optimized bundles for newer browsers.
• Create legacy bundles for outdated browsers.
• Ensure the browser loads the right set of bundles
• Automate the process by facilitating a CLI extension.
Angular Ivy
For over a year now, the Angular team has been mentioning the state-of-the-art Ivy renderer they’ve been at task building. The team has on several occasions talked about Ivy and more so written about it, but until now we have not seen its release. Well, this is about to change.
The Agular team just announced they would include Ivy in Angular 8 as a preview with the option to opt-in. Countless developers, we anticipate the final release, but unfortunately, they won’t be getting it with the release of Angular 8. However, a preview is better than nothing, and this will allow the developers to test it out with their Angular applications to see how well they work or do not with Ivy.
Whether you are familiar with Ivy or not, and you care about the user experience of your apps, then Ivy is something you should consider. This is because Angular apps tend to be quite heavy especially in regards to file size and memory use; however, the framework has made remarkable improvements in runtime speed and file size since the Angular 2 time.
The main focus of Ivy is to change all this. In comparison to the current Angular View Engine, Ivy offers the benefits outlined below to the user:
• Rebuild times are a lot faster.
• There is a decrease in payload size, so it takes browsers less time to download and parse your applications.
• The code the Angular compiler generates is much easier for humans to read and understand.
• There’s better checking of template types, so it’s easier to catch errors while building and preventing users from experiencing it during runtime.
To top it off, Angular Ivy aims to be predominantly compatible with Angular applications that are already in existence. The idea is that you will be able to get the benefits Ivy has to offer without necessarily changing up your apps. As expected, bugs and issues will be present. So there is the need to build your current apps using Angular 8 and Ivy.
You are bound to encounter errors, and when you do, you will have the chance to inform the Angular team so they can rectify the problem. If the issue is on your part, the team will offer you advice on what to do or change so you can continue to enjoy Ivy and its benefits. Ivy still lacks in a couple of areas, in particular internationalization and Angular universal support are still not fully compatible. This means that if your app has support for multiple languages and uses server-side rendering, then don’t have your hopes up about it working with Ivy, not yet.
There is another feature that seems to be posing some problems to Angular users and its Angular Material. Apps that utilize Angular Material seem not to be faring very well with Angular 8 according to the latest beta of Angular 8. Angular Material is without a doubt going to receive the necessary updates to ensure it works properly with Ivy, but for now, you need to be aware of this when experimenting with Angular 8.
Opt-In Usage Sharing
Angular 8.0 is poised to include opt-in telemetry in its CLI, and the team at Angular has done this to align their efforts with the needs of the community. This feature will enable Angular 8 to collect anonymous data such as commands and build speed, but this is only possible if you allow it. The information collected is intended to assist Angular to understand better how developers use Angular 8, so they can, in turn, make it better in the future.
Support for typescript 3.4
By introducing Angular 8, the use of Typescript 3.4 has been mandated hence making it imperative to update your current version of Typescript without failure.
Such an update might seem irrelevant but will prove to be very helpful while you generate clean and readable JavaScript codes.
Angular router backward compatibility
Upgrading of large applications will be more comfortable as they have included the backward compatibility mode.
This feature will simplify the team’s process of moving projects to Angular by allowing lazy loading of Angular JS app’s parts using the $route APIs.
Support for Web Worker in Angular 8
Another small but significant feature in Angular 8 is an improvement in the support for web workers bundling with the Angular CLI. If by any chance you are not familiar with web workers then what you need to know is they are an essential innovation in front-end development which makes it possible to weed out work that is CPU intensive to a different hardware thread. This feature is incredible news for developers on the front-end because before this, apps have been limited to using only a single thread.
There is, however, a catch to the web workers feature, which is: the code that runs in the worker cannot be in the same JavaScript file with the rest of the application. This negatively affects the working of tools such as the Angular CLI that want to bundle your JavaScript into as few files as possible. Angular CLI’S web worker bundling has seen improvements in Angular 8 that will get rid of such incompetence and put you onto a path of fully parallel web worker happiness.
Bazel
Bazel, which is a build tool and capable of working in almost all language inputs, has made building applications very easy. It’s a tool that is commonly used by Google and has a variety of benefits that include:
• It brings gains on the rebuild times by allowing tests and incremental builds.
• Bazel allows you to declare tasks easily with a precise output or input and ensure that only the necessary tasks run.
• There’s a very high possibility of gaining cache and remote builds on build farms.
• You can use the same tool to build the front and back-end of applications.
Conclusion
It’s clear that other than Ivy, the Angular 8 updates are not that big. This is not to say that they are insignificant, but they aren’t crucial to most applications. If you are thinking of trying out the Ivy preview, an official Angular Ivy guide is available to direct you on all there is to know about the feature.
Considering all you’ve read about Angular 8, the big question you need to ask yourself is, “is it worth upgrading to Angular 8?” My answer to this question is a definite yes. You should upgrade your apps to Angular 8.
This is because your apps will most likely work the same way they do currently without any glitch, and with the added ability of differential loading, you are poised to achieve better performance at no extra cost.
Most importantly, upgrading to Angular 8 will ensure you are ready for Ivy and all it has to offer once the final release comes out. For now, Ivy is only in preview mode, but it’s the right time to start testing out your apps to check how compatible they are.
It’s better to find out how compatible your apps are with Ivy before it becomes the default in future rollouts of Angular such as 9 or 10 and they drop the legacy Angular View Engine.
So go ahead and upgrade and see what the buzz is all about.