Post on 10-May-2015
description
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