The W3C has been working on a Web Components standard for almost three years, but it is still a work in progress. But polyfills like allows current developers to use Web Components today, and incorporate to their apps widgets from any library of web components. The best known of these libraries is Polymer, but it isn't the only one. In this talk we are going to compare Polymer, the '800 lb gorilla' in the Web Component field, with several of its lesser known competitors: Mozilla's X-Tags and Briks, and Bosonic, and even homemade ReactJS webcomponents We will build an Angular JS application where, instead of directives, we will use webcomponents done with Polymer, X-Tag and ReactJS. And we will take a look to the performances in both Chrome and Firefox.

1. @LostInBrittany#MixingWebComponents @pariswebComps
Mixing Web Components
Horacio Gonzalez
@LostInBrittany

2. @LostInBrittany#MixingWebComponents @pariswebComps
Horacio Gonzalez
@LostInBrittany
Cityzen Data
http://cityzendata.com
Spaniard lost in Brittany,
developer, dreamer and all-
around geek

3. @LostInBrittany#MixingWebComponents @pariswebComps
Introduction
Because I love to tell old stories

4. @LostInBrittany#MixingWebComponents @pariswebComps
Polymer tour

5. @LostInBrittany#MixingWebComponents @pariswebComps
Web components == Revolution
Image: bu.edu

6. @LostInBrittany#MixingWebComponents @pariswebComps
Build a world brick by brick
Images: BitRebels & Brickset

7. @LostInBrittany#MixingWebComponents @pariswebComps
Variations of some questions
But does it really works with
<inser techno here/>?
And what about the other
web components technologies?

8. @LostInBrittany#MixingWebComponents @pariswebComps
Before summer
everything was ready
J'étais tranquille, j'étais pénard...

9. @LostInBrittany#MixingWebComponents @pariswebComps
And the Google made me a gift
The gift of living interesting moments...

10. @LostInBrittany#MixingWebComponents @pariswebComps
For several days I didn't slept
And tiredness began to take its toll

11. @LostInBrittany#MixingWebComponents @pariswebComps
But it worked
My polymer-beers lab was rewritten in time

12. @LostInBrittany#MixingWebComponents @pariswebComps
Will it work today?
I had prepared a rather traditional slidedeck
Comparing Polymer with X-Tag and Bosonic
Explaining how to make them work together

13. @LostInBrittany#MixingWebComponents @pariswebComps
So I decided a new approach
The truth is in the code
I FIND YOUR LACK OF SOURCE CODE
DISTURBING

14. @LostInBrittany#MixingWebComponents @pariswebComps
Web components polyfill
Making developers life a bit easier

15. @LostInBrittany#MixingWebComponents @pariswebComps
Web components polyfill library
Set of polyfills built on top of the Web Components specifications

16. @LostInBrittany#MixingWebComponents @pariswebComps
What's in webcomponents.js?
● Web Components
○ Custom Elements .
○ HTML Imports
○ Shadow DOM
● DOM
○ WeakMap
○ Mutation Observers

17. @LostInBrittany#MixingWebComponents @pariswebComps
Your own webcomponents!
Building directly over webcomponents.js

18. @LostInBrittany#MixingWebComponents @pariswebComps
Or webcomponent libraries
Also built on top of webcomponents.js

19. @LostInBrittany#MixingWebComponents @pariswebComps
Many webcomponents libraries
Based on the same polyfill

20. @LostInBrittany#MixingWebComponents @pariswebComps
Mixing webcomponents
My challenge today

21. @LostInBrittany#MixingWebComponents @pariswebComps
Objectifs
Using webcomponents from different
libraries in an AngularJS webapp

22. @LostInBrittany#MixingWebComponents @pariswebComps
Base project: Angular Beers!
https://github.com/LostInBrittany/angular-beers

23. @LostInBrittany#MixingWebComponents @pariswebComps
https://github.com/LostInBrittany/beyond-polymer
Let's show the code!
Image: dcplanet.fr
Coding is a superpower, friends

24. @LostInBrittany#MixingWebComponents @pariswebComps
angular-polymer-beers
Because directives are subpar webcomponents

25. @LostInBrittany#MixingWebComponents @pariswebComps
angular-polymer-xtag-beers
Polymer and X-tags play along nicely

26. @LostInBrittany#MixingWebComponents @pariswebComps
angular-polymer-react-beers
Thanks to Mathieu Ancelin (@TrevorReznik)

27. @LostInBrittany#MixingWebComponents @pariswebComps
angular-polymer-xtag-react-beers
And they all are happy...

28. @LostInBrittany#MixingWebComponents @pariswebComps
Thank you !