Web Components - presented at JS-Montréal Jun 2014
•Download as PPTX, PDF•
1 like•765 views
Web Components (W3C) are very promising for the web, libraries / polyfills as Polymer, X-tag / Brick allow us to benefit them right now. But what there is behind these libraries? To enlighten on possible technological choices, Sacha will introduce the strategies used by them and give us a quick overview on Lightly a new library he designed.
More Related Content
Similar to Web Components - presented at JS-Montréal Jun 2014
Similar to Web Components - presented at JS-Montréal Jun 2014 (20)
Recently uploaded
Recently uploaded (20)
Web Components - presented at JS-Montréal Jun 2014
- 1. Why and How the Web Components ? Sacha Leprêtre @sachalepretre JS-Montréal Jun 2014
- 2. Intro: Lessons learned during the development of the project Motto. MOTTO: An HTML5 editor using web components Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014 http://mottoeditr.nteo.ca/
- 3. What we are trying to solve… … <body> <img src=’…/animage.png’ width=’’ height=’’ ></img> … <video src=’http:/…/avideo.mp4’ controls></video> … <myComponent att1=’…’ attn=’…’></myComponent> </body> </html> Our own custom HTML tags ! And below with JS… Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014 var el = document.createElement(’myComponent’); el.setAttribute(’att1’,’…’); document.body.appendChild(el);
- 4. RESOURCES • http://www.w3.org/TR/components-intro/ • http://www.x-tags.org/index • http://mozilla.github.io/brick/index.html • http://www.polymer- project.org/docs/start/usingelements.html Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
- 5. RESOURCES/BRICKS Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014 https://developer.mozilla.org/en- US/Apps/Tools_and_frameworks/Web_components
- 9. RESOURCES/POLYMER Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
- 10. Why ? Web Components are the ideal widgets we’ve never have ! <iframe>an extreme, not without implications javascript widgets Frameworks Librairies The more DIRECT CONCRETE In this direction The more INDIRECT ABSTRACTE D In this direction Parsing at runtime Compiled <webcomponents> of w3c (when full implemented by browsers) ! <webcomponents> of today (polyfills++) Pure DOM Pure JS Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
- 11. What else ? Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014 var el = document.querySelector(’myComponent’); var el2 = el.cloneNode(false); document.body.appendChild(el2);
- 12. Polyfills ++ Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014 - X-tag - Polymer
- 13. Compatibilities Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014 http://www.polymer-project.org/resources/compatibility.html
- 14. Native vs polyfill Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014 Native vs polyfill.. Fragments (shadow-root), wrappers Chrome Safari
- 15. How they work ? …requirements - CustomElement - HTMLTemplate - Scoping - Discussions… Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
- 16. Differents ways... - Custom Element Définition - W3C: (tags) and/or JS - Polymer: tags and/or JS - X-tags bricks: JS - Lïghtly: tags and/or JS Discussions… Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
- 17. Questions / More info @sachalepretre
Editor's Notes
- Web Components (W3C) are very promising for the web, libraries / polyfills as Polymer, X-tag / Brick allow us to benefit them right now. But what there is behind these libraries? To enlighen on possible technological choices, Sacha will introduce the strategies used by them and give us a quick overview on Lightly a new library he designed.
- Un grand espace à prendre vers la zone PUR DOM.