Lazy Loading en Just Angular : Aïe ?

Transcript

1. Lazy Loading en Just Angular : Aïe ? 27 Juin 2017
2. $ whoami Igor Laborie Expert Java & Web @ @ilaborie ✉ igor@monkeypatch.io
3. Roadmap 1. Être Lazy en TypeScript 2. Activer le lazy-loading 3. Stratégies de chargement 4. Dépendances paresseuses Photo de Natalie Fox on Unsplash
4. Être lazy en TypeScript Paresseux à gorge brune
 (Bradypus variegatus) Lac Gatun, République de Panama Attribution: Tauchgurke [Public domain], via Wikimedia Commons
5. Live Coding Photo de Claudiu Lupu de Unsplash
6. Bilan sur le Lazy-Loading • gagner du temps • gagner de la mémoire • permet le traitement sur des flux ∞ • un peu moins lisible • le Supplier doit être sans effets de bord
7. Activer le lazy-loading Paresseux à 2 doigts (Choloepus didactylus) Zoo de Buffalo, New York By Dave Pape (Own work) [Public domain], via Wikimedia Commons
8. Live Coding Photo de Claudiu Lupu de Unsplash
9. Mesures * aucun animal n'a été maltraité durant les builds 0 & 1: module B (material)
 2: module C (d3js) 3: module A
10. Plutôt facile • lié aux modules et aux routes
 => maîtriser les modules, le routing
 => bien modéliser les dépendances du projet • ⚠ Ne pas oublier d'enlever les imports des modules lazy
11. Avant
12. Après
13. 0/ Mesurez ! • On peut se baser sur la taille des bundles et des chuncks • ou utiliser les outils de développement de votre navigateur, s'il peut simuler des connections plus lente (throttling)
14. 1/ Supprimez les dépendances
15. 2/ ajoutez les routes avec loadChildren
16. 3/ mettez à jour les routes des modules
17. Stratégies de chargement Paresseux à gorge brune
 (Bradypus variegatus) Cahuita National Park, Costa Rica By Christian Mehlführer, User:Chmehl (Own work) [CC BY 2.5], via Wikimedia Commons
18. Live Coding Photo de Claudiu Lupu de Unsplash
19. Trop facile • On peut facilement choisir comment on charge les modules • ⚠ La classe PreloadingStrategy est marquée 'Experimental'
20. 1/ Ajoutez un preloadingStrategy
21. 2/ Custom preloader
22. Dépendances paresseuses Paresseux à 2 doigts (Choloepus didactylus) Zoo New England, Boston By Eric Kilby from Somerville, MA, USA (Mom Sloth Carrying Big Baby) [CC BY-SA 2.0], via Wikimedia Commons
23. Live Coding Photo de Claudiu Lupu de Unsplash
24. Ouch ! • ⚠ Problème avec les singletons injectés
 => CoreModule
 => ou exposer de 2 façon le module (forRoot avec les providers pour les singletons) • Mais on arrive quand même à faire ce qu'on veut
25. forRoot
26. Conclusion • Réduction du 'Web App Gap': 
 optimisation assets,
 AOT,
 lazy-loading,
 server-side rendering,
 ... • Bien concevoir ses modules et routes
 ⚠ bien connaître son application
27. By Masteraah [CC BY-SA 2.0], via Wikimedia Commons Q / A