Angular_Elements.pdf

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?
12. @malvarezcr Pero, ¿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?
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