What about Angular? Angular JS history through the years (2009-2019) An extensive recap of the latest four years of Angular JS development: relevant milestones, new features, architecture improvements, optimizations, and so on

If dealing with the path followed by Microsoft and .NET Foundation in recent years might not be an easy task, things aren't going to get better if we turn our eyes to the client-side web framework known as Angular, which went through an extremely significant series of structural changes over the past four years.

In order to understand what happened there, we have to go back 10 years, when JavaScript libraries like JQuery and Mootols were dominating the client-side scenes, the first client-side frameworks such as Dojo, Backbone.js, and Knockout.js were struggling to gain popularity and reach wide adoption, and stuff like React and Vue.JS didn't even exist.

GetAngular

The story of AngularJS start in 2009, when Miško Hevery (now Senior Computer Scientist and Agile coach at Google) and Adam Abrons (now Director of Engineering at Grand Rounds) were working at their side project, an end-to-end web development tool that would have offered an online JSON storage service and also a client-side library to build web applications depending on it: to publish their project they took the GetAngular.com hostname.

During that time Hevery, which was already working at Google, was assigned to the Google Feedback project with 2 other developers: together they wrote more than 17,000 lines of code during 6 months, slowly sinking into a frustrating scenario of code bloat and testing issues. Given the situation, Hevery asked his manager to rewrite the application using GetAngular, betting that he could do that alone within 2 weeks: the manager accepted and Hevery lost the bet shortly thereafter, as the whole thing took him 3 weeks instead of two; however, the new application had only 1,500 lines of code instead of 17,000. This was more than enough to got the Google interest for the new framework, which was given the name of AngularJS shortly thereafter.

AngularJS

The first stable release of AngularJS (version 0.9.0, also known as dragon-breath) was released on GitHub in October 2010 under MIT license; when AngularJS 1.0.0 (aka temporal-domination) came out on June 2012, the framework had already achieved huge popularity within the web development communities worldwide.

The reasons for such extraordinary success could be hardly summarized in few word, but I'll try to do that nonetheless by emphasizing some fundamental key selling points:

• Dependency Injection. AngularJS was the first client-side framework to implement it: this was undeniably a huge advantage over the competitors, including DOM-manipulating libraries such as JQuery. With AngularJS the developers could write loosely coupled and easily testable components leaving to the framework the tasks of creating them, resolving their dependencies, and passing them to other components when requested.
• Directives. These can be described as markers on specific DOM items such as elements, attributes, styles, and so on: a powerful feature that could be used to specify custom and reusable HTML-like elements and attributes that define data bindings and/or other specific behaviors of presentation components.
• Two-way data binding. The automatic synchronization of data between model and view components: when data in the model changes, the view reflects the change; when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.
• Single-Page Approach. AngularJS was the first framework to completely remove the need for page reloads. This provided great benefits at both server-side (fewer and smaller network requests) and client-side level (smoother transitions, more responsive experience) and paved the way for the Single-Page Application pattern that would be also adopted by React, Vue.JS and the other runner-up frameworks later on.
• Cache-Friendly. All the AngularJS magic was meant to happen on the client-side, without any server-side effort to generate the UI/UX parts; for this very reason, all AngularJS websites could be cached anywhere and/or made available through a CDN.

Angular 2

The new release of AngularJS, released on September 14, 2016 and known as Angular 2, was a complete rewrite of the previous one, entirely based upon the new ECMAScript version 6 (officially ECMAScript 2015) specifications. Just like the ASP.NET Core rewrite, the "revolution" brought such a number of breaking changes at architectural level, HTTP pipeline handling, app lifecycle, state management, that porting the old code to the new one was nearly impossible: despite keeping its former name, the new Angular version was a brand-new framework with little or nothing in common with the previous one.

The choice of not making Angular 2 backward compatible with AngularJS clearly demonstrated the intention of the author's team to adopt a completely new approach: not only in the code syntax, but also in their way of thinking and designing the client app. The new Angular was highly modular, component-based, comes with a new and improved dependency injection model and a whole lot of programming patterns its older cousin never heard of.

