Since its release, AngularJS has dominated the world of open source JavaScript frameworks. Being an extremely advanced client-side MVW framework, it has achieved widespread adoption and support from both individuals and enterprises. Developed by Google in 2009, Angular not only enhances HTML used in web applications but also simplifies development and testing tasks for developers.
Even though the latest version of Angular (1.4) is both stable and highly performant, the AngularJS team has decided to launch a whole new version, called 2.0, which is a complete rewrite of entire framework with massive changes. Let’s start!
5 MOTIVATING FACTORS BEHIND ANGULAR 2.0
Before digging into what’s changing, let’s understand why the Angular team felt the need to rewrite the entire framework:
THE CHANGING WEB
The web has changed significantly in the last few years and no doubt, it will continue to change in future as well. The current version of Angular can’t work with new web components (custom elements, templates, HTML imports and shadow DOM), which allow developers to create fully encapsulated custom elements. To address this issue, the concept of AngularJS 2.0 has been introduced. Version 2.0 fully supports web components created with other libraries like X-Tag, Bosonic, and Polymer.
MOBILE
While creating Angular 1.x, mobile was not taken into consideration. You can still use it for building mobile apps but, you may face various performance-related issues. The new Angular version is designed with a mobile-first approach, including mobile-specific features like touch support, low memory and bandwidth usage on mobile devices, performance tuning and material design UI elements etc. The argument is that if you can solve all the mobile-related issues, you can easily and efficiently create a desktop application.
FUTURE READINESS
AngularJS 1.x was built to work with existent technologies. AngularJS 2.0, on the other hand, is designed with future technologies in mind. All code in version 2.0 is written in ECMAScript 6 (ES6) — the sixth edition of JavaScript which doesn’t run in browsers at the moment and is scheduled for release this year. In addition, Angular 2.0 will only support modern browsers — “a set of evergreen browsers” that include Safari, Opera, Chrome, FireFox and IE10/11 — which always remain up to date with latest web standards.
PERFORMANCE
AngularJS was originally created for designers, not for developers. Although in last five years, the Angular team has worked hard to make evolutionary improvements to the design so that it could accommodate developers’ requirements. But still, due to “limits on the improvements” defined in the original design, it sometimes does not meet developers’ performance-related expectations. So to improve the overall performance of framework, a brand new version was needed.
EASE OF USE
Learning and implementing AngularJS is not everyone’s cup of tea. It requires a developer or designer to have an in-depth knowledge of its core features from the beginning. Most of the Angular features like custom directives and controllers, which are today known as “core”, are quite difficult to understand for a newbie. Therefore in order for developers to easily learn Angular, rewriting the Angular code was mandatory.
SIGNIFICANT CHANGES IN V2.0
Now, after getting acquainted with key factors behind the creation of Angular 2.0, let’s take a look at what’s new:
WRITTEN IN TYPESCRIPT
Angular 2.0 is built on the top of TypeScript, an open source programming language created and maintained by Microsoft. Previously, the AngularJS team had extended Typescript to create a new language named “AtScript” for Angular 2.0 but recently in March 2015, they dropped AtScript as a project and started working in partnership with Microsoft.
That means, AtScript is now defunct and all of its features are now being implemented in TypeScript, which is a strict superset of ES6. As ES6 doesn’t run in browsers available at present, the Angular team is using the Traceur compiler (another Google project which produces ES5 code from ES6) for the development of version 2.0. However, Angular 2 also works seamlessly with any other languages, like CoffeeScript and ES5, which compile to JavaScript.
IMPROVED DEPENDENCY INJECTION
Dependency Injection (DI) is one of the most prominent features of Angular, which differentiates Angular from its competitor frameworks and keeps you away from writing a lot of tedious glue code for your application. The current dependency injection mechanism in Angular 1.x has few issues, like association of implementation with minification and missing features common to cutting-edge server-side NET/Java frameworks, which has been resolved in version 2.0 by adding features like scope control and child injectors.
Annotations: To simplify the syntax, TypeScript offers a generalized mechanism through which developers can associate metadata with any function. Just by using declarative-style types and annotations, developers now can express their application’s code more clearly than before. Also, overriding parameter data would be like a breeze with a special Injectannotation.
Child Injectors: As the name itself implies, the child injector inherits all the services from its parent injector along with the ability to override any parent service at the child level. Making use of this major new feature, you can call different types of objects – that will automatically be overridden – in your application.
Instance Scope: The new DI system features instance scope control, which would prove to be quite useful when you’re creating your own scope identifiers and using them with child injectors.
Templating and Data Binding: Although Data Binding and Templating are technically different from each other, they are considered a single unit while writing an Angular application. In other words, templates and data binding go hand in hand during the development of an Angular application.
Dynamic Loading: This feature, which allows dynamic loading of code, is not available in the current version of Angular. In version 2.0, dynamic loading is included to make it possible for developers to add new controllers and directives at run-time.
Templating: In Angular 2.0, the compilation of a template will be an asynchronous process. Meaning, all the essential dependencies will be loaded before the compiler manages the template. The component definition, which contains metadata of filters, directives etc, would reference all of the dependencies to be loaded.
Directives: Directives play a vital role in extending HTML and plugging Angular action into a web page. In version 2.0, you’ll have three kinds of directives, which are:
Component: These directives will be used to create a custom component that is made of a view and a controller and can be used as an HTML element.
Decorator: You can use these directives to decorate an existing HTML element with a specific behavior. For instance: hiding an element using ng-hide.
Template: These directives can be used to convert HTML into a reusable template. The directive author has complete control over when the template is instantiated and how it will be inserted into the DOM. For example, ng-repeat and ng-if.
STRONG ROUTING SOLUTION
The current router in Angular 1.x is capable of handling just a few simple scenarios; however, more and more features have been added to it with the growth of framework. The Angular team has completely revamped the routing system to make it as simple, flexible and extensible as possible. The router in Angular 2.0 includes the basic routing features mentioned below:
- Child Router
- Screen Activator (canActivate, activate, canDeactivate and deactivate)
- URL Resolver
- Location Service
- Simple JSON-based Route Configuration
- Navigation Model
- History Manipulation
- Static, Parameterized and Splat Route Patterns
- Push State or Hash change
- Optional Convention over Configuration
- 404 Route Handling
- Query String Support
- Document Title Updates
NO MORE $SCOPE
In Angular 2.0, you’ll find no $scope since it has been removed on account of ES6 classes.
LOGGING SERVICE
The new Angular version ships with diary.js, a logging service that lets you keep track of time you’ve spent in your application so that you could easily find out performance bottlenecks in your code.
INTERNATIONALIZATION (I18N)
While the support for internationalization was quite poor in previous versions of Angular, version 2.0 has full support for internationalization that helps you reach all your users worldwide. Now, in Angular interpolation syntax ({{ }}), you can make use of ICU message format.
LAST, BUT CERTAINLY NOT LEAST, A NEW WEBSITE
Since version 2.0 introduces a lot of changes and improvements, the Angular team has decided to host it on a new domain which is angular.io. The website is built with Google’s popular material design concept and gives developers comprehensive knowledge about the new version and its implementation.
Post a Comment