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
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
51
Web Workers
mahcr
0
30
PWA: Web app con super poderes
mahcr
0
58
Redux - NgRx v8
mahcr
0
76
AMP ¿Como iniciar?
mahcr
0
48
Volando_con_el_Assistant.pdf
mahcr
0
130
Intro to Angular
mahcr
2
38
Angular Elements
mahcr
0
45
The beauty of NgRx
mahcr
0
56
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
The Pragmatic Product Professional
lauravandoore
36
7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A designer walks into a library…
pauljervisheath
209
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
BBQ
matthewcrist
89
9.9k
Agile that works and the tools we love
rasmusluckow
331
21k
Embracing the Ebb and Flow
colly
88
4.9k
Code Review Best Practice
trishagee
72
19k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
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