Written by Giancarlo Buomprisco. Published originally on "Bits and Pieces"

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

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

• 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 w*e 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:

As you can see, the ngForOf directive gives us information about what’s being passed as value.

Angular on Mobile

Ionic

Ionic is a framework for building mobile applications. While the core components are written using Stencil, they provide abstractions you can use with Angular (and other frameworks).

NativeScript

NativeScript a React Native-like framework for building native mobile applications. Although they also provide support for Vue and plain Javascript, it offers deep integration with Angular. Unfortunately, my experience with it was not awesome and I don’t personally put it on the same level as React Native, but you should give it a try if mobile is your thing.

Testing

Jasmine & Protractor

Although they need no introduction, Jasmine and Protractors and the testing frameworks shipped by default with Angular. They’re battle-tested, updated and work amazingly with Angular.

Jest & Cypress

Testing Angular with Jest and Cypress has become possible thanks to the new custom Builders provided with the Angular CLI.

Jest is a unit-testing framework based on Jasmine, developed at Facebook. It is the de-facto framework for testing React projects and it is widely appreciated for its speed. Many folks prefer it to Jasmine in overall, so if that’s you, you can now use it!

Cypress is a highly regarded E2E testing framework and is getting a lot of love all around, and for good reasons. It is not dependent on Selenium or Webdriver, allows for time traveling through a commands log, allows for network traffic control, and promises more consistent results that don’t randomly fail.

Angular Testing Library

Angular Testing Library is a set of utilities to test UI components in a user-centric way.

That means this library encourages you to never use your components programmatically and test the behavior by doing actions your users would do.

For instance, you won’t use:

myComponent.onClick();

But instead, you’ll simulate the click as a user would naturally do:

const { getByText, click } = await render(CounterComponent, {

    componentProperties: { counter: 5 }

});

click(getByText('+'));

State Management

NgRx

NgRx is a Redux-inspired state management library and likely the most used in the Angular community. As the name suggests, it is heavily reliant on RxJS streams.

NGXS

NGXS is an alternative library that also brings Redux-like state management to Angular. Compared to NgRx, NGXS makes heavy use of classes and decorators in order to reduce the boilerplate, and this aspect may be the most important one for choosing one between the two if classes are your thing.

Akita

Akita is a state management library provided by the company Datorama also based on RxJS, and compared to the previous two it can be also used for non-Angular projects, which can make your code more reusable in the long run.

Just… RxJS?

Yes! Depending on whether you like Redux libraries or whether your projects needs a state-management library at all, you may as well build services that store state with RxJS Subjects!

UI Component Libraries

Storybook

StoryBook is not a UI Component library but a tool that allows you to build components in isolation and gives us an easy way to explore all the components and their variations.

It’s an awesome tool for which I envied React developers for a long time, but we can now use it and it’s hard not to recommend using it.

Angular Material

The infamous Angular Material is back at it and brings an even more beautiful set of components for the newest version of Angular.

Backends for Angular

Firebase

Firebase is an application development platform owned by Google and, as a result, ships a first-class library Angular Fire that uses the power of RxJS Observables for streaming data, making the integration with Angular deep and seamless.

GraphQL

You may think that only the React community has the pleasure of working with GraphQL… and you may be wrong. The Apollo library is also available for Angular and provides an awesome alternative to Firebase if you prefer working with GraphQL.

NestJs

NestJS is a Node Web Framework for building server applications, and as you may see from the examples, is deeply inspired by Angular’s core concepts, such as Modules, Controllers, Pipes, etc. If you like Angular, then you’ll probably like NestJS too.

If you use Nx Workspaces, setting up a full-stack application with Angular and NestJS is only one command away!

Final Words

In summary, Angular has an incredibly high-quality and rich ecosystem.

Of course, I could not mention dozens of libraries and tools that I admire, otherwise, this post would have been endless. But I hope this article can give you an overview of the current state of Angular and the potentialities that could potentially power your next project.

If you need any clarifications, or if you think something is unclear or wrong, please leave a comment!

If you enjoyed this article, follow me on *Medium* or *Twitter for more articles about Angular, RxJS, Typescript and more!*