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
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
370
理論と実務のギャップを超える
eycjur
0
170
Cursorハンズオン実践!
eltociear
2
1.2k
チームの境界をブチ抜いていけ
tokai235
0
200
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
340
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
310
Google Opalで使える37のライブラリ
mickey_kubo
2
120
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.4k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
CSC305 Lecture 05
javiergs
PRO
0
230
Le côté obscur des IA génératives
pascallemerrer
0
150
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
Docker and Python
trallard
46
3.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Site-Speed That Sticks
csswizardry
13
910
Music & Morning Musume
bryan
46
6.9k
Done Done
chrislema
185
16k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Making Projects Easy
brettharned
120
6.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
A better future with KSS
kneath
239
18k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
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