Why Angular 2.0 makes sense?
(Edited on 14 september 2015) Some time ago the Angular team announced they’re building on a version 2.0. This version was going to be revolutionary instead of evolutionary. This may sound drastic, but it’s meant in a good way. The idea is to keep the good parts of Angular 1.x and make them more compliant with modern web standards. This mainly means using the web components architecture and the renewed ECMAScript 6 standard. To achieve this, some of the core parts in Angular will disappear, like Two-Way data-binding, $scope and a lot of directives. I guess this is the reason why a lot of people got cold feet when reading/hearing about the new Angular 2.0. Alongside these new standards, there’s also a lot of time invested in better tooling to help developers write faster.No more Mr. ES5 No more mister a-what-now?
ES5 or ECMAScript 5 has been the standard on which javascript is grafted since the “The Renaissance” of Javascript. Together with an obscure “no Flash” policy, this actually has been a real game changer for the language. And Javascript usage began to grown -and still is-. This Renaissance inspired a lot of enthusiast and professionals to do something with this ugly duckling called Javascript. And frameworks like AngularJS (2009), Backbone (2010) and Ember (2011) sprouted. Maybe it’s a coincidence that AngularJS was first released in 2009, the year that ES5 has been adopted in browsers. And AngularJS 2.0 will be released around the time that ES6 will be adopted in browsers. I think not… With this little conspiracy theory, it’s time to tell you AngularJS 2.0 is heavily inspired on the ES6 standard. So prepare to see something magical, classes in Javascript!class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Cat extends Animal {
speak() {
console.log(this.name + ' miauws.');
}
}
var mittens = new Cat('Mittens')
Web components you say?
Angular 2 plays nicely with web components built using other libraries (Polymer, X-Tag, and others), allowing you to pass data into them as easily as if they were written in Angular. Angular components use web standards (such as shadow DOM and the HTML5 template tag) in browsers that support them.
– angular.io –Web Components isn’t a thing invented by Angular (or maybe partly) but is a new standard in the HTML landscape. Web components are meant to create reusable snippets of markup and styles. The markup and styles would be bundled in a custom tag.
<video>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
</video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shadow DOM</title>
</head>
<body>
<div class="date"></div>
<template id="dateTmpl">
<style>
:host,
:host *{
padding: 10px;
}
:host{
border: 1px solid #F00;
}
.date-wrapper{
border: 1px solid #0F0;
}
</style>
<div class="date-wrapper">
<label for="day">Date</label><br />
<input type="number" id="day" min="1" max="31"/>
<input type="number" id="month" min="1" max="12"/>
<input type="number" id="year" />
</div>
</template>
<script>
// Add the template to the Shadow DOM
var tmpl = document.querySelector('#dateTmpl');
var host = document.querySelector('.date');
var root = host.createShadowRoot();
root.appendChild(document.importNode(tmpl.content, true));
</script>
</body>
</html>
<template> tag, like the <script type="text/ng-template"> tag, this <template> tag isn’t loaded until it’s initialized by javascript -thus doesn’t take DOM rendering time-.
Unlike the <script type="text/ng-template">, this will not alter the actual DOM. Thanks to host.createShadowRoot() a paralel universe is created.
Another thing you may have noticed is that we can add styling in the template tag as well. This styling is scoped to the component, except for the :host property this can apply to the element where the template is applied.
Typescript, the billion dollar baby!
Maybe if you’ve been following the Angular 2.0 release track, you’ve heard about AtScript. For those who didn’t AtScript was an extension for TypeScript written by the Angular-team at Google. This extension made it possible to annotate classes in TypeScript. These annotations were invented to add metadata to a class. In the example below you’ll see two annotations (prefixed with an @, .. “aaah, AtScript”). The @Componentannotation defines to which DOM-element the class needs to “mount” on. The @View annotation defines which templates needs to be loaded.// Annotation section
@Component({
selector: 'my-app'
})
@View({
template: '<h1>Hello </h1>'
})
// Component controller
class MyAppComponent {
name: string;
constructor() {
this.name = 'Alice';
}
}
Migration & Planning
Lucky for us, the Angular-team is not planning to force us to use version 2.0. And will keep updating the 1.x version for while. When version 2.0 will be production ready isn’t very clear but they are working on it. As far as the insights go, they started a migration of an existing “big app” at google. They’ve also set up a few migration paths, one of them is called the “big bang” migration path, where you update everything at once. I know… not much of revolutionary idea here. But in some cases this will be the best option. The other path is to incrementally update your existing application, where you could load new Angular 2.0 modules into an existing application. Or load old Angular 1.x into a new Angular 2.0 application. Pretty vague isn’t it? Well it seems they’ve already taken some steps in v1.4 to ease the migrating-pain. Like the new Router that is comparable with UI-Router, developed with migration in mind. And will allow the Angular 2 and Angular 1 modules to live next to each other. Another example would be the improvedbindToController property on directives which allows you to bind scope of a directive to a controller. I’m hearing you, this means you can write the logic that’s needed for your directive, outside of the directive.
Allowing to do this, converting your application to classes and annotations will be easier. The logic written outside of the directive translates without much effort to a class. And the properties set on the directive can now be copied into an annotation.
app.controller('userCtrl', function () {
this.users = [
{
firstname: 'Spongebob',
lastname: 'Squarepants'
},
{
firstname: 'Patrick',
lastname: 'Star'
},
{
firstname: 'Squidward',
lastname: 'Tentacles'
},
{
firstname: 'Gary'
}
];
this.getFirstname = function () {
return this.users[this.id].firstname;
};
this.getLastname = function () {
return this.users[this.id].lastname;
};
});
app.directive('bsUser', function () {
return {
restrict: 'A',
scope: {},
controller: 'userCtrl',
controllerAs: 'user',
bindToController: {
id: '@'
},
template: '<p>Welcome </p>',
};
});
@Component({
selector: 'user',
properties: ['id'],
})
@View({
template: '<p></p>'
})
class UserComponent {
id: Number;
users: Array<Object>;
getFirstname: Function;
getLastname: Function;
constructor() {
this.users = [
{
firstname: 'Spongebob',
lastname: 'Squarepants'
},
{
firstname: 'Patrick',
lastname: 'Star'
},
{
firstname: 'Squidward',
lastname: 'Tentacles'
},
{
firstname: 'Gary'
}
],
this.getFirstname = function() {
return this.users[this.id].firstname;
}
this.getLastname = function() {
return this.users[this.id].lastname;
}
}
}
Update
On 26 august, The Angular Team has written a blogpost about the migration from Angular 1 to Angular 2. Read More
Useful links and references
- CHANGE DETECTION IN ANGULAR 2
- ng-conf 2015 Day 1 Keynote Misko Hevery & Rado Kirov
- ng-conf 2015 Day 1 Keynote Brad Green & Igor Minar
- What I Learned at ng-conf: Write AngularJS with Migration in Mind
- Why Will Angular 2 Rock?
- That’s so fetch!
- ES6 features
- Fetch
- A Guide to Web Components
- Shadow DOM 101