The State of Angular in 2019

A detailed overview of the current state of Angular, from the latest features to the hottest topics and trends that you may have missed

Photo by Guillermo Ferla on Unsplash

It’s that time of the year when conferences and events are happening all over the world and we are bombarded with an amount of information that is pretty hard to digest.

The Front End world is a never-stopping machine and we all know how hard it is not to stay behind. Watching all the conferences takes a lot of time, and quite understandably, most of us may prefer Netflix after a day at the office!

For these reasons, I want to help you decompress the information overload and give you an overview of the state of Angular in 2019 in a single post.

This is what we’re going to talk about in this article:

The current state of Angular

The latest features of the Framework

The latest topics and trends

Understanding some of the words you may see here and there but that you’re not actually very clear about (yet)

Tip: Use Bit (Github) to easily share and reuse Angular components across your projects, suggest updates, sync changes and build faster as a team.

Components with Bit: Easily share across projects as a team

Angular’s adoption is growing

According to the stats provided by the Angular’s current Engineering Manager Brad Green at ng-conf 2019, since last year Angular’s adoption has increased by about 50%!

It is undeniable that these stats may be inflated by the number of projects that are in the process of being upgraded from the older Angular 1.X, and yet that’s impressive growth.

Angular is not as fast-growing as Svelte or Vue and not as widely used as React, but opposite of what you’re likely reading on Reddit and Twitter, Angular is in a healthy state and is used by millions of developers and teams.

The Angular’s Ecosystem is large and thriving

Even if the framework is shipped with an incredible amount of tooling out of the box provided by the Angular team itself, the ecosystem provided by the community is incredibly large and high-quality.

We have all sorts of things that we can use with Angular:

Deep integration with awesome fast-growing tools such as Typescript and RxJS, which make Angular benefit indirectly as these tools make more and more progress

as these tools make more and more progress State management libraries of different flavors

Code Quality toolings, such as Codelyzer

UI libraries, Components, Directives, Pipes, etc.

Large IDE plugins repositories

Testing Frameworks and utility libraries

Last but not least, extensive documentation from both the community and the Angular team in regards to best practices, guides, tutorials, books, video-courses, etc.

In the next paragraphs, we will see a detailed overview of some of the best tools we can use in our Angular projects.

The deep integration with tools such as Typescript and RxJS make Angular benefit indirectly as these tools make more and more progress

Angular CLI

Updating is easier than ever

… and here’s proof

As neatly described by Mart Ganzevles, the BlueWeb project that server half a billion users every year has been upgraded from version 7 to version 8 in a day of work, compared to 30 days when upgrading from version 2 to version 4.

This is further proof of how great a tool the Angular CLI, which can boost our productivity to levels I had personally never experienced before.

It’s become quite difficult to imagine working without it nowadays.

Schematics

Angular Schematics are a feature you probably are using every day. For instance, I’m sure you use ng generate component my-component a lot. Yeah, that’s a schematic that is bundled with the CLI.

What you may not know, though, is that you could increase your productivity by creating your own schematics for pieces of code you repeat often.

Builders

Builders allow you to extend or augment existing commands. For example, you could create a builder to execute your tests with Jest and Cypress rather than Jasmine and Protractor or use a different Linter.

New and Exciting Features

At the time of writing, Angular recently shipped version 8 with various improvements and features.

Nothing that deeply affects how we use the framework, which most of the times is good news, but under-the-hood improvements that make Angular’s projects smaller and faster, improve the already awesome Developer Experience with the using the framework, and the almost-complete new renderer.

Differential Loading

The concept of differential loading is easier than its name would suggest. Simply put, the compiler will generate two bundles: one for browsers with modern capabilities stripped out of the polyfills needed, and one for older browsers.

The newest browsers will load the modern bundles, the older ones that need the polyfills will load the legacy bundles.

This is a big win, as most users are likely using the latest browsers, so we only ship the legacy browsers to a small subset of our users!

Web Workers

You probably have heard of Web Workers already so we’ll skip the whole introduction thing. What you may not be aware of though is how easy it has become to integrate your Web Workers with Angular thanks to its newest release. Take a look at the documentation!

CDK

The CDK is a set of tools released by the Angular Components team. They provide abstractions used by Angular Material but they are agnostic in regards to styling.

For example, you could use directives such as:

Drag and Drop

Auto-resizable text area

Overlay for your popups

Virtual Scrolling

The CDK is exceptionally useful as most apps could use well-done commonly used functionalities without having to use full, bloated, ad-hoc components. Angular Material is great, but you could implement your own components just by using the building blocks provided by the CDK.

Ivy Renderer

Ivy is an extremely exciting new in-progress development that will be shipped as the third renderer for Angular. It’s not quite here yet as it is not enabled by default, but you can opt-in and use it in your project since version 7. It will be shipped by default with Angular version 9.

What can you expect from Ivy?

Smaller bundles

Debuggable templates

Faster builds, faster tests

Lots of bugs fixed

Here’s a screenshot when I place a breakpoint in the Chrome console: