Angular 7, a new era of framework
Google released the next version of javascript popular framework, angular 7 which already arrived with many changes, significant updates & many new features.There are some very interesting new tooling changes as well as some great features to improve performance.
Angular 7 new features
CLI Prompts
The Angular team has consistently focused on improving the tools available to developers and the new CLI prompts are no different.
Usually when we run commands like ng new or ng add, it’s a single pass.If we forget to include routing then by skipping the installation just run ng new “myNewApp” then a prompt will be generated for adding route.
If we want to add different stylesheet format then CLI will offer to select between CSS,SCSS,SASS,LESS and more.
The great features is that it is customizable just add schematic.json using this we can tell CLI which prompt to execute.
Application performance
Angular 7 is even faster than previous versions. The upgrade is faster (less than 10 minutes for many apps according to the official announcement), the framework is faster, the virtual scrolling CDK module detailed above makes apps run with better performance.
Here is where things get interesting: Angular is not only dedicated to making the framework as small as possible, it’s also dedicated to making your apps as small as possible. They’ve corrected a common production mistake where the reflect-metadata polyfill is included in production. V7 automatically removes it.
New projects are also now defaulted using Budget Bundles which work to notify you when your app is reaching size limits. By default, you get warnings when you reach 2MB and errors at 5MB.
And when you need a little more space, just jump in your angular.json file and adjust as necessary.
“budgets”: [{
“type”: “initial”,
“maximumWarning”: “2mb”,
“maximumError”: “5mb”
}]
Virtual Scrolling
As many mobile frameworks have started to make the move toward dynamically loading data such as images or long lists, Angular has followed suit by adding the ScrollingModule to allow for virtual scrolling. As elements gain or lose visibility, they are virtually loaded and unloaded from the DOM. Performance is greatly increased to the user’s eyes. Next time you have a potentially large list of items for your users to scroll, stick it in a cdk-virtual-scroll-viewport component and take advantage of the performance boost!
Drag & Drop Functionality
Now you can remain entirely within the Angular Material module and implement drag and drop support including reordering lists and transferring items between lists. The CDK includes automatic rendering, drag handlers, drop handlers and even the ability to transfer data.
Dependency Updates In Angular 7
TypeScript 3.1 support
Angular 7 have updated TypeScript version from 2.7 to 3.1 which is it’s the latest release. It’s compulsory to use TypeScript latest version while working with Angular 7. Usually Angular lags a few releases behind, so they have done that to match latest TypeScript version for once.
RxJS 6.3
The latest version of RxJs(version 6.3.3) is added in Angular 7 with it new exciting additions and changes. These changes provide developers a boost in performance and easier to debug call stacks and improvement in modularity also making it as backward compatible as possible.
Added Support for Node v10
Team Angular 7 now support the Node V10 with backward compatibility as well.
How to update to Angular 7
To update latest version of CLI & Material, simply run the single command:
ng update @angular/cli @angular/core
If you are using angular material, just follow with this command:
ng update @angular/material
Conclusion
Summing up all the above features, Angular v7 looks like a much more accessible solution focused on the modern technological trends added features like bitcoin mining, Virtual scrolling, drag-drop, Angular material and many more, still no word on Ivy in a current version. Angular Team has done some great job for making Angular better. If you are planning on implementing your own solution based on the web & mobile technologies, make sure to consider Angular 7 as the efficient, up-to-date development framework.