Frontend meetup 2014.06.25
-
Upload
eu-edge -
Category
Technology
-
view
72 -
download
0
Transcript of Frontend meetup 2014.06.25
![Page 1: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/1.jpg)
Webcomponents Everything is AWESOME!
![Page 2: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/2.jpg)
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 engineeringWikipedia
![Page 3: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/3.jpg)
Components
● encapsulation● reusability● communication via interfaces
![Page 4: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/4.jpg)
Components
● encapsulation● reusability● communication via interfaces
Today: components for the web ~= jquery plugins
![Page 5: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/5.jpg)
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>
![Page 6: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/6.jpg)
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?
![Page 7: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/7.jpg)
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>
![Page 8: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/8.jpg)
Components Example: prism.js
![Page 9: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/9.jpg)
Components Example: prism.js
![Page 10: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/10.jpg)
Components Example: prism.js
span { display:block }
![Page 11: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/11.jpg)
ShadowDOM - encapsulation
![Page 12: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/12.jpg)
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
![Page 13: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/13.jpg)
Shadow DOMShadow host =
has a shadow root
Normal DOM under the shadow host =
Light DOMThe content of a shadow host isn’t rendered; the content of the shadow root is rendered instead.
![Page 14: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/14.jpg)
<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>
![Page 15: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/15.jpg)
<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>
![Page 16: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/16.jpg)
<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>
![Page 17: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/17.jpg)
New selectors in the shadow:● :host, :host(.selector), :host(:hover)● ::content● :host-context(.selector)
http://rszaloki.github.io/webcomponents/shadow_dom/index.htmlShadow DOM
![Page 18: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/18.jpg)
Pierce through the boundary:● ::shadow
selects the elements shadow root● /deep/
ignores the boundary
http://rszaloki.github.io/webcomponents/shadow_dom/index.htmlShadow DOM
![Page 19: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/19.jpg)
● 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
![Page 20: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/20.jpg)
Custom Elements - reuse
![Page 21: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/21.jpg)
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
![Page 22: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/22.jpg)
Custom elements
Lifecycle events:● createdCallback● attachedCallback● detachedCallback● attributeChangedCallback
http://rszaloki.github.io/webcomponents/custom_elements/index.html
![Page 23: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/23.jpg)
Custom elementsvar 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
![Page 24: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/24.jpg)
Custom elements
document.registerElement('lego-name', {
prototype: prototype object,
"extends":’li’
});
<li is=”lego-name”>
http://rszaloki.github.io/webcomponents/custom_elements/index.html
![Page 25: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/25.jpg)
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
![Page 26: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/26.jpg)
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
![Page 27: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/27.jpg)
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
![Page 28: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/28.jpg)
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!
![Page 29: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/29.jpg)
Webcomponents
● encapsulation - Shadow DOM● reusability - Custom Elements, HTML Import● communication via interfaces - Attributes, Properties● helpers - HTML Template
![Page 30: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/30.jpg)
Can I use it?
![Page 31: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/31.jpg)
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
![Page 32: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/32.jpg)
Polymer Project
![Page 33: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/33.jpg)
Web Components● Shadow DOM● HTML Imports● Custom Elements
Platform - polyfillsPolymer
DOM● URL● WeakMap● Mutation Observers
Other● Pointer Events● Pointer Gestures● Web Animations
![Page 34: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/34.jpg)
Platform - polyfillsPolymer
![Page 35: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/35.jpg)
create elementsPolymer
● declarative syntax
● dynamic templates
● two way data binding
● property observation
![Page 36: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/36.jpg)
use elementsPolymer
● widget library
● UI and non-UI elements
● core elements + labs elements
![Page 37: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/37.jpg)
toolsPolymer
Vulcanize: concatenate
the imported elements
designer: http://www.
polymer-project.
org/tools/designer/
![Page 38: Frontend meetup 2014.06.25](https://reader036.fdocuments.us/reader036/viewer/2022062406/5597de021a28ab52388b462e/html5/thumbnails/38.jpg)
Polymer
http://rszaloki.github.io/webcomponents/polymer-demo/lego.html
https://github.com/rszaloki/webcomponents
https://gist.github.com/ebidel/6314025
Thanks! [email protected] / @rszaloki