Here's a brief list of the most important improvements introduced with Angular 2:

• Semantic Versioning. Angular 2 is the first release to use semantic versioning, aka SemVer: a universal way of versioning the various software releases to help developers track down what's going on without having to dig into the changelog details. SemVer is based on 3 numbers -- X.Y.Z -- where X stands for a major version, Y stands for a minor version, and Z stands for a patch release. More specifically: the X number, representing the major version, gets incremented when incompatible API changes are made to stable APIs; the Y number, representing the minor version, gets incremented when backward-compatible functionality are added; the Z number, representing a patch release, gets incremented when backward-compatible bug are fixed. Such improvement can be easily underestimated, yet it's a must-have for most modern software development scenarios where Continuous delivery (CDE) is paramount and new versions are released with great frequency.
• TypeScript: If you're a seasoned web developer, you probably already know what TypeScript is. In case you don't, let's just say that TypeScript is a Microsoft-made extension of JavaScript that allows the use of all ES2015 features (like Default-Rest-Spread Parameters, Template Literals, Arrow Functions, Promises & more) and adds powerful type checking and object-oriented features during development (such as class & type declarations): the TypeScript source code can be then "transpiled" into standard JavaScript code that all browsers can understand.
• Server-Side Rendering: Angular 2 comes with Angular Universal, an open-source technology that allows a back-end server to run Angular applications and serve only the resulting static HTML files to the client.  In a nutshell, the server will render a first pass of the page for faster delivery to the client, then immediately refresh with client code. SSR has its caveats, such as requiring Node.js installed on the host machine to execute the necessary pre-rendering steps, as well as having the whole node_modules folder there, but can greatly increase the app's response time for a typical Internet browser, thus mitigating a known AngularJS performance issue.
• Angular Mobile Toolkit: A set of tools specifically designed for building high-performance mobile apps.
• Command-Line Interface:The new CLI introduced with Angular 2 could be used by developers to generate components, routes, services and pipes via console/terminal commands, together with simple test shells.
• Components. These are the main building blocks of Angular 2, entirely replacing the controllers and scopes of AngularJS and also lifting most of the tasks previously covered by the former directives: application data, business logic, templating and styling of an Angular 2 app can all be made using components.

Angular 4

On March 23, 2017 Google released Angular 4: the number 3 was skipped entirely in order to unify all the major versions of the many Angular components which had been developed separately until that date -- such as Angular Router, which already was at version 3.x at the time. Starting with Angular 4, the entire Angular Framework was then unified into the same MAJOR.MINOR.PATCH SemVer pattern.

The new major version brought a limited number of breaking changes, such as: a new and improved Routing System, TypeScript 2.1+ support (and requirement), and some deprecated interfaces and tags. There was also a good amount of improvements, including:

• Ahead of Time compilation. Angular 4 compiles the templates during the build phase and generates JavaScript code accordingly. That's a huge architectural improvement over the Just in Time mode used by AngularJS and Angular 2, where the app was compiled at runtime -- i.e. when the application starts: not only the app is faster, since the client doesn't have to compile anything, but it throws/breaks at build time instead of during runtime for most component errors, thus leading to more secure and stable deployments.
• Animations NPM package. All the existing UI animations and effects - as well as new ones - have been moved to the @angular/animations dedicated package instead of being part of @angular/code: a smart move to give non-animated apps the chance to drop that part of code, thus being much smaller and arguably faster.

Other notable improvements included: a new form validator to check for valid e-mail addresses, a new ParamMap interface for URL parameters in the HTTP Routing module, better internalization support, and so on.

Angular 5

Released on 1st November 2017, Angular 5 featured TypeScript 2.3 support, another small set of breaking changes, many performance & stability improvements and a couple of new features, such as:

