One of the most popular Javascript frameworks - Angular has finally released it’s latest Angular 8 version on 23 May 2019. The latest release of Google’s Angular framework has bought several attractive features that made Angular 8 unique compared to its previous versions. In this blog, we will discuss the top 10 Angular 8 features & updates.
History of previous angular’s versions
If you previously know the history of Angular versions & features, or if you only want to focus on Angular 8, please skip this part and move on to the next – Angular 8 features.
Angular is one of the most popular front-end JavaScript framework comparing React & Vue.js for web app development. Its first version was released in 2009 and It has been around for the past 10 years, and since then, it brought an impressive list of changes and improvements.
The first version of the framework was launched in 2009 known by AngularJS. Though it was completely not a perfect framework back then, majorly due to its large bundle size, complicated debugging issue, dependency injection stops to work after minification of code, performance issues, and other technical problems.
The competition was tough so Google’s engineering team make many changes to their framework have added really powerful libraries and new features like AOT, tree-shaking to make it better for every AngularJS Development Company. Angular 2 was completely rewritten it's not an upgrade of version 1. It was released with Typescript which is a superset of JavaScript introduced by Microsoft and chosen by the Angular team for development. Typescript is a great way to write javascript. Angular 2 introduced Hierarchical Dependency Injection system as everything is a class in Angular, so DI is achieved via a constructor. The compiler was updated and used to optimize the production of template-rendering, which help the code to execute at the maximum speed in JVMs.
The main reason behind skipping version 3 was to avoid confusion as the core Angular libraries was live on one single GitHub repository at @angular/angular with versioned the same way but distributed as different NPM packages causing misalignment of the router package’s version that was already distributed as version 3.3.0 so team decided to skip version 3 and move ahead with Angular v4 which aligned all the core packages and help avoid confusion in the future.
With view-engine enhancements and code generation reductions in Angular 4, applications consumed less memory and they run quicker than their previous versions. Angular Universal was introduced as the core Angular Module which makes it easy to import the functions from the library.
Angular team has introduced progressive web apps support to their Angular version 5 to get the features of native mobile applications with the mobile web apps along with improvements & enhancements in Material Design & added build optimizer that makes the application lighter and faster by removing the unnecessary run-time code.
The main updates in Angular 6 were ng update, Bazel Compiler, Service Worker Support, Angular elements, CLI Workspaces, Animations Performance Improvements, ng add, and Angular Material + CDK components.
The Angular 7 version is primarily focused on the Ivy project but they have not introduced ivy in their angular 7 and talking about other major changes like new CLI, ScrollingModule, DragDropModule, major performance tweak by removing reflect-metadata polyfill which automatically included in the production and by adding Budget Bundles by default which will notify you when your app is reaching size limits. Angular 7 updated to typescript 3.1, RxjS 6.3 and added Node 10 support.
Features & Updates of Angular 8
Angular 8 has arrived and with it a bunch of workflow and a new set of powerful features that Angular developers will appreciate like the core framework, Angular Material library, and the Command Line Interface. They have enabled major launch partner as Angular Console for running Angular projects, #angular/fire for integrating Firebase with Angular, StackBlitz integrated IDE and NativeScript for building native mobile apps with Angular. let’s go over and summarize what are new features introduced in Angular 8 as well as how upgrading your Angular 7 apps to Angular 8.
Preview of Ivy
If you have been following Angular then you probably encountered the word “Ivy”. Ivy is a major change in Angular history, it an angular renderer which is radically different from anything as it uses incremental DOM. It changes how the framework internally works, without changing our Angular applications. The Ivy project is basically rewriting the Angular compiler and runtime code in order to reach
- better build times ( incremental approach)
- better build sizes more compatible with tree-shaking
- new potential features like lazy loading of component instead of modules
Angular Ivy works
The key idea behind Incremental DOM is every component gets compiled into a series of instructions. These instructions create DOM trees and update them in-place when the data changes.
@Component({
selector: 'todos-cmp',
template: `
<div *ngFor="let t of todos|async">
{{t.description}}
</div>
`
})
class TodosComponent {
todos: Observable<Todo[]> = this.store.pipe(select('todos'));
constructor(private store: Store<AppState>) {}
}Will be compiled into:
var TodosComponent = /** @class */ (function () {
function TodosComponent(store) {
this.store = store;
this.todos = this.store.pipe(select('todos'));
}
TodosComponent.ngComponentDef = defineComponent({
type: TodosComponent,
selectors: [["todos-cmp"]],
factory: function TodosComponent_Factory(t) {
return new (t || TodosComponent)(directiveInject(Store));
},
consts: 2,
vars: 3,
template: function TodosComponent_Template(rf, ctx) {
if (rf & 1) { /** create dom*/
pipe(1, "async");
template(0, TodosComponent_div_Template_0, 2, 1, null, _c0);
} if (rf & 2) { /** create dom*/
elementProperty(0, "ngForOf", bind(pipeBind1(1, 1, ctx.todos)));
}
},
encapsulation: 2
});
return TodosComponent;
}());The template function contains the instructions rendering and updating the DOM as they are rendering engine.
Two main concepts of IVY
- Tree shakable: It means removing unused pieces of your code, the framework does not interpret the component. Instead, the component references instructions. If it doesn’t reference a particular instruction, which will never be used so we can omit the unused instruction from the bundle results in smaller bundles and faster load times.
- Low Memory Footprint: Incremental DOM doesn’t need any memory to rerender the view if it doesn’t change the DOM so it allocates the memory when the DOM nodes are added or removed. since most of render/template calls don’t change anything result in huge memory savings.
Differential Loading
Angular 8 apps will now be more performant, thanks to Differential Loading of Modern JavaScript. With differential loading, new apps generated by Angular CLI will now contain separate bundles for legacy JavaScript (ES5) and modern JavaScript (ES2015+).
The correct bundle will be loaded automatically by the browser & will be able to download smaller, more efficient app bundles that load and render faster.
Angular Router Backwards Compatibility
Angular 8 feature added backward compatibility mode to Angular router that helps to upgrade the path for large projects and will make it easier to move to Angular by allowing lazy loading parts of Angular v1.x apps using $route APIs.In simple word, we will be able to upgrade our Angular 1.x apps to Angular 2+ right away.
Improved Web Worker Bundling
Thanks to Angular CLI 8, web workers are included while building the production bundles which are essential for improving the parallelizability and helps increase the performance. Angular 8.0 is thus adding building support to CLI which provides one bundle for every web worker.
ng g webWorker <name>Bazel Support
One of the new features of Angular 8 is the possibility to build your CLI application with Bazel. The Angular framework itself is built with Bazel.
It is available as opt-in, it is expected to be included in @angular/cli in Version 9.
Bazel key advantages are:
- We will be able to build our backends and frontends with the same tool
- Faster build time The first build will be painfully slow, as Bazel is aiming for exactly reproducible builds but concurrent builds will be a lot faster & it will be beneficial if your app uses several modules and libraries.
- Incremental Build: Codebase will only trigger the smallest rebuild possible help to build and deploy only what has changed rather than the entire App.
- You can eject the Bazel files, they are hidden by default.
- The possibility to have remote builds (with cache) on a build farm
Lazy Loading
Lazy loading is based on the concepts of Angular Routing as it helps bring down the size of large files by lazily loading the files that are required. In previous angular versions, the route configuration uses the property @loadChildren which accepts a string and if there was a wrong module name or any typo while writing the code, Angular would not consider it wrong and accept whatever value was there as a string until we try building it.
So to overcome that they have added support for dynamic imports in router configuration in latest Angular 8 which enable the use of import statement for lazy loading the module and this will be understood by the IDEs, webpack etc.
Now Editor will understand what's this syntax and will recognize if there is some mistake and we won't have to wait till build time to realize about an error.
To keep their efforts in alignment with the community’s needs Angular CLI will be gaining another new feature i,e opt-in usage sharing. This feature will enable opt-in to sharing telemetry about your Angular CLI usage with the Angular team and now Angular 8 can collect data like commands used and the build speed if users allow them which will help developers improve in future.
CLI workflow improvements
The Angular CLI is continuously improving, and now the ng-build, ng-test and ng-run are equipped to be extended by 3rd-party libraries and tool.
For Example: AngularFire
Builders API
The new version allows us to use Builders API. It uses builders for main operations like: serve, build, test, lint and e2e. Basically, the builder Builders are functions that implement the logic and behavior for a task that can replace a command which you pass to the createBuilder() method from @angular-devkit/architect package & now we can create our custom builders as well.
import { BuilderOutput, createBuilder } from '@angular-devkit/architect';
export default createBuilder((options, context) => {
return new Promise<BuilderOutput>(resolve => {
resolve({ success: true });
});
});AngularJS API Migration Improvements with $location service
The Angular Team wants to provide support for all developers using AngularJS to upgrade them with latest Angular so some enhancements have been made to provide better integration with the AngularJS $location service in hybrid (AngularJS <=> Angular) apps. A new package angular/common/upgrade is added help you
- To retrieve the state from location service.
- To track all location changes.
- Help you retrieve hostname protocol port search properties which were available in AngularJS.
- MockPlatformLocation API added to test the location service.
Service Worker
Angular ships with a service worker implementation Starting with version 5. With the Angular Service Worker and the Angular CLI built-in PWA support angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs and can achieve native-like application download and Installation.
Updated Typescript to 3.4.x
In the newest version of Angular 8, they have updated Angular’s dependencies which include tools like RxJS and TypeScript to v3.4 ( Angular 7 uses v3.2) and new apps generated via the Angular CLI will also use the newest version of TypeScript by default.
Angular Firebase
Angular have officially added support for firebase and now we can deploy our application using the Angular CLI.
ng run [PROJECT_NAME]:deployDeprecated APIs and Features
Angular aims to balance innovation and stability in their framework and to do that they have removed or replaced some features & API'S so that Angular can stay updated with latest practices, changing dependencies, or changes in the platform itself.
To make these transitions easy they deprecate APIs and features for a period of time before removing them which provides developers time to update your apps to the latest APIs and best practices.
- Web Tracing Framework integration
@angular/platform-webworkerand@angular/platform-webworker-dynamicboth the packages are deprecated- Usage for any in TesBed.get
- Removed deprecated DOCUMENT from
@angular/platform-browser - @angular/http removed from the list of packages
- ngForm element selector
- Service worker versionedFiles
Angular Performance & Upgradation from Angular 7 to Angular 8
Angular 8 new features are nice, but the main reason for many of us to upgrade to new versions of Angular 8 is to get a performance boost. If you worked with previous angular versions then upgrading an app from Angular 7 over to Angular 8 is simple.
For most developers, one command should take care of this update :
ng update @angular/cli @angular/core <name>>Final Thoughts on Angular 8
Summing up all the above features, The Angular team has certainly did a great with the framework making developers job much easier & simpler. Angular version 8 looks like a much more accessible solution focused on the modern technological trends added features like Ivy, route configurations use dynamic Imports, new builder API in the CLI, web worker support, Unified Angular Location Service & with every new release, the framework is getting smoother and smoother making the Angular platform better.
No comments:
Post a Comment