Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular_Elements.pdf

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Mariano Alvarez Mariano Alvarez
July 13, 2019
110
0

 Angular_Elements.pdf

Avatar for Mariano Alvarez

Mariano Alvarez

July 13, 2019

More Decks by Mariano Alvarez

See All by Mariano Alvarez
Vainilla Redux
Avatar for Mariano Alvarez mahcr
0
72
Web Workers
Avatar for Mariano Alvarez mahcr
0
38
PWA: Web app con super poderes
Avatar for Mariano Alvarez mahcr
0
65
Redux - NgRx v8
Avatar for Mariano Alvarez mahcr
0
87
AMP ¿Como iniciar?
Avatar for Mariano Alvarez mahcr
0
59
Volando_con_el_Assistant.pdf
Avatar for Mariano Alvarez mahcr
0
140
Intro to Angular
Avatar for Mariano Alvarez mahcr
2
53
Angular Elements
Avatar for Mariano Alvarez mahcr
0
60
The beauty of NgRx
Avatar for Mariano Alvarez mahcr
0
72

Featured

See All Featured
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
300
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
860
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.7k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
680
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.4k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.3k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
57k

Transcript

  1. Angular Elements Reutilización de componentes con

  2. @malvarezcr ¿Quién soy? Web Practice Lead Co-Organizador de Angular Costa

    Rica Fan de JS, TS, NG, Web Techs, Pizza, Emojis Mariano Álvarez

  3. @malvarezcr GitHub https://github.com/mahcr/angular-elements

  4. Conceptos

  5. @malvarezcr ¿Qué es Angular?

  6. @malvarezcr ¿Qué es Angular?

  7. @malvarezcr ¿Qué son Web Components? Basado en: • Template Elements

    • Shadow DOM • JS Modules • Custom Elements

  8. @malvarezcr ¿Qué son Web Components?

  9. @malvarezcr ¿Qué son Web Components?

  10. @malvarezcr ¿Qué son Web Components?

  11. None

  12. @malvarezcr Pero, ¿Qué es Angular Elements?

  13. None

  14. @malvarezcr ¿Qué es Angular Elements?

  15. @malvarezcr ¿Qué es Angular Elements?

  16. @malvarezcr ¿Qué es Angular Elements?

  17. @malvarezcr ¿Qué es Angular Elements?

  18. @malvarezcr ¿Qué es Angular Elements? • Uso en otros frameworks

    • Micro Front-Ends • Uso de syntaxis de Angular PROS • Server side / Content apps • Versionamiento / Deployment • Soportado por los browsers excepto por …….

  19. @malvarezcr ¿Qué es Angular Elements? • Uso de polyfills •

    Se generan 3 archivos • Tamaño del bundle CONS Ivy

  20. @malvarezcr ¿Qué es Angular Elements? • Uso de polyfills -

    Differential Loading • Se generan 3 archivos - Ngx-build-plus • Tamaño del bundle - Pendiente Soluciones Ivy

  21. @malvarezcr ¿Qué es Angular Elements? Differential Loading

  22. @malvarezcr ¿Qué es Angular Elements? • Uso de polyfills -

    Differential Loading • Se generan 3 archivos - Ngx-build-plus • Tamaño del bundle - Pendiente Soluciones Ivy

  23. @malvarezcr ¿Qué es Angular Elements? NGX-build-plus

  24. @malvarezcr ¿Qué es Angular Elements? NGX-build-plus ng build --prod --single-bundle

    ngx-build-plus

  25. @malvarezcr ¿Qué es Angular Elements? • Uso de polyfills -

    Differential Loading • Se generan 3 archivos - Ngx-build-plus • Tamaño del bundle - Pendiente Soluciones Ivy

  26. Futuro

  27. Demo

  28. ⚡Conclusión

  29. Angular Costa Rica • Facebook, YouTube, Medium @angularcostarica • Twitter

    @angularcr