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:
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.
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:
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
… and here’s proof
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.
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 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.
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.
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!
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!
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:
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 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?
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.
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 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.
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.
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 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('+'));
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 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 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.
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!
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.
The infamous Angular Material is back at it and brings an even more beautiful set of components for the newest version of Angular.
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.
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 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!
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!
#angular #angular-js #web-development