Ah, les web components, quelle belle idée ! Du développement web basé enfin sur une vraie architecture en composants, de la réutilisation, de la modularisation, de l'encapsulation… Mais en attendant que le W3C décide de sortir le standard, ce qu'on a dans les mains c'est une panoplie de bibliothèques de polyfills : Polymer, X-Tag, Bosomic… Dans ce talk nous allos répondre à la question : "OK, le futur sera beau, mais aujourd'hui, si je fais des composants avec une bibliothèque X et mon pote en fait avec une bibliothèque Y, je peux les utiliser dans la même application ? Et ils marcheront dans mon framework favori ?".

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

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

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

4. @LostInBrittany#MixingWebComponents @bestofwebconf
Polymer tour

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

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

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

8. @LostInBrittany#MixingWebComponents @bestofwebconf
And one year ago 1.0 arrived
It was time to really show off!

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

10. @LostInBrittany#MixingWebComponents @bestofwebconf
Mixing webcomponents
My challenge today

11. @LostInBrittany#MixingWebComponents @bestofwebconf
Objectifs
Using webcomponents from different
libraries in an AngularJS webapp

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

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

14. @LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-beers
Because directives are subpar webcomponents

15. @LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-beers

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

17. @LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-xtag-beers

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

19. @LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-react-beers

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

21. @LostInBrittany#MixingWebComponents @bestofwebconf
angular-polymer-xtag-react-beers

22. @LostInBrittany#MixingWebComponents @bestofwebconf
And what about Angular 2
Or other modern frameworks

23. @LostInBrittany#MixingWebComponents @bestofwebconf
Modern frameworks
support webcomponents
Example Angular2-Polymer par @ManekiNekko
https://github.com/webcomponents/angular-
interop/

24. @LostInBrittany#MixingWebComponents @bestofwebconf
Thank you !

25. @LostInBrittany#MixingWebComponents @bestofwebconf
Web components polyfill
Making developers life a bit easier