1. © by mimacom ag
01/12/2014
AngularJS 2.0
Jaime L. López Carratalá

2. © mimacom ag
Angular 1.x
• Framework JS.
• Design pattern MVVM - MVC.
• Decoupling between the view, bussiness
logic and user events.
• Code reuse.
• Modularity.
2

3. © mimacom ag
Angular 1.x
• Double binding.
• Dependency injection.
• Different layers.
• Testeable code.
• Fast development.
3

4. © mimacom ag
Angular 2.0
4
controllers
2009-2014
DDO
2009-2014
$scope
2009-2014
angular
.module
2009-2014
jqLite
2009-2014

5. © mimacom ag
Angular 2.0
• Incompatibility with 1.x
• Redefinition of template syntax.
• Maybe no more double data binding anymore.
• Totally rewritten with AtScript.
• Annotations, imports, classes…
5

6. © mimacom ag
Angular 2.0 – My feelings
6

7. © mimacom ag
+1600 AngularJS 1.x apps
7

8. © mimacom ag
Why?
• New Web is coming.
└ Web Components.
└ Features of the future NOW (ES6).
└ Risk of become irrelevant.
• Mobility.
• Performance.
• Ease of use.
• Standarization.
8

9. © mimacom ag
When?
• No production-ready date.
• ES6 finished in 2015.
• Maybe in 1 year? Who knows
└ They want to build something new and cool with no
pressure.
9

10. © mimacom ag
Web Components
10
Web Components are a set of standards currently being produced by the
W3C that allow for the creation of reusable widgets or components in web
documents and web applications.

11. © mimacom ag
Web Components
11
Polyfills
(Gives support for the non-
supported WC standards in
browsers)

12. © mimacom ag
EcmaScript6
• Specification of JavaScript.
• Finished in a few months.
• Classes.
• Modularization standard (Import / Export).
• Arrow functions.
• Generators.
• …
12

13. © mimacom ag
AtScript
• Superset of TypeScript and ES6.
• Angular 2.0 is written with AtScript, but you can
write Angular 2.0 apps in ES6 or even ES5.
13

14. © mimacom ag
ES6 – AtScript examples
AtScript ES6
class MyClass {
methodA(name:string):int {
var length:int = name.length;
return length;
}
}
import * as rtts from 'rtts';
class MyClass {
methodA(name) {
rtts.types(name, rtts.string);
var length =
rtts.type(name.length, rtts.int);
return rtts.returnType(length, rtts.int);
}
}
14
AtScript ES6
class MyClass {
methodA(names:List<string>):List<int>) {
var sizes = [];
for(var i = 0; i < names.length; i++) {
sizes[i] = names[i].length;
}
return sizes;
}
}
import * as rtts from 'rtts';
class MyClass {
methodA(names) {
rtts.types(names, Array.of(rtts.string));
var sizes = [];
for(var i = 0; i < names.length; i++) {
sizes[i] = names[i].length;
}
return rtts.returnType(
sizes,
Array.of(rtts.int));
}
}
Type annotations

15. © mimacom ag
ES6 – AtScript examples
15
Metadata annotations
AtScript ES6
class Inject {}
class Component {
selector:string;
constructor({selector:string}) {
this.selector = selector;
}
}
class Server {}
@Component({selector: 'foo'})
class MyComponent {
@Inject()
constructor(server:Server) {}
}
import * as rtts from 'rtts';
class Inject {}
class Component {
selector:string;
constructor({selector}) {
this.selector = selector;
}
}
class Server {}
class MyComponent {
constructor(server:Server) {}
}
MyComponent.parameters = [{is:Server}];
MyComponent.annotate = [
new Component({selector: 'foo'}),
new Inject()
];

16. © mimacom ag
ES6 – AtScript examples
16
Type Introspection
AtScript ES5
@Component()
class MyApp {
server:Server;
@Bind('name') name:string;
@Event('foo') fooFn:Function;
@Inject()
constructor(@parent server:Server) {}
greet():string {}
}
function MyApp() {}
MyApp.properties = {
'server': { is: Server },
'name': { is:string,
annotate: [new Bind('name']},
'fooFn': { is:Function,
annotate:[new Event('foo')]}
}
MyApp.annotate = [
new Component(),
new Inject()
];
MyApp.parameters = [
{is:Server, annotate:[parent]}
];
MyApp.prototype.greet = function() {}
MyApp.prototype.greet.returns = string;

17. © mimacom ag
Controllers and DDO
myModule.directive('directiveName', function factory(injectables) {
return {
priority: 0,
template: '<div></div>', // or // function(tElement, tAttrs)
{ ... },
// or
// templateUrl: 'directive.html', // or // function(tElement,
tAttrs) { ... },
transclude: false,
restrict: 'A',
templateNamespace: 'html',
scope: false,
controller: function($scope, $element, $attrs, $transclude,
otherInjectables) { ... },
controllerAs: 'stringAlias',
require: 'siblingDirectiveName', // or // ['^parentDirectiveName',
'?optionalDirectiveName', '?^optionalParent'],
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller)
{ ... },
post: function postLink(scope, iElement, iAttrs, controller)
{ ... }
}
// or
// return function postLink( ... ) { ... }
},
// or
// link: { 17
controllers
2009-2014
DDO
2009-2014

