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