1 
C’est moi ! 
Clément Dubois 
@Clement_D 
Consultant chez Octo Technology depuis 2013 
Développeur Web AngularJS 
Mais a...
2 
ng-europe
3 
AngularJS 2.0 
Quoi de neuf Angular ?
4 
L’environnement 
Javascript 
Les nouveautés 
d’AngularJS 2.0
5 
EcmaScript 
AngularJS 
1.x 
Javascript EcmaScript 5 
Standard 
AngularJS 2 Javascript EcmaScript 6
6 
EcmaScript 6 
EcmaScript 5 EcmaScript 6
7 
TypeScript
8 
TypeScript 
TypeScript 
EcmaScript 5
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 
AngularJS 1.3 
ng-controller="SantaTodoController" 
<div SantaTodoController"> 
<input type="text" newTodoTit...
16 
Syntaxe 
AngularJS 2.0 
<div> 
<input type="text" newTodoTitle"> 
<button addTodo()">+</buton> 
<tab-container> 
<tab-...
17 
Directives 
Directives are dead, 
long live directives ! 
“ 
” 
Saying
18 
Utilisation de AtScript 
Directives 
La fin du DDO 
Decorator Directive 
Ajout de comportement au HTML 
Ex : ng-show 
...
19 
Directives 
Component Directive 
@ComponentDirective({ 
selector:'tab-container', 
directives:[NgRepeat] 
}) 
class Ta...
20 
Hécatombe 
AngularJS 1.x AngularJS 2 
Controller 
Directive 
ES6 Module 
$scope 
JqLite 
angular.module 
Raw DOM
21 
En bref 
Les standards du web évoluent 
AngularJS 2.0 évolus avec le web 
Des changements majeurs 
Pas de rétrocompati...
22 
On fait quoi ? 
On va devoir tout réécrire en 2.0 ?! 
Au vu des changements majeurs : OUI 
J’ai combien de temps pour ...
23 
Merci
24 
Quelques liens 
Hello World Angular 2.0 : http://bit.ly/15FR75R 
All About Angular 2.0 : http://bit.ly/1Ay4dQ5 
Typing...
Prochain SlideShare
Chargement dans…5
×

Le futur de AngularJS (2.0)

2 597 vues

Publié le

Slides de ma présentation du 27/11/2014 au meetup Angular à l'école 42.
Je parle des nouveautés annoncées à ngEurope pour AngularJS 2.0 ainsi que de l'environnement javascript dans lequel le framework sera écrit (AtScript + ES6 + Traceur).
mon twitter : @Clement_D

Publié dans : Technologie
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 597
Sur SlideShare
0
Issues des intégrations
0
Intégrations
70
Actions
Partages
0
Téléchargements
63
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Brad Green
    Igor Minar
  • ES6 : Juin 2015
  • Exemple Class et Module ES6 et ES5
  • Surcouche microsoft
    Typage statique
    Compilé en ES5 ou ES6
  • Google
    Introspection de type
    Annotation  METADONNEES
    Typage dynamique
  • Angular est écrit en AtScript
    AtScript optionnel !
  • Transpiler
    Une seule base de code !
    Optionnel
  • (event)
    [attribut]
     Web Component (Futur)
    Générique
  • Directive Definition Object
    DX
  • Annotation AtScript
    Type typeScript
    Class ES6

    Injection de dépendance
  • Controller
    $scope
    Angular.module
  • ES6 + WebComponent
  • Le futur de AngularJS (2.0)

    1. 1. 1 C’est moi ! Clément Dubois @Clement_D Consultant chez Octo Technology depuis 2013 Développeur Web AngularJS Mais aussi Ruby On Rails et Symfony 2
    2. 2. 2 ng-europe
    3. 3. 3 AngularJS 2.0 Quoi de neuf Angular ?
    4. 4. 4 L’environnement Javascript Les nouveautés d’AngularJS 2.0
    5. 5. 5 EcmaScript AngularJS 1.x Javascript EcmaScript 5 Standard AngularJS 2 Javascript EcmaScript 6
    6. 6. 6 EcmaScript 6 EcmaScript 5 EcmaScript 6
    7. 7. 7 TypeScript
    8. 8. 8 TypeScript TypeScript EcmaScript 5
    9. 9. 9 AtScript
    10. 10. 10 AtScript AtScript EcmaScript 6
    11. 11. 11 Le tout
    12. 12. 12 Traceur 5 6
    13. 13. 13 AngularJS 2.0
    14. 14. 14 Objectifs Pourquoi ??? Framework conçu pour le futur du web Meilleure Developer Experience Meilleure performance
    15. 15. 15 Syntaxe AngularJS 1.3 ng-controller="SantaTodoController" <div SantaTodoController"> <input type="text" newTodoTitle"> <button ng-click="addTodo()">+</button> <tab-container> <tab-pane title="Tobias"> <div tobias')"> <input type="checkbox" ng-model="todo.done"> done" {{todo.title}} <button todo)"> X </button> </div> </tab-pane> ... ng-model="newTodoTitle" addTodo()" ng-repeat="todo in todosOf('tobias')" ng-click="deleteTodo(todo)"
    16. 16. 16 Syntaxe AngularJS 2.0 <div> <input type="text" newTodoTitle"> <button addTodo()">+</buton> <tab-container> <tab-pane title="Good kids"> <div good')"> <input type="checkbox" done"> <button todo)"> X </button> </div> </tab-pane> ... [value]="newTodoTitle" (click)="addTodo()" [ng-repeat|todo]="todosOf('good')" [checked]="todo.done" {{todo.title}} (click)="deleteTodo(todo)"
    17. 17. 17 Directives Directives are dead, long live directives ! “ ” Saying
    18. 18. 18 Utilisation de AtScript Directives La fin du DDO Decorator Directive Ajout de comportement au HTML Ex : ng-show Component Directive Template Directive HTML as template Ex : ng-if, ng-repeat Controller + View
    19. 19. 19 Directives Component Directive @ComponentDirective({ selector:'tab-container', directives:[NgRepeat] }) class TabContainer { constructor(panes:Query<Pane>) { this.panes = panes; } select(selectedPane:Pane) { ... } }
    20. 20. 20 Hécatombe AngularJS 1.x AngularJS 2 Controller Directive ES6 Module $scope JqLite angular.module Raw DOM
    21. 21. 21 En bref Les standards du web évoluent AngularJS 2.0 évolus avec le web Des changements majeurs Pas de rétrocompatibilité Ça va encore beaucoup bouger
    22. 22. 22 On fait quoi ? On va devoir tout réécrire en 2.0 ?! Au vu des changements majeurs : OUI 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. 23. 23 Merci
    24. 24. 24 Quelques liens 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

    ×