web components - presented at js-montréal jun 2014
DESCRIPTION
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.TRANSCRIPT
Why and How theWeb Components ?
Sacha Leprêtre @sachalepretre
<*/>
JS-Montréal Jun 2014
Intro: Lessons learned during the development of the project
Motto.<*/>
MOTTO:AnHTML5 editor using web components
Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014http://mottoeditr.nteo.ca/
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);
RESOURCES
• http://www.w3.org/TR/components-intro/
• http://www.x-tags.org/index• http://mozilla.github.io/brick/index.ht
ml
• http://www.polymer-project.org/docs/start/usingelements.html
<*/>
Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
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
RESOURCES/POLYMER<*/>
Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
Why ?<*/>
Web Components are the ideal widgets we’ve never have !
<iframe>an extreme, not without implications
javascript widgetsFrameworksLibrairies
The moreDIRECTCONCRETEIn this direction
The moreINDIRECT
ABSTRACTEDIn 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
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);
Polyfills ++<*/>
Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
- X-tag - Polymer
Compatibilities<*/>
Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
http://www.polymer-project.org/resources/compatibility.html
Native vs polyfill<*/>
Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
Native vs polyfill.. Fragments (shadow-root), wrappers
Chrome Safari
How they work ? …requirements<*/>
- CustomElement- HTMLTemplate- Scoping
- Discussions…
Sacha Leprêtre @sachalepretre - Web Components - JS Montréal Jun 2014
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
Questions / More info
@sachalepretre