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.
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);
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);
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
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.