SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
1.
Angular 2Angular 2
Le reveil de la forceLe reveil de la force
#BzhCmp #Ng2BzhCmp
BreizhCamp 2015 #BzhCmp
2.
BreizhCamp 2015 #BzhCmp
Nicolas PennecNicolas Pennec
@NicoPennec@NicoPennec
Full-Stack Web Developer
Co-Fondateur de @RennesJS
#Ng2BzhCmp #BzhCmp
3.
BreizhCamp 2015 #BzhCmp
Grégory HoullierGrégory Houllier
@ghoullier@ghoullier
Architecte Web, passionné par le Front-End
Co-Fondateur de @RennesJS
#Ng2BzhCmp #BzhCmp
4.
@RennesJS@RennesJS
rennesjs.orgrennesjs.org
meetup.com/RennesJS/meetup.com/RennesJS/
#Ng2BzhCmp #BzhCmp
Meetup le dernier jeudi de chaque mois
25/06/2015 à Epitech
5.
Angular 1.XAngular 1.X
#Ng2BzhCmp #BzhCmp
Framework JS MV*
Projet open-source porté par Google
Version 1.X très populaire, 1er sur GitHub (39K stars)
Concepts :
Orienté Single Page Application (SPA)
Étendre le langage HTML (directives)
Data Binding bi-directionnel
Dependency Injection, $scope, ...
6.
Annonce d'Angular 2Annonce d'Angular 2
#Ng2BzhCmp #BzhCmp
Octobre 2014:
Première annonce
Rupture de concepts
Pas de rétrocompatibilité
Nouveau langage (AtScript)
7.
Annonce d'Angular 2Annonce d'Angular 2
#Ng2BzhCmp #BzhCmp
Mars 2015
Rétropédalage de Google
Opération séduction des devs
Roadmap de la branche 1.X
Nouveau langage (TypeScript)
8.
PhilosophiePhilosophie
#Ng2BzhCmp #BzhCmp
Apprendre des erreurs d’Angular 1
2-way data binding, dirty-checking, $scope, ...
Se baser sur les futurs standards du web
WebComponents
ES6 / ES7 / TypeScript*
EverGreen Browsers
Emulation due à la concurrence React et Ember
Amélioration des performances
10.
#Ng2BzhCmp #BzhCmp
Surcouche à ES6/ES7
Créé par Microsoft
Collaboration avec Google
Merge avec AtScript
Actuellement en version 1.5-beta
11.
Exemple TypeScriptExemple TypeScript
#Ng2BzhCmp #BzhCmp
import { Annotation } from 'angular2/angular2';
import { Api as ApiSpeakers } from './api/speakers';
@Annotation({
property: 'value'
})
class Talk {
speakers: Array<String>;
thread: String;
constructor(thread: String, api: ApiSpeakers) {
this.thread = thread;
api.get().then((speakers) => {
this.speakers = speakers;
});
}
}
TS
12.
Production Ready ?Production Ready ?
#Ng2BzhCmp #BzhCmp
NO!NO!
13.
Production Ready ?Production Ready ?
#Ng2BzhCmp #BzhCmp
Version Alpha "Developer Preview"
Solution instable
API changeante
Documentation en cours
Pas de Roadmap
27.
BreizhCamp 2015 #BzhCmp
Migration 1.X vers 2.X ?Migration 1.X vers 2.X ?
#Ng2BzhCmp #BzhCmp
Pas de rétrocompatibilitéPas de rétrocompatibilité
Mais comment anticiper ces changements?Mais comment anticiper ces changements?
Classes ES6/TS pour la définition des services
Modules ES6 pour structurer son code
Utiliser le ngNewRouter qui est sera disponible en 1.4 1.5
Préférer la syntaxe "controllerAs" et "bindToController" pour
les directives
30.
ConclusionConclusion
#Ng2BzhCmp #BzhCmp
Angular 2 c'est comme le prochain Star WarsAngular 2 c'est comme le prochain Star Wars
tout le monde l'attend, maistout le monde l'attend, mais
personne ne sait si ça sera à lapersonne ne sait si ça sera à la
hauteurhauteur