Angular2 et les standards du Web

Conférence donnée au DevFest Nantes 2016

Transcript

1. Angular2 et les standards du Web @EmmanuelDemey - Zenika Lille - #angular2
2. La Plateforme Angular2
3. Internationalisation API Décorateurs ECMAScript 2015 Observables Zones HTML Templates Shadow DOM Custom Elements DOM Metadata Reflection API Fetch WebWorkers PWA
4. TC39 Stage 0 - Strawman Stage 1 - Proposal Stage 2 - Draft Stage 3 - Candidate Stage 4 - Finished
5. Internationalisation API
6. Internationalization API • Manipuler une donnée en fonction d’une locale ◦ Collator ◦ NumberFormat ◦ DateTimeFormat
7. 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)
8. 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”
9. 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”
10. oui mais … pourquoi dans Angular2
11. 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 { }
12. Oui mais… pourquoi dans Angular2 {{ price | currency:”EUR”:true:4.2-2 }}
13. 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
14. 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>
15. Les Décorateurs
16. Les Décorateurs • Fonctions pour ajouter des métadonnées à des objets JS ◦ Property, Method, Class, Parameter
17. Les Décorateurs @Input public props: string; function Input( … ){ }
18. Les Factories @Input(“inputName”) public props: string; function Input(inputName){ return function(...) { } }
19. 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;
20. 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); }
21. Mon deuxième décorateur... @Injectable class DevFestService { constructor(service: Service) { } } • Class Decorator pour l’Injection de Dépendances
22. 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; }
23. Oui… mais niveau Runtime var __decorate = function () { … }; function Injectable(target) { … } var DevFestService = (function () { function DevFestService() {...} DevFestService = __decorate([ Injectable ], DevFestService); return DevFestService; }());
24. oui mais … pourquoi dans Angular2
25. 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
26. 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(){ … } }
27. Les Zones
28. Le problème... startTimer() goToBordeaux(); setTimeout( _ => { veryLongTask() }, 0); setTimeout( _ => { veryLongTask() }, 0); goBackToLille(); endTimer()
29. hooks for the event-loop
30. Création d’une Zone zone.fork( specConfig ) .run(function(){ ... });
31. ZoneSpec interface ZoneSpec { onScheduleTask: () => {}, onInvokeTask: () => {}, onHandleError: () => {}, onHasTask: () => {} }
32. Monkey Patch window.setTimeout = function(c, time){ setTimeout(function(){ c(); }, time); } Zone.current.onScheduleTask(); Zone.current.onInvokeTask(); try { } catch (e){ Zone.current.onHandleError() }
34. Démo
35. oui mais … pourquoi dans Angular2
36. Oui mais… pourquoi dans Angular2 • Change Detection • Stacktraces complètes
37. Désactivation des zones • Animations • Analytics • Evénements trop fréquents
38. 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); }); } }
39. Emmanuel DEMEY Zenika LILLE @EmmanuelDEMEY