18. © mimacom ag
Controllers & DDO
• Components
└ Component Directive - Creates a custom component
composed of a View and a Controller. You can use it as a
custom HTML element. Also, the router can map routes to
Components.
└ Decorator Directive - Decorates an existing HTML
element with additional behavior. A classic example is ng-
show.
└ Template Directive - Transforms HTML into a reusable
template. The directive author can control when and how
the template is instantiated and inserted into the DOM.
Examples include ng-if and ng-repeat.
18

19. © mimacom ag
Controllers & DDO
@ComponentDirective({ ... })
class SantaTodoApp { ... }
@TemplateDirective({ ... })
class NgRepeat { ... }
@DecoratorDirective({ ... })
class NgClass { ... }
19

20. © mimacom ag
Controllers & DDO
@ComponentDirective
export class CustomerEditController {
constructor(server:Server) {
this.server = server;
this.customer = null;
}
activate(customerId) {
return this.server.loadCustomer(customerId)
.then(response => this.customer =
response.customer);
}
}
20

21. © mimacom ag
Scope object
• It doesn’t mean there is no
scope or model.
• The scope object is implicit.
• Watches responsability and
events are splitted up between
several parts of angular.
21
$scope
2009-2014

22. © mimacom ag
DI & Modularization
• ES6 import/export classes.
• No need of a custom module
system
import {TodoStore} from './store';
@ComponentDirective({
directives: [TabContainer, TabPane, NgRepeat]
})
class SantaTodoApp {
constructor(store:TodoStore) {
...
}
...
}
22
angular
.module
2009-2014

23. © mimacom ag
jqLite
• No more DOM wrappers needed
anymore.
• It was a neck bottle for
performance.
• You can still use Jquery or
whatever DOM wrapper that you
want.
23
jqLite
2009-2014

24. © mimacom ag
Template syntax Angular 1.x
<div ng-controller="SantaTodoController">
<input type="text" ng-model="newTodoTitle">
<button ng-click="addTodo()">+</button>
<tab-container>
<tab-pane title="Tobias">
<div ng-repeat="todo in todosOf('tobias')">
<input type="checkbox"
ng-model="todo.done">
{{todo.title}}
<button ng-click="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...
24

25. © mimacom ag
Template syntax Angular 2.0
<div>
<input type="text" [value]="newTodoTitle">
<button (click)="addTodo()">+</buton>
<tab-container>
<tab-pane title="Good kids">
<div [ng-repeat|todo]="todosOf('good')">
<input type="checkbox"
[checked]="todo.done">
{{todo.title}}
<button (click)="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...
25

26. © mimacom ag
Databinding
• Binding to properties of the DOM not to attributes:
• Maybe double databinding removed!!!
└ This is still in discussion.
└ Options are one-way binding or push/pull mechanism.
26
<elm attr="..."> elm.property=...

27. © mimacom ag
Performance
• There are limits that can be made with the Angular
1.x design, specially in binding and templating
strategies.
• Performance problems in large apps.
• Mobile
└ Angular was not design with mobile devices in mind.
└ Router very limited.
└ Inability of cache per-compiled views.
27

28. © mimacom ag
Tools
• Traceur: Transpiler from ES6 to ES5.
• Benchmarking.
• Web Tracing Framework.
• Debugging tools.
• Migration path from 1.x to 2.0
└ Totally unknown
└ First build the city, later the bridge.
28

29. © mimacom ag
Conclusions
• Early adaptation to the new Web that is coming.
• Most concepts are kept, but redefined completely.
• Ease of use for new developers using Angular.
• A lot to learn for the developers that already use 1.x.
• Lots of unclear things: databinding, watches handling,…
• Several design topics may change in the near future.
• Angular 1.3 is not dead, it will have support and
enhancements until 1-2 years after Angular 2.0 is
released.
29

30. © mimacom ag
References
• http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/
• https://plus.google.com/u/0/events/c2182d3bec32vs4jim7r8
smc1q4
• http://devchat.tv/adventures-in-angular/009-aia-ng-2-0-
with-rob-eisenberg
• http://eisenbergeffect.bluespire.com/all-about-angular-2-0/
• http://es.slideshare.net/xmlking/spa-20
• http://webcomponents.org/
• http://ngeurope.org/
• https://docs.google.com/document/d/11YUzC-1d0V1-
Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit
30

31. © mimacom ag 31

32. © mimacom ag
customer oriented
User friendly
Competently
Qualitatively
Efficient
32
…the open source integrator