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
40
Web Workers
mahcr
0
25
PWA: Web app con super poderes
mahcr
0
55
Redux - NgRx v8
mahcr
0
72
AMP ¿Como iniciar?
mahcr
0
42
Volando_con_el_Assistant.pdf
mahcr
0
120
Intro to Angular
mahcr
2
30
Angular Elements
mahcr
0
42
The beauty of NgRx
mahcr
0
49

Featured

See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
Fireside Chat
paigeccino
34
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
How STYLIGHT went responsive
nonsquared
95
5.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Building Your Own Lightsaber
phodgson
103
6.1k
Music & Morning Musume
bryan
46
6.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