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
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Faster Mobile Websites
deanohume
307
31k
Typedesign – Prime Four
hannesfritz
42
2.7k
Agile that works and the tools we love
rasmusluckow
329
21k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Gamification - CAS2011
davidbonilla
81
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
BBQ
matthewcrist
89
9.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Six Lessons from altMBA
skipperchong
28
3.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