Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular_Elements.pdf
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Mariano Alvarez
July 13, 2019
0
100
Angular_Elements.pdf
Mariano Alvarez
July 13, 2019
Tweet
Share
More Decks by Mariano Alvarez
See All by Mariano Alvarez
Vainilla Redux
mahcr
0
58
Web Workers
mahcr
0
31
PWA: Web app con super poderes
mahcr
0
59
Redux - NgRx v8
mahcr
0
79
AMP ¿Como iniciar?
mahcr
0
49
Volando_con_el_Assistant.pdf
mahcr
0
130
Intro to Angular
mahcr
2
38
Angular Elements
mahcr
0
47
The beauty of NgRx
mahcr
0
56
Featured
See All Featured
Building the Perfect Custom Keyboard
takai
2
690
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
150
Building a Scalable Design System with Sketch
lauravandoore
463
34k
KATA
mclloyd
PRO
34
15k
Building an army of robots
kneath
306
46k
Balancing Empowerment & Direction
lara
5
890
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
170
Speed Design
sergeychernyshev
33
1.5k
Prompt Engineering for Job Search
mfonobong
0
160
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Transcript
Angular Elements Reutilización de componentes con
@malvarezcr ¿Quién soy? Web Practice Lead Co-Organizador de Angular Costa
Rica Fan de JS, TS, NG, Web Techs, Pizza, Emojis Mariano Álvarez
@malvarezcr GitHub https://github.com/mahcr/angular-elements
Conceptos
@malvarezcr ¿Qué es Angular?
@malvarezcr ¿Qué es Angular?
@malvarezcr ¿Qué son Web Components? Basado en: • Template Elements
• Shadow DOM • JS Modules • Custom Elements
@malvarezcr ¿Qué son Web Components?
@malvarezcr ¿Qué son Web Components?
@malvarezcr ¿Qué son Web Components?
None
@malvarezcr Pero, ¿Qué es Angular Elements?
None
@malvarezcr ¿Qué es Angular Elements?
@malvarezcr ¿Qué es Angular Elements?
@malvarezcr ¿Qué es Angular Elements?
@malvarezcr ¿Qué es Angular Elements?
@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 …….
@malvarezcr ¿Qué es Angular Elements? • Uso de polyfills •
Se generan 3 archivos • Tamaño del bundle CONS Ivy
@malvarezcr ¿Qué es Angular Elements? • Uso de polyfills -
Differential Loading • Se generan 3 archivos - Ngx-build-plus • Tamaño del bundle - Pendiente Soluciones Ivy
@malvarezcr ¿Qué es Angular Elements? Differential Loading
@malvarezcr ¿Qué es Angular Elements? • Uso de polyfills -
Differential Loading • Se generan 3 archivos - Ngx-build-plus • Tamaño del bundle - Pendiente Soluciones Ivy
@malvarezcr ¿Qué es Angular Elements? NGX-build-plus
@malvarezcr ¿Qué es Angular Elements? NGX-build-plus ng build --prod --single-bundle
ngx-build-plus
@malvarezcr ¿Qué es Angular Elements? • Uso de polyfills -
Differential Loading • Se generan 3 archivos - Ngx-build-plus • Tamaño del bundle - Pendiente Soluciones Ivy
Futuro
Demo
⚡Conclusión
Angular Costa Rica • Facebook, YouTube, Medium @angularcostarica • Twitter
@angularcr