Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
•
0 likes•287 views
Slides for my talk with @cbalit at the DevFest Toulouse 2017
Recommended
Recommended
More Related Content
Similar to Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
Similar to Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27 (20)
More from Horacio Gonzalez
More from Horacio Gonzalez (20)
Recently uploaded
Recently uploaded (20)
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
- 1. Mixité dans le monde des Web Components Horacio Gonzalez @LostInBrittany Cyril Balit @cbalit
- 2. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Horacio Gonzalez @LostInBrittany Cityzen Data http://cityzendata.com Spaniard lost in Brittany, developer, dreamer and all-around geek
- 3. @LostInBrittany @cbalit#WebComponents #DevFestToulouse CTO Front @cbalit Cyril Balit
- 4. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Everything begins with a conversation
- 5. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Both of us have spoken quite a lot about Polymer...
- 6. @LostInBrittany @cbalit#WebComponents #DevFestToulouse We have told everybody about the upcoming revolution of the Web Components
- 7. @LostInBrittany @cbalit#WebComponents #DevFestToulouse About app built brick by brick
- 8. @LostInBrittany @cbalit#WebComponents #DevFestToulouse So we met often, and we decided to do a talk together But about what? Polymer?
- 9. @LostInBrittany @cbalit#WebComponents #DevFestToulouse We have introduced Polymer, explained the Polymer API, done Polymer hands-on labs, taught Polymer...
- 10. @LostInBrittany @cbalit#WebComponents #DevFestToulouse So this time... This time needed to be different
- 11. @LostInBrittany @cbalit#WebComponents #DevFestToulouse The 3 minutes context
- 12. @LostInBrittany @cbalit#WebComponents #DevFestToulouse HTML IMPORTS SHADOW DOM TEMPLATES CUSTOM ELEMENTS Web Components
- 13. @LostInBrittany @cbalit#WebComponents #DevFestToulouse To define your own HTML tag Custom Element <body> ... <script> window.customElements.define('my-element', class extends HTMLElement {...}); </script> <my-element></my-element> </body>
- 14. @LostInBrittany @cbalit#WebComponents #DevFestToulouse To encapsulate subtree and style in an element Shadow DOM <button>Hello, world!</button> <script> var host = document.querySelector('button'); const shadowRoot = host.attachShadow({mode:'open'}); shadowRoot.textContent = 'こんにちは、影の世界!'; </script>
- 15. @LostInBrittany @cbalit#WebComponents #DevFestToulouse To include an html page in another one HTML Imports <link rel="import" href="warnings.html"> <script> var link = document.querySelector('link[rel="import"]'); var content = link.import; // Grab DOM from warning.html's document. var el = content.querySelector('.warning'); document.body.appendChild(el.cloneNode(true)); </script>
- 16. @LostInBrittany @cbalit#WebComponents #DevFestToulouse To have clonable document template Template <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> var t = document.querySelector('#mytemplate'); // Populate the src at runtime. t.content.querySelector('img').src = 'logo.png'; var clone = document.importNode(t.content, true); document.body.appendChild(clone);
- 20. @LostInBrittany @cbalit#WebComponents #DevFestToulouse But in fact, it’s just an element… ● Attributes ● Properties ● Methods ● Events
- 21. @LostInBrittany @cbalit#WebComponents #DevFestToulouse But even more important… Why?
- 22. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Frameworks are born, evolve, are forked, die... And everybody has their favorite one...
- 23. @LostInBrittany @cbalit#WebComponents #DevFestToulouse I learnt it the hard way, as an angular fanboy...
- 24. @LostInBrittany @cbalit#WebComponents #DevFestToulouse When I hit a wall...
- 25. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Encapsulated, reusable and composable widgets for the Web Platform And then I understood...
- 26. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Too pretty to be true?
- 27. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Variations of the same questions But does it really works with <inser techno here/>? And what about the other web components technologies?
- 28. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Objectifs Using web components from different libraries in several webapp frameworks
- 30. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Some after thoughts...
- 31. @LostInBrittany @cbalit#WebComponents #DevFestToulouse All the good things ends... After Nantes, Grenoble, Paris and now Toulouse, it's the last time we do this talk...
- 32. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Because it is not needed anymore!
- 33. @LostInBrittany @cbalit#WebComponents #DevFestToulouse But they are lots of web component libraries! Do all of them work with the frameworks as well as Polymer or Vanilla elements?
- 34. @LostInBrittany @cbalit#WebComponents #DevFestToulouse Well, in fact the DO They are all standards compliant custom elements! You can mix and match at will
- 35. @LostInBrittany @cbalit#WebComponents #DevFestToulouse We want the code! And you can get it: https://github.com/LostInBrittany/web-components-in-frameworks https://github.com/LostInBrittany/a-world-outside-polymer