Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2

6,410 views

Published on

Quickie lors de Devoxx France 2015 sur une présentation rapide d'Angular 2, prévue pour 2016

Published in: Internet
  • Be the first to comment

Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2

  1. 1. @romaintaz#DvxFrAngular2 Se  préparer  à  l'arrivée  d'Angular 2
  2. 2. @romaintaz#DvxFrAngular2 Romain  Linsolas @romaintaz Société Générale Développeur Java & Web
  3. 3. @romaintaz#DvxFrAngular2 Bref  historique 2009 2010 2011 2012 2013 2014 2015 2016 1e release 1.0 – 1.1 1.2 1.3 1.4 – 1.5 2.0 ∝ 𝛽
  4. 4. @romaintaz#DvxFrAngular2 Angular,  un  succès  !
  5. 5. @romaintaz#DvxFrAngular2 Adieu,  concepts  de  la  v1  ! • angular.module • $scope • Controllers • Directive Definition Objects • jqLite
  6. 6. @romaintaz#DvxFrAngular2 La  v2,  une  refonte  complète • Dependency injection • Templating • Routing • Logging • Persistence • Annotations • Benchmarking / monitoring • Etc.
  7. 7. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2 Comprendre Angular 21
  8. 8. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2 DEMO !
  9. 9. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2 Apprendre TypeScript2
  10. 10. @romaintaz#DvxFrAngular2 Qu’est-­‐ce  que ? • Supporte la spécification ECMAScript 6 (surtout TS 1.5) • Introduction des decorators dans 1.5
  11. 11. @romaintaz#DvxFrAngular2 TypeScript – Quelques  bases // Typage statique var myFlag: boolean = true; var myString: string = "Hello Devoxx France!"; var theAnswer: number = 42; function whatIsTheAnswer(): number { return 42; } // Enumeration (avec ou sans valeur) enum Conference { Devoxx, DevoxxFrance, MixIT }; enum Color { Blue = 0, White = 1, Red = 2 };
  12. 12. @romaintaz#DvxFrAngular2 TypeScript – Classes  &  interfaces // interfaces interface Conference { name: string; welcome(): string; } class DevoxxFrance implements Conference { name: string; constructor(name: string) { this.name = name; } welcome(): string { return "Welcome to " + this.name; } }
  13. 13. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2 Maitriser les directives3
  14. 14. @romaintaz#DvxFrAngular2 Directives  Driven Development <!-- page.html --> <div ng-controller=”HomeCtrl”> Hello {{ username }} </div> // Controller myApp.controller(“HomeCtrl”, function($scope) { $scope.username = “World !”; }); <!-- page.html --> <hello-message></hello-message> <!-- hello-template.html --> </span>Hello {{ username }}</span> // Directive myApp.directive(“helloMessage”, function() { return { restrict: ‘E’, templateUrl: ‘hello-template.html’, link: function(scope, element, attrs) { scope.username = ‘World !’; } } });
  15. 15. @romaintaz#DvxFrAngular2 Directives  Driven Development <!-- page.html --> <hello-message></hello-message> <!-- hello-template.html --> </span>Hello {{ username }}</span> // Directive myApp.directive(“helloMessage”, function() { return { restrict: ‘E’, templateUrl: ‘hello-template.html’, link: function(scope, element, attrs) { scope.username = ‘World !’; } } }); <!-- page.html --> <div ng-controller=”HomeCtrl”> Hello {{ username }} </div> // Controller myApp.controller(“HomeCtrl”, function($scope) { $scope.username = “World !”; });
  16. 16. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2 Suivre l’actualité d’Angular4
  17. 17. @romaintaz#DvxFrAngular2 Actualités  d’Angular • Suivre l’évolution d’Angular 2 • Sites (https://angular.io), blogs… • Conférences : Devoxx (France), ng-london (mi-octobre) • …mais aussi de la v1 : v1.5 prévue pour faciliter la migration
  18. 18. @romaintaz#DvxFrAngular2 D’autres  idées  ? • Rester sur la v1 : § Encore 3 ans de support § Grande communauté § Pas de grosses évolutions (ES6, Web Components…) • Quitter Angular : § Ember.js § Backbone.js § Aurélia…
  19. 19. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2 Résumons…
  20. 20. @romaintaz#DvxFrAngular2 Pour  bien  se  préparer • Apprenez le TypeScript • Maîtrisez les directives • Suivez de près l’évolution d’Angular 2 (et de la v1)
  21. 21. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2 Q & A http://bit.ly/dvxfr15-ng2

×