mixing web components - best of web paris - 2016 06-09
TRANSCRIPT
![Page 1: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/1.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Mixing Web ComponentsHoracio Gonzalez @LostInBrittany
![Page 2: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/2.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Horacio Gonzalez
@LostInBrittany
Cityzen Datahttp://cityzendata.com
Spaniard lost in Brittany, developer, dreamer and all-around geek
![Page 3: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/3.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Introduction
Because I love to tell old stories
![Page 4: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/4.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Polymer tour
![Page 5: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/5.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Web components == Revolution
Image: bu.edu
![Page 6: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/6.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Build a world brick by brick
Images: BitRebels & Brickset
![Page 7: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/7.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Variations of some questions
But does it really works with <inser techno here/>?
And what about the other web components technologies?
![Page 8: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/8.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
And one year ago 1.0 arrived
It was time to really show off!
![Page 9: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/9.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
So I decided a new approach
The truth is in the code
I FIND YOUR LACK OF SOURCE CODE DISTURBING
![Page 10: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/10.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Mixing webcomponents
My challenge today
![Page 11: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/11.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Objectifs
Using webcomponents from different libraries in an AngularJS webapp
![Page 12: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/12.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Base project: Angular Beers!
https://github.com/LostInBrittany/angular-beers
![Page 13: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/13.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
https://github.com/LostInBrittany/beyond-polymer
Let's show the code!
Image: dcplanet.fr
Coding is a superpower, friends
![Page 14: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/14.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-beers
Because directives are subpar webcomponents �
![Page 15: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/15.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-beers
![Page 16: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/16.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-xtag-beers
Polymer and X-tags play along nicely
![Page 17: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/17.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-xtag-beers
![Page 18: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/18.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-react-beers
Thanks to Mathieu Ancelin (@TrevorReznik)
![Page 19: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/19.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-react-beers
![Page 20: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/20.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-xtag-react-beers
And they all are happy...
![Page 21: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/21.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-xtag-react-beers
![Page 22: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/22.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
And what about Angular 2
Or other modern frameworks
![Page 23: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/23.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Modern frameworks support webcomponents
Example Angular2-Polymer par @ManekiNekkohttps://github.com/webcomponents/angular-
interop/
![Page 24: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/24.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Thank you !
![Page 25: Mixing Web Components - Best of Web Paris - 2016 06-09](https://reader035.vdocuments.us/reader035/viewer/2022062412/58ea4a461a28abc4698b5bdd/html5/thumbnails/25.jpg)
@LostInBrittany#MixingWebComponents @bestofwebconf
Web components polyfill
Making developers life a bit easier