devoxx france 2015 - se préparer à l'arrivée d'angular 2
Post on 15-Jul-2015
3.173 Views
Preview:
TRANSCRIPT
@romaintaz#DvxFrAngular2
Se préparer à l'arrivée d'Angular 2
@romaintaz#DvxFrAngular2
Romain Linsolas
@romaintaz
Société GénéraleDéveloppeur Java & Web
@romaintaz#DvxFrAngular2
Bref historique
20092010
20112012
20132014
20152016
1e release
1.0 – 1.11.2
1.31.4 – 1.5
2.0
∝ 𝛽
@romaintaz#DvxFrAngular2
Angular, un succès !
@romaintaz#DvxFrAngular2
Adieu, concepts de la v1 !• angular.module• $scope• Controllers• Directive Definition Objects• jqLite
@romaintaz#DvxFrAngular2
La v2, une refonte complète
• Dependency injection• Templating• Routing• Logging• Persistence• Annotations• Benchmarking / monitoring• Etc.
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Comprendre Angular 21
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
DEMO !
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Apprendre TypeScript2
@romaintaz#DvxFrAngular2
Qu’est-‐ce que ?• Supporte la spécification ECMAScript 6 (surtout TS 1.5)• Introduction des decorators dans 1.5
@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 };
@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;
}}
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Maitriser les directives3
@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 !’;
}}
});
@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 !”;
});
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Suivre l’actualité d’Angular4
@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
@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…
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Résumons…
@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)
@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Q & A
http://bit.ly/dvxfr15-ng2
top related