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
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
110
RDoc meets YARD
okuramasafumi
4
170
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
860
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
520
Swift Updates - Learn Languages 2025
koher
2
470
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
300
Testing Trophyは叫ばない
toms74209200
0
870
Reading Rails 1.0 Source Code
okuramasafumi
0
150
Rancher と Terraform
fufuhu
2
400
Cache Me If You Can
ryunen344
2
720
Featured
See All Featured
Side Projects
sachag
455
43k
Documentation Writing (for coders)
carmenintech
74
5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Building Adaptive Systems
keathley
43
2.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
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