Le futur de AngularJS (2.0)

1

C’est moi !

Consultant chez Octo Technology depuis 2013

Développeur Web AngularJS

Mais aussi Ruby On Rails et Symfony 2

Clément Dubois

@Clement_D

2

ng-europe

3

AngularJS 2.0

Quoi de neuf Angular ?

4

L’environnement

Javascript

Les nouveautés

d’AngularJS 2.0

5

EcmaScript

AngularJS1.x

Javascript EcmaScript 5

Standard

AngularJS 2 Javascript EcmaScript 6

6

EcmaScript 6

EcmaScript 5 EcmaScript 6

7

TypeScript

8

TypeScript

EcmaScript 5

TypeScript

9

AtScript

10

AtScript

AtScript

EcmaScript 6

11

Le tout

12

Traceur

5

6

13

AngularJS 2.0

14

Objectifs

Pourquoi ???

Framework conçu pour le futur du web

Meilleure Developer Experience

Meilleure performance

15

Syntaxe

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

...

AngularJS 1.3

ng-controller="SantaTodoController"

ng-model="newTodoTitle"

ng-click="addTodo()"

ng-repeat="todo in todosOf('tobias')"

ng-click="deleteTodo(todo)"

ng-model="todo.done"

{{todo.title}}

16

Syntaxe

AngularJS 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>

...

[value]="newTodoTitle"

(click)="addTodo()"

[ng-repeat|todo]="todosOf('good')"

[checked]="todo.done"

{{todo.title}}

(click)="deleteTodo(todo)"

17

Directives

Directives are dead, long live directives !

“

”Saying

18

Utilisation de AtScript

Directives

La fin du DDO

Decorator DirectiveAjout de comportement au HTML

Ex : ng-show

Template DirectiveHTML as template

Ex : ng-if, ng-repeat

Component DirectiveController + View

19

Directives

@ComponentDirective({

selector:'tab-container',

directives:[NgRepeat]

})

class TabContainer {

constructor(panes:Query<Pane>) {

this.panes = panes;

}

select(selectedPane:Pane) { ... }

}

Component Directive

20

Hécatombe

Controller

Directive

ES6 Module

$scope

JqLite

angular.module

Raw DOM

AngularJS 1.x AngularJS 2

21

Les standards du web évoluent

AngularJS 2.0 évolus avec le web

Des changements majeurs

Pas de rétrocompatibilité

Ça va encore beaucoup bouger

En bref

22

Au vu des changements majeurs : OUI

On fait quoi ?

On va devoir tout réécrire en 2.0 ?!

J’ai combien de temps pour le voir arriver ?

Sortie au mieux fin 2015 Maintenance 1.x : 3 ans

Pas de Angular sur mon nouveau projet ?

Répond au besoin ? Durée de vie ?

Keep Going !

23

Merci

24

Hello World Angular 2.0 : http://bit.ly/15FR75R

All About Angular 2.0 : http://bit.ly/1Ay4dQ5

Typing in AtScript, TypeScript and Flow : http://bit.ly/1zZQ1LY

Quelques nouveautés ECMASCRIPT 6 : http://bit.ly/1tosIa4

AtScript Primer : http://bit.ly/1xPnh5s

AngularJS Pour aujourd’hui et pour demain : http://bit.ly/1Go7P7L

Ngeurope AtScript : http://bit.ly/115fgAa

Ngeurope AngularJs2.0 : http://bit.ly/1wwXqP3

Quelques liens