Web Components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871951/logo_extrategy_fondo_blu_trasp_1_.png)
Ego Slide
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2779824/profilo001.jpg)
francesco.strazzullo@ideato.it
@TheStrazz86
https://github.com/francesco-strazzullo
https://medium.com/@TheStrazz86
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
https://slides.com/francescostrazzullo
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.
www.webcomponents.org
Why should I care?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Why should I care?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Small and independent chunks of code, communicating in a standard way...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Microservices for Frontend
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Micro Frontends
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
(Maybe next time)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/5194471/Screen_Shot_2018-08-22_at_16.22.20.png)
Webpack + Custom Elements
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
The Good parts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Simple API
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Unopinionated
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Extreme Portability
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
The Bad parts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Testing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Performances?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Invisible Framework
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Stencil
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
One last thing...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Thanks!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)