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
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
720
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
Discover Metal 4
rei315
2
130
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Team operations that are not burdened by SRE
kazatohiei
1
310
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
510
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
79
26k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
6
3.4k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
210
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Designing Experiences People Love
moore
142
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Cult of Friendly URLs
andyhume
79
6.5k
Navigating Team Friction
lara
187
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Building Applications with DynamoDB
mza
95
6.5k
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