Mixing Web Components - Paris Web Components - 2015 09-16
1 like•860 views
The document discusses the integration of various web component libraries, particularly Polymer, with AngularJS applications. It highlights the benefits and challenges of using web components, as well as the available polyfills and resources. The author shares a project demonstrating the combination of these technologies through practical examples and coding.
Mixing Web Components - Paris Web Components - 2015 09-16
- 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
- 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)