New features and updates in Angular 8
Why versioning and releases:
The term “versioning” refers to the practice of creating and supporting multiple releases of the same product each one of them possessing the same general function but are upgraded and customized from the previous releases. For example, multiple versions of the same operating system such as Windows 8, Window 9 and Windows 10 - all of which having the same general purpose but are improved versions from its predecessors. In other words, the version numbers denote the level of changes that are introduced by the release.
In Angular:
The developers behind the most popular and in-demand technologies are continuously working to improve the user experience as much as possible, and Angular is no different. According to the Angular release guide, this is what the Angular community believes in and promises to be working in the near future as well.
“We recognize that you need stability from the Angular framework. Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Angular to thrive.”
In Angular, the version numbers have three parts: major.minor.patch. For example, version 8.2.11 indicates significant version 8, minor version 2, and patch level 11. Let’s have a look at what these terminologies mean and consist of.
Terminologies:
- Major release: It is when incompatible API changes have been introduced. It usually comes with crucial new features like API changes, and whenever you update to a new major release, you’re supposed to run update scripts, refactor code, learn new APIs and run additional tests. You may need some but minimal developer assistance during the update.
- Minor release: It is when functionality is added in a backwards-compatible manner. It involves new smaller features. Since the minor release is fully backwards-compatible, no need for developer assistance. Having said that, if preferred, you can modify your libraries and apps to start with the new APIs and features that were introduced in the latest release.
- Patch release: It is when backwards-compatible bug fixes are made. It is of low risk, and again, no developer assistance is needed.
- Preview releases: To keep the users well-informed, Angular takes utmost care to let you know what’s likely to be introduced soon via it’s “preview releases” such as Beta, Next and Release Candidate (-rc).
- Release frequency: To prepare the users to plan and coordinate according to the new updates and releases, Angular announces and follows a regular schedule of releases and thereby to avoid any kind of discrepancies.
- Deprecation period and practices:
A deprecation (the breaking changes) is the removal of some of the select features and APIs that are considered to be no longer safe and efficient. In general, a depreciation policy along with best practices and period of support will be announced to provide adequate time and clear a path to update. Further, Angular recommends you to follow the “supported update paths” whenever you migrate from one version to another or migrate within the same major version so as to ensure a seamless performance.
About previous Angular versions:
AngularJS (or Angular 1) released in 2009 is the first version of this JavaScript-based web framework. In the subsequent years, AngularJS got its versions one by one, and the latest version of them all is the AngularJS 1.6. The low performance and the vulnerabilities of AngularJS paved the way for what we currently know as Angular (or Angular 2). The Angular is a complete incompatible rewrite of AngularJS and apparently, becomes the first version of Angular.
Over the years, so many versions have been released for Angular, and the latest of them all is Angular 10. Due to the versioning conflicts, Angular version 3 had been skipped and thereby, we have versions from 4, 5, 6, 7, 8, 9, to at present, version 10. Stuck with any of the Angular version and want to rely on an expert call for a safe upgrade? Associate with our team to get all your queries solved.
AngularJS vs Angular:
Angular is an incompatible rewrite of AngularJS. It includes significant differences such as TypeScript (as AngularJS uses JavaScript), use of components, faster dynamic loading, asynchronous template compilation, reactive programming support and native mobile support. Need to know what type of project you can build with Angular and what must be done to get the best out of it, check our article on What does an Angular developer do?
So far in the Angular versions . . .
- Angular 4 - view-engine enhancements, standalone animation module, new SystemJS plugin, reduced code generation, etc.
- Angular 5 - support for progressive web apps, build optimizer, improvements in Material and Design.
- Angular 6 - ng update, ng add, Bazel compiler, new CDK library with Angular Material, CLI workspaces and Service Worker support.
- Angular 7 - CLI prompts, Drag & Drop module, virtual Scrolling, dependency updates, compatibility compiler, performance improvements, documentation updates.
Newly added features & updates in Angular 8:
- Differential loading
With Angular 8, the applications generated via Angular CLI come with separate bundles and thereby allows the browser to choose between the legacy (ES5) and modern bundles (ES 2015+). It helps to ensure that the browser loads the right set of bundles which in turn improves the TTI (Time To Interactive) and loading speed taken by the modern browser.
- Lazy loading syntax
In the previous version, the router configuration in Angular accepts all the strings irrespective of any typo and errors until we try building it. To overcome these issues, we have a new lazy loading syntax which supports dynamic imports in the router configuration and allows the editors to understand and validate the code. Now, you need not wait until the built time to identify and resolve errors.
- Creating web workers with the CLI
From the CLI, you can now generate a new web worker and offload a work such as an image and video manipulation to the background thread. Doing so, you can free the main thread to update the user interface. Post adding the generated worker to your project, the CLI helps you to bundle and split the code. Web workers are very useful in boosting up the application performance especially if you are running CPU-intensive computations.
- Builder and workspace APIs
With the new Builder APIs, you can now create custom builds and deployment via the familiar commands, such as ng builds, ng run and ng run. Also, you have new Workspace APIs that allows you to work with the workspace that is defined in the angular.json, a task which has to be manually opened and modified in the earlier versions.
- Opt-In usage sharing
To keep delivering the better version of Angular as per the community needs, version 8 of Angular comes with opt-in telemetry in CLI. This allows the Angular community to collect data with regard to build speed and commands used, only if the user permits to do so.
Available preview features:
i) Ivy
Ivy is a new compiler and runtime code and works by making changes to the framework internally without changing the application. Being a rendering engine, it is different from any of the others as it uses incremental DOM. The Tree shakeable and Low Memory Footprint concepts in Ivy come useful in producing smaller and efficient application bundles that load and render faster.
ii) Bazel
Extensively used by Google, Bazel is an open-source build and test tool. Apart from the fact that the Angular framework itself is built with Bazel, it is also expected to integrate Bazel as one of Angular’s toolsets. With the Bazel support, faster incremental builds can be performed especially for the larger projects. In the Angular 8 version, both these are available as an opt-in and open for test-driving.
To make the upgradation of larger applications simpler and to keep the ecosystem synchronized, other vital updates include; the router’s backward compatibility mode, dependency updates for tools such as RxJS, Node and support for TypeScript 3.4. Have a look at the release highlights to know what has changed with this new version of TypeScript.
The deprecated APIs and features starting with version 8.0.0:
- Web tracing framework
- String syntax for the loadchildren route specification
- Dependency on a reflect-metadata polyfill in JIT mode
- Attempting to write in template variables
- The string syntax for the loadChildren route specification
- Usage for any TestBed.get from @angular/core/testing
- DOCUMENT from @angular/platform-browser
To get in-depth information of all the Angular’s deprecated APIs and features, just head over to the Angular’s official website, https://v8.angular.io/guide/deprecations
Migrating from version 7 to 8:
As a whole, Angular has brought many features and changes to make the framework simpler and easier to build with. It is indeed true especially, if you’re migrating from Angular 7 to Angular 8 and a simple command ng update @angular/cli @angular/core is all that you needed. Also, make sure that you are using the recommended Node.js version (12 or later). To check your Node version, use the command, node -v or want to get the newest version of Node, visit its official download page. In case, if your application uses Angular Material, make sure to upgrade it and don’t forget to check its release note for version 8. Looking for a skilful Angular developer to help you with the migration process and to get the best out of Angular 8, contact Starkflow to get you the right person on board.