• New HTTP client API. Starting from Angular 4.3, the @angular/http module was put aside in favor of a new @angular/common/http package with better JSON support, interceptors and immutable request/response objects and other stuff. The switch was completed in Angular 5 with the previous module being deprecated and the new one recommended for use in all apps.
• State Transfer API. A new feature that allows to transfer the state of the application between the server and the client.
• New set of Router Events for more granular control over the HTTP life-cycle: ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckStart, GuardsCheckEnd, ResolveStart and ResolveEnd.

Angular 6

Released on April 2018, Angular 6 was mostly a maintenance release, more focused on improving the overall consistency of the framework and its toolchain than adding new features. Therefore, there were no major breaking changes. RxJS 6 support, a new way to register providers, the new providedIn injectable decorator, an improved Angular Material support (a component specifically made to implement material design in Angular client-side UI), more CLI commands/updates, and so on.

Angular 7

Angular 7 came out in October 2018 and it definitely was a major update, as we can easily guess by reading the words written by Stephen Fluin -- Developer Relations Lead at Google and prominent Angular spokesman -- on the official Angular development blog upon the official release:

Here's a list of the new features:

• Easy upgrade: Thanks to the groundwork made with version 6, the Angular team was able to cut the steps that need to be done to upgrade an existing Angular app from an older version to a most recent one. The detailed procedure can be viewed by visiting  https://update.angular.io website, an incredibly useful Angular upgrade interactive guide which can be used to quickly recover the required steps -- CLI commands, package updates and so on -- that needs to be done to upgrade an existing Angular app from an older version of Angular to a most recent one.
• CLI prompts: The Angular command-line interface has been modified to prompt users as when running common commands like ng new or ng add @angular/material to help developers discover built-in features like routing, SCSS support and so on.
• Angular Material & CDK: Additional UI elements, such as: Virtual scrolling, a component that loads and unloads elements from the DOM based on the visible parts of a list, making it possible to build very fast experiences for users with very large scrollable lists; CDK-native Drag and drop support; improved drop-down list elements; and more.
• Partner launches: Improved compatibility with a number of third-party community projects, such as: Angular Console, a downloadable console for starting and running Angular projects on your local machine; AngularFire, the official Angular package for Firebase integration; Angular for NativeScript, an integration between Angular and NativeScript -- a framework for building native iOS and Android apps using JavaScript and/or JS-based client frameworks; some interesting new Angular-specific features for StackBlitz, an online IDE that can be used to create Angular & React projects, such as a tabbed editor and an integration with the Angular Language Service; and so on.
• Updated dependencies: Added support for TypeScript 3.1, RxJS 6.3, and Node 10, although the previous versions can still be used for backward-compatibility.

Angular 8

Last, but not least, we came to Angular 8, which has been released on May 29, 2019 and is currently the most recent version. The new release is mostly about Ivy, the long-awaited new compiler/runtime of Angular: although being an ongoing project since Angular 5, version 8 is the first one to officially offer a runtime switch to actually opt-in into using Ivy -- which will arguably become the default runtime starting from Angular 9.

Other notable improvements and new features include:

• Bazel support: Angular 8 supports Bazel, a free software tool developed and used by Google for the automation of building and testing of software: it can be very useful for developers aiming to automate their delivery pipeline, as it allows incremental build and tests and even the possibility to configure remote builds (and cache) on a build farm.
• Routing: The Angular router now accepts a new syntax to declare the lazy-loading routes, using the import() syntax from TypeScript 2.4+ instead of relying on a string literal: the old syntax has been kept for backward-compatibility, but will be arguably dropped soon.
• Service Workers: A new registration strategy has been introduced to allow developers to choose when to register their workers instead of doing it automatically at the end of the app's startup lifecycle; it's also possible to bypass a service worker for a specific HTTP request using the new ngsw-bypass header.
• Workspace API. A new and more convenient way to read and modify the Angular workspace configuration instead of manually modifying the angular.json file.

The new version also introduced some notable breaking changes -- mostly due to Ivy -- and removed some long-time deprecated packages, such as @angular/http, which was replaced by @angular/common/http since Angular 4.3 and then officially deprecated in 5.0.

• The ASP.NET Core Revolution - .NET Core history through the years (2016-2019)

Print Friendly & PDF Download