Angular2
About
2 year ago, Google and angular team together made the decision to
drastically change the tremendously popular Angular1.x framework(https://docs.angularjs.org).They
decide to make better the framework by reducing the learning curve
and providing performance enhancements.
Angular
2.0 beta version was officially announced in 15 December, 2015. This
version do not have complex major update, rather a rewrite of the
entire framework and will include breaking changes!.For more information please visit: https://angular.io/
Why
Angular2?
Let’s
briefly consider the philosophy behind the new version. Angular 2.0
development was started to address the following concerns:
1)Typescript:
The
new version of angularjs written in EC6(JavaScript next version) and
uses typescript rather then plain java script. The previous versions
of ECMAScript defines everything as a prototype. Now ES6(next JavaScript version) allow classes , which make code more readable as
Rails, java code.
Typescript is an extension of ECMAScript, in fact:
Typescript = ES6 + Types + Annotations
Because
Angular2 uses Typescript, the functionality of Typescript itself and
its libraries can be used. Angular2 is just a framework which couples
different features. Other libraries can easily be used. For example:
MongoDB interface because it already has a connector
in Typescript.
Web-sockets is another feature that is not directly something from Angular2, but
it can easily be implemented and support has been added to the
specification.
2)Performance:
Angular
team keep in mind the better performance target while working on
that, So they make some changes or can say lot of changes in existing
angular as:
1)Goodbye
to Controllers & $scope:
Even
though ‘$scope’ has been replaced by “controller as” as a
best practice since Angular 1.2, it still lingers in many tutorials.
Angular 2 finally kills it off, as properties are bound to
components. Instead of using controllers, Angular2 bet on
component-based UI, similar to ReactJS. The core team dropped
controllers but added components and kept the directives.
Angular
1.x:
angular.module(‘example’)
.controller(‘ExampleCtrl’,
function($scope) {
$scope.name
= “John Smith”;
});
Angular
2.0:
@Component({
selector:
'example'
})
@View({
templateUrl: './components/example/example.html'
})
export
class Example {
constructor()
{
this.name
= “John Smith”;
}
}
$scope
has removed in Angular 2.0 in favor of ES 6 classes. It removed due
to late change detection.
2)No
Two-Way data-binding:
Removing
the two-way data-binding leads to:
~
More explicit data-flow
~
No circular dependencies between bindings.
3)
Web Components (Component Based UI):
Generally
WC are set of standard that allow for the creation of reusable
widgets or components in web documents and web applications.
Angular2
is adopting a component-based UI, a concept that might be familiar to
React developers. The Angular 1.x controllers and directives blur
into the new Angular 2 Component.
5)
Ultra Fast Change Detection:
As
currently angular 1.x uses $scope which sometimes unable to digest
the changes and apply over view.So as I describe above angular2
team remove the $scope and they took a new concept, which generate
JavaScript classes and implement this change detection mechanism,
instead of using method calls.
6)
Mobile First:
Angular
was implemented in frameworks like Ionic in a hard manner which was
detrimental to the user’s experience and performance of the
application in general.
With
all this terrible experience, Angular 2 was designed to be better and
ready for any thing coming its way that is mobile oriented.
7)Errors
in the Template Expressions:
One
thing I do not really like about angularjs 1.x is appropriate error
messages. The errors, which you were supposed to get were omitted and
you weren’t aware that your code actually doesn’t work. Well, in
Angular2 we will get run time errors in such cases.
Angular
2.0 will contain a logging service called diary.js—a super useful
feature which measures where time is spent in your application.
Conclusion:
Angular2
is a brand new framework, which is not backward compatible with
AngularJS 1.x. It is implemented in Typescript but you
don’t have to use it if you don’t want to. It implements some
of the ideas from ReactJS, mostly the unidirectional data flow,
which makes it work great with the flux architecture. It is on top of
web standards (which is a big bonus compared to other framework) and
takes advantage of some of the web components’ APIs. It will be
much faster and lighter compared to AngularJS 1.x and will be
supported by the modern browsers with polyfills. Currently no stable version for Angular2 avilable right now.
The
API of Angular2 is still under development. There are a lot of
things, which are still not clarified (like change detection, best
API, forms API, etc.).
