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

Angular_Elements.pdf

Avatar for Mariano Alvarez Mariano Alvarez
July 13, 2019
0
100

 Angular_Elements.pdf

Avatar for Mariano Alvarez

Mariano Alvarez

July 13, 2019
Tweet

More Decks by Mariano Alvarez

See All by Mariano Alvarez
Vainilla Redux
Avatar for Mariano Alvarez mahcr
0
46
Web Workers
Avatar for Mariano Alvarez mahcr
0
30
PWA: Web app con super poderes
Avatar for Mariano Alvarez mahcr
0
58
Redux - NgRx v8
Avatar for Mariano Alvarez mahcr
0
76
AMP ¿Como iniciar?
Avatar for Mariano Alvarez mahcr
0
46
Volando_con_el_Assistant.pdf
Avatar for Mariano Alvarez mahcr
0
120
Intro to Angular
Avatar for Mariano Alvarez mahcr
2
36
Angular Elements
Avatar for Mariano Alvarez mahcr
0
45
The beauty of NgRx
Avatar for Mariano Alvarez mahcr
0
54

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.8k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
It's Worth the Effort
Avatar for 3n 3n
185
28k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k

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