Angular Elements

This is slides are in Spanish. The whole presentation explains how to create web components through Angular Elements and reuse them in different frameworks such as Angular and React. It's also mentions the basics of Angular and Web Components.

Transcript

1. Angular Elements El 5to elemento se escribirá 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. Conceptos
4. @malvarezcr ¿Qué es Angular?
5. @malvarezcr ¿Qué es Angular?
6. @malvarezcr ¿Qué son Web Components? Basado en: • Template Elements • Shadow DOM • JS Modules • Custom Elements
7. @malvarezcr ¿Qué son Web Components?
8. @malvarezcr ¿Qué son Web Components?
9. @malvarezcr ¿Qué son Web Components?
11. @malvarezcr Pero, ¿Qué es Angular Elements?
13. @malvarezcr ¿Qué es Angular Elements?
14. @malvarezcr ¿Qué es Angular Elements?
15. @malvarezcr ¿Qué es Angular Elements?
16. @malvarezcr ¿Qué es Angular Elements?
17. @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 …….
18. @malvarezcr ¿Qué es Angular Elements? • Uso de polyfills • Se generan 3 archivos • Tamaño del bundle CONS Ivy
19. @malvarezcr ¿Qué es Angular Elements? • Uso de polyfills - Differential Loading • Se generan 3 archivos - Ngx-build-plus • Tamaño del bundle - Pendiente Soluciones Ivy
20. @malvarezcr ¿Qué es Angular Elements? Differential Loading
21. @malvarezcr ¿Qué es Angular Elements? • Uso de polyfills - Differential Loading • Se generan 3 archivos - Ngx-build-plus • Tamaño del bundle - Pendiente Soluciones Ivy
22. @malvarezcr ¿Qué es Angular Elements? NGX-build-plus
23. @malvarezcr ¿Qué es Angular Elements? NGX-build-plus ng build --prod --single-bundle ngx-build-plus
24. @malvarezcr ¿Qué es Angular Elements? • Uso de polyfills - Differential Loading • Se generan 3 archivos - Ngx-build-plus • Tamaño del bundle - Pendiente Soluciones Ivy
25. Futuro
26. Demo
27. ⚡Conclusión
28. Angular Costa Rica • Facebook, YouTube, Medium @angularcostarica • Twitter @angularcr