angular2.0

© by mimacom ag 01/12/2014

AngularJS 2.0

Jaime L. López Carratalá

© mimacom ag

Angular 1.x

• Framework JS.• Design pattern MVVM - MVC.• Decoupling between the view, bussiness

logic and user events.• Code reuse.• Modularity.

2

© mimacom ag

Angular 1.x

• Double binding.• Dependency injection.• Different layers.• Testeable code.• Fast development.

3

© mimacom ag

Angular 2.0

4

controllers2009-2014

DDO2009-2014

$scope2009-2014

angular.module

2009-2014jqLite

2009-2014

© 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

© mimacom ag

Angular 2.0 – My feelings

6

© mimacom ag

+1600 AngularJS 1.x apps

7

© 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

© 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

© 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.

© mimacom ag

Web Components

11

Polyfills(Gives support for the non-supported WC standards in

browsers)

© mimacom ag

EcmaScript6

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

12

© 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

© 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

© mimacom ag


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()];

© mimacom ag


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;

© mimacom ag

Controllers and DDOmyModule.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: { // pre: function preLink(scope, iElement, iAttrs, controller) { ... }, // post: function postLink(scope, iElement, iAttrs, controller) { ... } // } // or // link: function postLink( ... ) { ... } };});

17

controllers2009-2014

DDO2009-2014

© 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

© mimacom ag

Controllers & DDO

@ComponentDirective({ ... })class SantaTodoApp { ... }

@TemplateDirective({ ... })class NgRepeat { ... }

@DecoratorDirective({ ... })class NgClass { ... }

19

© mimacom ag

Controllers & DDO

@ComponentDirectiveexport 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

© 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

$scope2009-2014

© 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

© 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

jqLite2009-2014

© 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

© 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

© 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=...

© 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

© 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

© 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

© mimacom ag

References

• http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/• https://plus.google.com/u/0/events/

c2182d3bec32vs4jim7r8smc1q4• 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

angular2.0

Documents