Mixing Web Components - Best Of Web 2016

Transcript

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