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

Angular_Elements.pdf

Mariano Alvarez
July 13, 2019
0
94

 Angular_Elements.pdf

Mariano Alvarez

July 13, 2019
Tweet

More Decks by Mariano Alvarez

See All by Mariano Alvarez
Vainilla Redux
mahcr
0
42
Web Workers
mahcr
0
26
PWA: Web app con super poderes
mahcr
0
55
Redux - NgRx v8
mahcr
0
73
AMP ¿Como iniciar?
mahcr
0
42
Volando_con_el_Assistant.pdf
mahcr
0
120
Intro to Angular
mahcr
2
31
Angular Elements
mahcr
0
42
The beauty of NgRx
mahcr
0
49

Featured

See All Featured
BBQ
matthewcrist
86
9.5k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
It's Worth the Effort
3n
184
28k
Code Review Best Practice
trishagee
66
17k
Designing for humans not robots
tammielis
250
25k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Invisible Side of Design
smashingmag
299
50k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Being A Developer After 40
akosma
89
590k

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