Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular2 et les standards du Web
Search
Emmanuel DEMEY
November 10, 2016
Programming
0
140
Angular2 et les standards du Web
Conférence donnée au DevFest Nantes 2016
Emmanuel DEMEY
November 10, 2016
Tweet
Share
More Decks by Emmanuel DEMEY
See All by Emmanuel DEMEY
Devoxx France - Stack Elastic
gillespie59
0
250
Il n’y a pas que Angular, React ou VueJS dans la vie
gillespie59
1
300
Progressive Webapps
gillespie59
0
300
How to to choose your next JavaScript Web Framework?
gillespie59
0
200
BBL TypeScript
gillespie59
0
210
Other Decks in Programming
See All in Programming
PipeCDのプラグイン化で目指すところ
warashi
1
280
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
140
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
Discover Metal 4
rei315
2
140
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Gamification - CAS2011
davidbonilla
81
5.4k
Designing for humans not robots
tammielis
253
25k
Visualization
eitanlees
146
16k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building an army of robots
kneath
306
45k
Code Review Best Practice
trishagee
69
18k
Optimizing for Happiness
mojombo
379
70k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Designing for Performance
lara
610
69k
Agile that works and the tools we love
rasmusluckow
329
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Transcript
Angular2 et les standards du Web @EmmanuelDemey - Zenika Lille
- #angular2
La Plateforme Angular2
Internationalisation API Décorateurs ECMAScript 2015 Observables Zones HTML Templates Shadow
DOM Custom Elements DOM Metadata Reflection API Fetch WebWorkers PWA
TC39 Stage 0 - Strawman Stage 1 - Proposal Stage
2 - Draft Stage 3 - Candidate Stage 4 - Finished
Internationalisation API
Internationalization API • Manipuler une donnée en fonction d’une locale
◦ Collator ◦ NumberFormat ◦ DateTimeFormat
Oui mais… pourquoi dans Angular2 new Intl.Collator(locale, options) String.prototype.localeCompare(locale, options)
new Intl.DateTimeFormat(locale, options) Date.prototype.toLocaleString(locale, options) Date.prototype.toLocaleDateString(locale, options) Date.prototype.toLocaleTimeString(locale, options) new Intl.NumberFormat(locale, options) Number.prototype.toLocaleString(locale, options)
DateTimeFormat /* Code */ let formatter = new Intl.DateTimeFormat( “en”,{});
formatter.format(new Date(Date.UTC(2016,10,10,3,0,0))) “11/10/2016” “10/11/2016” let formatter = new Intl.DateTimeFormat( “fr”,{ }); formatter.format(new Date(Date.UTC(2016,10,10,3,0,0))); month: “long” minute: “numeric”, /* 2-digit */ day: “numeric”, /* 2-digit */ year: “numeric”, /* 2-digit */ “novembre” hour: “numeric”, /* 2-digit */ “11 novembre 2016” “11 novembre 2016 04h” “11 novembre 2016 04:00”
NumberFormat /* Code */ let formatter = new Intl.NumberFormat( “en”,{});
formatter.format(1000.59) “1,000.59” “1 000,59” let formatter = new Intl.NumberFormat( “fr”,{ }); formatter.format(1000.57); style: “currency”, /* percent, number */ maximumFractionDigits: 1 currency: “EUR”, /* USD */ currencyDisplay: “name”, /* symbol */ useGrouping: false, “1 000,59 euros” “1000,59 euros” “1000,6 euros”
oui mais … pourquoi dans Angular2
Oui mais… pourquoi dans Angular2 @Pipe({name:”number”}) class NumberPipe { }
@Pipe({name:”percent”}) class PercentPipe { } @Pipe({name:”currency”}) class CurrencyPipe { } @Pipe({name:”date”}) class DatePipe { }
Oui mais… pourquoi dans Angular2 {{ price | currency:”EUR”:true:4.2-2 }}
Oui mais… pourquoi dans Angular2 • Internationalisation du contenu ◦
Utilisation de la directive i18n ◦ Extraction des tous les messages ◦ Traduction (via un fichier .xlf) ◦ Intégration JIT ou AOT ▪ SystemJS, WebPack ou ngc
Oui mais… pourquoi dans Angular2 <p i18n=”Welcome Message”> Hello Nantes!
</p> ./node_modules/.bin/ng-xi18n <trans-unit> <source>Hello Nantes! </source> <target></target> <note from=”description”>Welcome Message</note> </trans-unit>
Les Décorateurs
Les Décorateurs • Fonctions pour ajouter des métadonnées à des
objets JS ◦ Property, Method, Class, Parameter
Les Décorateurs @Input public props: string; function Input( … ){
}
Les Factories @Input(“inputName”) public props: string; function Input(inputName){ return function(...)
{ } }
Les différentes signatures declare type ClassDecorator = (target: Function) =>
Function declare type PropertyDecorator = (target: Object, propertyKey: string) => void; declare type MethodDecorator = (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor) => TypedPropertyDescriptor; declare type ParameterDecorator = (target: Function, propertyKey: string, parameterIndex: number) => void;
Mon premier décorateur... @log sayHello(){ … } function log(target,key,descriptor){ return
descriptor; } let orig = descriptor.value; descriptor.value = function(...args){ console.log(“function called”); return orig.apply(this, args); }
Mon deuxième décorateur... @Injectable class DevFestService { constructor(service: Service) {
} } • Class Decorator pour l’Injection de Dépendances
Mon deuxième décorateur... function Injectable(target){ let original = target; let
newC = function(...args){ args = args.map(s => injector.get(s)); return original.apply(this, args); } newC.prototype = original.prototype; return newC; }
Oui… mais niveau Runtime var __decorate = function () {
… }; function Injectable(target) { … } var DevFestService = (function () { function DevFestService() {...} DevFestService = __decorate([ Injectable ], DevFestService); return DevFestService; }());
oui mais … pourquoi dans Angular2
Oui mais… pourquoi dans Angular2 • Définir les éléments Angular2
• Injection de Dépendances • Créer des Inputs / Outputs • Accéder aux éléments HTML • Intéragir avec l’élément host
Oui mais… pourquoi dans Angular2 //<button click-handler>Click Me</button> @Directive({ selector:
‘[click-handler]’}) export class ClickHandler { @Input() parameter: string; constructor(@Inject(LOCALE_ID) locale) {} @HostBinding(‘click’) click(){ … } }
Les Zones
Le problème... startTimer() goToBordeaux(); setTimeout( _ => { veryLongTask() },
0); setTimeout( _ => { veryLongTask() }, 0); goBackToLille(); endTimer()
hooks for the event-loop
Création d’une Zone zone.fork( specConfig ) .run(function(){ ... });
ZoneSpec interface ZoneSpec { onScheduleTask: () => {}, onInvokeTask: ()
=> {}, onHandleError: () => {}, onHasTask: () => {} }
Monkey Patch window.setTimeout = function(c, time){ setTimeout(function(){ c(); }, time);
} Zone.current.onScheduleTask(); Zone.current.onInvokeTask(); try { } catch (e){ Zone.current.onHandleError() }
None
Démo
oui mais … pourquoi dans Angular2
Oui mais… pourquoi dans Angular2 • Change Detection • Stacktraces
complètes
Désactivation des zones • Animations • Analytics • Evénements trop
fréquents
Désactivation des zones export class AnalyticsService { constructor(private zone:NgZone,private http:
Http){} sendToAnalitics(stats){ this.zone.runOutsideAngular(() => { this.http.post(“/api/analytics”, stats); }); } }
Emmanuel DEMEY Zenika LILLE @EmmanuelDEMEY