devoxx france 2015 - se préparer à l'arrivée d'angular 2
TRANSCRIPT
![Page 1: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/1.jpg)
@romaintaz#DvxFrAngular2
Se préparer à l'arrivée d'Angular 2
![Page 2: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/2.jpg)
@romaintaz#DvxFrAngular2
Romain Linsolas
@romaintaz
Société GénéraleDéveloppeur Java & Web
![Page 3: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/3.jpg)
@romaintaz#DvxFrAngular2
Bref historique
20092010
20112012
20132014
20152016
1e release
1.0 – 1.11.2
1.31.4 – 1.5
2.0
∝ 𝛽
![Page 4: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/4.jpg)
@romaintaz#DvxFrAngular2
Angular, un succès !
![Page 5: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/5.jpg)
![Page 6: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/6.jpg)
@romaintaz#DvxFrAngular2
Adieu, concepts de la v1 !• angular.module• $scope• Controllers• Directive Definition Objects• jqLite
![Page 7: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/7.jpg)
@romaintaz#DvxFrAngular2
La v2, une refonte complète
• Dependency injection• Templating• Routing• Logging• Persistence• Annotations• Benchmarking / monitoring• Etc.
![Page 8: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/8.jpg)
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Comprendre Angular 21
![Page 9: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/9.jpg)
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
DEMO !
![Page 10: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/10.jpg)
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Apprendre TypeScript2
![Page 11: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/11.jpg)
@romaintaz#DvxFrAngular2
Qu’est-‐ce que ?• Supporte la spécification ECMAScript 6 (surtout TS 1.5)• Introduction des decorators dans 1.5
![Page 12: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/12.jpg)
@romaintaz#DvxFrAngular2
TypeScript – Quelques bases
// Typage statiquevar 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 };
![Page 13: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/13.jpg)
@romaintaz#DvxFrAngular2
TypeScript – Classes & interfaces// interfacesinterface Conference {
name: string;welcome(): string;
}
class DevoxxFrance implements Conference {name: string;constructor(name: string) {
this.name = name;}
welcome(): string {return "Welcome to " + this.name;
}}
![Page 14: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/14.jpg)
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Maitriser les directives3
![Page 15: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/15.jpg)
@romaintaz#DvxFrAngular2
Directives Driven Development
<!-- page.html --><div ng-controller=”HomeCtrl”>Hello {{ username }}
</div>
// ControllermyApp.controller(“HomeCtrl”, function($scope) {$scope.username = “World !”;
});
<!-- page.html -->
<hello-message></hello-message>
<!-- hello-template.html -->
</span>Hello {{ username }}</span>
// Directive
myApp.directive(“helloMessage”, fu
nction() {
return {restrict: ‘E’,
templateUrl: ‘hello-template.html’
,
link: function(scope, element, att
rs) {
scope.username = ‘World !’;
}}
});
![Page 16: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/16.jpg)
@romaintaz#DvxFrAngular2
Directives Driven Development<!-- page.html -->
<hello-message></hello-message>
<!-- hello-template.html -->
</span>Hello {{ username }}</span>
// Directive
myApp.directive(“helloMessage”, fu
nction() {
return {restrict: ‘E’,
templateUrl: ‘hello-template.html’
,
link: function(scope, element, att
rs) {
scope.username = ‘World !’;
}}
});
<!-- page.html --><div ng-controller=”HomeCtrl”>Hello {{ username }}
</div>
// ControllermyApp.controller(“HomeCtrl”, function($scope) {$scope.username = “World !”;
});
![Page 17: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/17.jpg)
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Suivre l’actualité d’Angular4
![Page 18: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/18.jpg)
@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
![Page 19: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/19.jpg)
@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…
![Page 20: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/20.jpg)
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Résumons…
![Page 21: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/21.jpg)
@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)
![Page 22: Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2](https://reader038.vdocuments.pub/reader038/viewer/2022110122/55a58b651a28ab48488b4581/html5/thumbnails/22.jpg)
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Q & A
http://bit.ly/dvxfr15-ng2