Webcomponents
Everything is AWESOME!
Components
“An individual software component is a software
package, a web service, a web resource, or a
module that encaps...
Components
● encapsulation
● reusability
● communication via interfaces
Components
● encapsulation
● reusability
● communication via interfaces
Today: components for the web ~= jquery plugins
Components
Example: Lightbox http://lokeshdhakar.com/projects/lightbox2/
<script src="js/jquery-1.11.0.min.js"></script>
<...
Components
Example: Lightbox http://lokeshdhakar.com/projects/lightbox2/
<script src="js/jquery-1.11.0.min.js"></script>
<...
Components
Example: Lightbox
<link rel=”import” href=”//cdn.net/elements/lightbox.html”>
<lightbox-images>
<a href=”img/im...
Components
Example: prism.js
Components
Example: prism.js
Components
Example: prism.js
span { display:block }
ShadowDOM - encapsulation
Shadow DOM
<div id=”foo”>Light DOM</div>
<script>
var foo = document.querySelector(‘#foo’);
shadow = foo.createShadowRoot(...
Shadow DOM
Shadow host =
has a shadow root
Normal DOM under the
shadow host =
Light DOM
The content of a shadow host isn’t...
<div id="lego-name">
<img src="img/emmet.jpg">
<a href="">EMMET</a>
<p>An ordinary...</p>
<input type="text"
value="5"
is=...
<div id="lego-name">
<img src="img/emmet.jpg">
<a href="">EMMET</a>
<p>An ordinary...</p>
<input type="text"
value="5"
is=...
<input is=”x-rating”
value=”2”>
<input is=”x-rating”
value=”2”
readonly>
<style>
:host {
border:0;
color:black;
}
:host([r...
New selectors in the shadow:
● :host, :host(.selector), :host(:hover)
● ::content
● :host-context(.selector)
http://rszalo...
Pierce through the boundary:
● ::shadow
selects the elements shadow root
● /deep/
ignores the boundary
http://rszaloki.git...
● abort
● error
● select
● change
● load
http://rszaloki.github.io/webcomponents/shadow_dom/index.html
Shadow DOM
● reset
...
Custom Elements - reuse
Custom elements
var LegoName = document.registerElement('lego-name');
var e1 = new LegoName();
var e2 = document.createEle...
Custom elements
Lifecycle events:
● createdCallback
● attachedCallback
● detachedCallback
● attributeChangedCallback
http:...
Custom elements
var LNameProto = Object.create(HTMLElement.prototype);
LNameProto.createdCallback = function(){
this.inner...
Custom elements
document.registerElement('lego-name', {
prototype: prototype object,
"extends":’li’
});
<li is=”lego-name”...
HTML Import
<link rel="import" href="assets.html"
onload="render()" id="assets">
...
<script>
function render(){
var conte...
HTML Import
● imports load asynchronous
● same-origin policy!
● javascript in the import
○ global object is the window
○ d...
HTML Template
<template>
<div>Everything is AWESOME!</div>
</template>
<script>
…
target.appendChild(
document.importNode(...
HTML Template
<template>
<div>Everything is AWESOME!</div>
</template>
<script>
…
target.appendChild(
document.importNode(...
Webcomponents
● encapsulation - Shadow DOM
● reusability - Custom Elements, HTML Import
● communication via interfaces - A...
Can I use it?
Can I use it?
Custom Elements
HTML Templates
Shadow DOM
HTML Imports
● too much boilerplate
● no declarative api: <element...
Polymer Project
Web Components
● Shadow DOM
● HTML Imports
● Custom Elements
Platform - polyfills
Polymer
DOM
● URL
● WeakMap
● Mutation O...
Platform - polyfills
Polymer
create elements
Polymer
● declarative syntax
● dynamic templates
● two way data binding
● property observation
use elements
Polymer
● widget library
● UI and non-UI elements
● core elements + labs elements
tools
Polymer
Vulcanize: concatenate
the imported elements
designer: http://www.
polymer-project.
org/tools/designer/
Polymer
http://rszaloki.github.io/webcomponents/polymer-demo/lego.html
https://github.com/rszaloki/webcomponents
https://g...
Upcoming SlideShare
Loading in …5
×

Webcomponents at Frontend meetup 2014.06.25

1,395 views

Published on

What are the concepts and the technology behind webcomponents.

Published in: Software, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,395
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webcomponents at Frontend meetup 2014.06.25

  1. 1. Webcomponents Everything is AWESOME!
  2. 2. Components “An individual software component is a software package, a web service, a web resource, or a module that encapsulates a set of related functions (or data).” Component-based software engineering Wikipedia
  3. 3. Components ● encapsulation ● reusability ● communication via interfaces
  4. 4. Components ● encapsulation ● reusability ● communication via interfaces Today: components for the web ~= jquery plugins
  5. 5. Components Example: Lightbox http://lokeshdhakar.com/projects/lightbox2/ <script src="js/jquery-1.11.0.min.js"></script> <script src="js/lightbox.min.js"></script> <link href="css/lightbox.css" rel="stylesheet" /> <a href="img/image-1.jpg" data-lightbox="i1" data-title="My caption"> <img src="img/image-1.jpg"> </a> <a href="img/image-2.jpg" data-lightbox="i1" data-title="My caption2"> <img src="img/image-2.jpg"> </a>
  6. 6. Components Example: Lightbox http://lokeshdhakar.com/projects/lightbox2/ <script src="js/jquery-1.11.0.min.js"></script> <script src="js/lightbox.min.js"></script> <link href="css/lightbox.css" rel="stylesheet" /> <a href="img/image-1.jpg" data-lightbox="i1" data-title="My caption"> <img src="img/image-1.jpg"> </a> <a href="img/image-2.jpg" data-lightbox="i1" data-title="My caption2"> <img src="img/image-2.jpg"> </a> But I’m using YUI :( three request? HTML Captions?
  7. 7. Components Example: Lightbox <link rel=”import” href=”//cdn.net/elements/lightbox.html”> <lightbox-images> <a href=”img/image-1.jpg”> <figure> <img src=”img/image-1.jpg”> <figcaption><b>Lorem</b> Ipsum!</figcaption> </figure> </a> </lightbox-images>
  8. 8. Components Example: prism.js
  9. 9. Components Example: prism.js
  10. 10. Components Example: prism.js span { display:block }
  11. 11. ShadowDOM - encapsulation
  12. 12. Shadow DOM <div id=”foo”>Light DOM</div> <script> var foo = document.querySelector(‘#foo’); shadow = foo.createShadowRoot(); shadow.innerHTML = “Shadow DOM”; </script> http://rszaloki.github.io/webcomponents/shadow_dom/index.html Shadow DOM
  13. 13. Shadow DOM Shadow host = has a shadow root Normal DOM under the shadow host = Light DOM The content of a shadow host isn’t rendered; the content of the shadow root is rendered instead.
  14. 14. <div id="lego-name"> <img src="img/emmet.jpg"> <a href="">EMMET</a> <p>An ordinary...</p> <input type="text" value="5" is="x-rating"> </div> <content select="img"></co <content select="a"></cont <hr> <button>Select</button> <content></content> <script> var foo = document.querySelector(‘#lego-name); shadow = foo.createShadowRoot(); shadow.innerHTML = “ ”; </script>
  15. 15. <div id="lego-name"> <img src="img/emmet.jpg"> <a href="">EMMET</a> <p>An ordinary...</p> <input type="text" value="5" is="x-rating"> </div> <style> :host { text-align:center; display:inline-block; width:200px; ... } :host a ::content a { font-family: impact; font-size:30px; color:green; } </style>
  16. 16. <input is=”x-rating” value=”2”> <input is=”x-rating” value=”2” readonly> <style> :host { border:0; color:black; } :host([readonly]) button { display:none } </style> <label>Rating: </label> <button id="dec">-</button> <span id="value"></span> <button id="inc">+</button>
  17. 17. New selectors in the shadow: ● :host, :host(.selector), :host(:hover) ● ::content ● :host-context(.selector) http://rszaloki.github.io/webcomponents/shadow_dom/index.html Shadow DOM
  18. 18. Pierce through the boundary: ● ::shadow selects the elements shadow root ● /deep/ ignores the boundary http://rszaloki.github.io/webcomponents/shadow_dom/index.html Shadow DOM
  19. 19. ● abort ● error ● select ● change ● load http://rszaloki.github.io/webcomponents/shadow_dom/index.html Shadow DOM ● reset ● resize ● scroll ● selectstart Events that are always stopped at the boundary: Others are retargeted: the event is changed, to look like, they’ve come from the host element
  20. 20. Custom Elements - reuse
  21. 21. Custom elements var LegoName = document.registerElement('lego-name'); var e1 = new LegoName(); var e2 = document.createElement('lego-name'); document.body.appendChild(e1); document.body.appendChild(e2); <lego-name></lego-name> http://rszaloki.github.io/webcomponents/custom_elements/index.html
  22. 22. Custom elements Lifecycle events: ● createdCallback ● attachedCallback ● detachedCallback ● attributeChangedCallback http://rszaloki.github.io/webcomponents/custom_elements/index.html
  23. 23. Custom elements var LNameProto = Object.create(HTMLElement.prototype); LNameProto.createdCallback = function(){ this.innerHTML = “Hello!” } var LName = document.registerElement('lego-name',{ prototype:LNameProto }); <lego-name></lego-name> <lego-name>Hello</lego-name> - source - DOM
  24. 24. Custom elements document.registerElement('lego-name', { prototype: prototype object, "extends":’li’ }); <li is=”lego-name”> http://rszaloki.github.io/webcomponents/custom_elements/index.html
  25. 25. HTML Import <link rel="import" href="assets.html" onload="render()" id="assets"> ... <script> function render(){ var content = document.getElementById('assets').import; document.body.innerHTML = content; } </script> http://rszaloki.github.io/webcomponents/import/index.html
  26. 26. HTML Import ● imports load asynchronous ● same-origin policy! ● javascript in the import ○ global object is the window ○ document is the window.document ○ importDoc = document.currentScript.ownerDocument; importDoc.querySelector(‘template’); ● scripts inside the imports are blocks the parsing ● subimports ● the same import loads only once
  27. 27. HTML Template <template> <div>Everything is AWESOME!</div> </template> <script> … target.appendChild( document.importNode( template.content,true)); </script> http://rszaloki.github.io/webcomponents/template/index.html
  28. 28. HTML Template <template> <div>Everything is AWESOME!</div> </template> <script> … target.appendChild( document.importNode( template.content,true)); </script> http://rszaloki.github.io/webcomponents/template/index.html Invisible and no side effects!
  29. 29. Webcomponents ● encapsulation - Shadow DOM ● reusability - Custom Elements, HTML Import ● communication via interfaces - Attributes, Properties ● helpers - HTML Template
  30. 30. Can I use it?
  31. 31. Can I use it? Custom Elements HTML Templates Shadow DOM HTML Imports ● too much boilerplate ● no declarative api: <element> ● no easy way to let the users override the default styles: parts, css variables
  32. 32. Polymer Project
  33. 33. Web Components ● Shadow DOM ● HTML Imports ● Custom Elements Platform - polyfills Polymer DOM ● URL ● WeakMap ● Mutation Observers Other ● Pointer Events ● Pointer Gestures ● Web Animations
  34. 34. Platform - polyfills Polymer
  35. 35. create elements Polymer ● declarative syntax ● dynamic templates ● two way data binding ● property observation
  36. 36. use elements Polymer ● widget library ● UI and non-UI elements ● core elements + labs elements
  37. 37. tools Polymer Vulcanize: concatenate the imported elements designer: http://www. polymer-project. org/tools/designer/
  38. 38. Polymer http://rszaloki.github.io/webcomponents/polymer-demo/lego.html https://github.com/rszaloki/webcomponents https://gist.github.com/ebidel/6314025 Thanks! Questions? robert.szaloki@euedge.com / @rszaloki

×