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

1. @romaintaz#DvxFrAngular2
Se préparer à l'arrivée d'Angular 2

2. @romaintaz#DvxFrAngular2
Romain Linsolas
@romaintaz
Société Générale
Développeur Java & Web

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. @romaintaz#DvxFrAngular2
Angular, un succès !

6. @romaintaz#DvxFrAngular2
Adieu, concepts de la v1 !
• angular.module
• $scope
• Controllers
• Directive Definition Objects
• jqLite

7. @romaintaz#DvxFrAngular2
La v2, une refonte complète
• Dependency injection
• Templating
• Routing
• Logging
• Persistence
• Annotations
• Benchmarking / monitoring
• Etc.

8. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Comprendre Angular 21

9. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
DEMO !

10. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Apprendre TypeScript2

11. @romaintaz#DvxFrAngular2
Qu’est-­‐ce que ?
• Supporte la spécification ECMAScript 6 (surtout TS 1.5)
• Introduction des decorators dans 1.5

12. @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 };

13. @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;
}
}

14. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Maitriser les directives3

15. @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 !’;
}
}
});

16. @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 !”;
});

17. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Suivre l’actualité d’Angular4

18. @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

19. @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…

20. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Résumons…

21. @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)

22. @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2
Q & A
http://bit.ly/dvxfr15-ng2