Download - Web Components - presented at JS-Montréal Jun 2014

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/

http://mottoeditr.nteo.ca/

http://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

<*/>


http://www.w3.org/TR/components-intro/

http://www.w3.org/TR/components-intro/

http://www.x-tags.org/index



http://mozilla.github.io/brick/index.html

http://mozilla.github.io/brick/index.html

http://www.polymer-project.org/docs/start/usingelements.html



RESOURCES/BRICKS<*/>


https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Web_components



RESOURCES/POLYMER<*/>


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


What else ?<*/>


var el = document.querySelector(’myComponent’);var el2 = el.cloneNode(false);

document.body.appendChild(el2);

Polyfills ++<*/>


- X-tag - Polymer

Compatibilities<*/>


http://www.polymer-project.org/resources/compatibility.html



Native vs polyfill<*/>


Native vs polyfill.. Fragments (shadow-root), wrappers

Chrome Safari

How they work ? …requirements<*/>

- CustomElement- HTMLTemplate- Scoping

- Discussions…


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…


Questions / More info

@sachalepretre

Download - Web Components - presented at JS-Montréal Jun 2014

Top Related