Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
74
Web Workers
Avatar for Mariano Alvarez mahcr
0
40
PWA: Web app con super poderes
Avatar for Mariano Alvarez mahcr
0
67
Redux - NgRx v8
Avatar for Mariano Alvarez mahcr
0
88
AMP ¿Como iniciar?
Avatar for Mariano Alvarez mahcr
0
60
Volando_con_el_Assistant.pdf
Avatar for Mariano Alvarez mahcr
0
140
Intro to Angular
Avatar for Mariano Alvarez mahcr
2
56
Angular Elements
Avatar for Mariano Alvarez mahcr
0
61
The beauty of NgRx
Avatar for Mariano Alvarez mahcr
0
73

Featured

See All Featured
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
11k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
36k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
460
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
230
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
430
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.8k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
420
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
250
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
540
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.2k

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