Angular - a short overview

After writing a bit about Vue and its web components I think it's only fair to take a look at its main competitors and their web components as well. Of these, two popular frameworks stand out: Facebook's React and Google’s Angular. For now I’ll focus on Angular and don't worry, React will get it's time to shine in a later piece. Let’s start with a bit of a background on Angular’s direct predecessor, AngularJS.

AngularJS

Angular started out in 2010 as AngularJS, a JavaScript based frontend framework maintained by Google. It extends HTML vocabulary and helps developers quickly build web applications. AngularJS’s main focus was on single-page applications, apps which interact with the user by dynamically rewriting the web page with new data, instead of the usual approach of reloading the entire page from the server. While still popular and widely used, for example by the likes of Paypal, Netflix and Snapchat, AngularJS is getting phased out next year. Covid related issues have forced a six month extension of the long term support phase, but it will only last until december 31st 2021 and everyone is expected to migrate to Angular.

Source: angularjs.org

Angular 2+

Angular dropped the ‘JS’ with the release of version 2, currently its on version 11. Each version signals a major update, comes out every 6 months and gets 6 months of active support followed by 12 months of long term support. The main disadvantage of Angular is that it's considered to have a much steeper learning curve than React or Vue. The biggest obstacle here is learning TypeScript and RxJS, but consistent updates also mean you’ll need to keep up with new things added. The payout though is probably worth it, as Angular is a complex tool with a lot of useful features:

• Consistency: Angular benefits from having Google’s support which means consistent updates, long-term support and a seamless updating process. Code maintainability makes moving up to a new version as simple as writing one command and Angular and all related packages are updated at the same time,
• Modularity: Angular’s modular nature makes it easy to divide code into modules called buckets, reusable chunks of code which can reduce both the time and effort needed for development. The community is also a great help here and provides a variety of those ready for use,
• TypeScript: Angular uses TypeScript a superscript for JavaScript, this ensures higher security and provides additional features (primitives, interfaces, enums etc.) However it is an additional language to learn which contributes to the steep learning curve of the framework,
• Declarative UI: Angular uses HTML for creating templates. It’s a declarative language used because of its scalability, innate intuitiveness and being less complex than JavaScript. This means you won't have to invest a lot of time in program flows and planning what loads first, all you need to do is map out what is needed and the framework will do the rest.

Source: angular.io

Turning it up to 11

As mentioned above the team behind Angular aims to release a major version every six months. The current version is Angular 11 released on November 12th and it brings a bunch of new features and improvements. Let's look at a few of those:

• Operation byelog: With 11s release the team has triaged and resolved their (quite sizable) backlog and fixed a ton of issues. The major news is the commitment to triage all new issues within two weeks,
• Performance and TypeScript 4.0 support: Angular 11 is significantly faster, NGCC (the Angular compatibility compiler) is now two to four times faster. The new release also brings TypeScript 4.0 support which means additional features and faster compilation times,
• Experimental Webpack 5 support: Webpack 5 was released recently with some major changes so the support is opt-in and experimental, by default Angular 11 still uses Webpack 4 and will soon probably support both,
• Automatic Inlining of Fonts: A quality of life improvement, the Angular CLI will now automatically download and inline fonts that are being used or linked to in the application.

Along with the updates Angular also maintains a really detailed roadmap for features in progress of being implemented and those planned on being implemented in the future. If the features described here didn't convince you or you’re simply looking at what’s next for Angular head on over there and check it out. As previously with Vue, next time we’ll take a look at directives, which are basically Angular’s version of web components, so stay tuned and see you next time.