a brave new web - a talk about web components
DESCRIPTION
This is an introduction talk where we will look at the basics of Web Components.TRANSCRIPT
A BraveNew Web
@gdemey & @michieldemey
Web Components
What are WebComponents?
"Web Components is a set of specs which let
web developers leverage their HTML, CSS and
JavaScript knowledge to build widgets that can
be reused easily and reliably."
TemplatesStandardized client-side templating
Shadow DOMDOM tree encapsulation
Custom ElementsCreate new semantic HTML elements
ImportsImport chunks of HTML or entire components
<link rel="import" href="elements/x-blink.html">
<x-blink>
Blink!
</x-blink>
Blink!
<link rel="import" href="elements/qr-code.html">
<qr-code data="http://demey.io"></qr-code>
Ancienthistory
Java Applets & Flash Controls
ASP.NET Web Controls
<asp:control_name id="some_id" runat="server">
</asp:control_name>
jQuery
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function () {
$('#datepicker').datepicker();
});
</script>
Date: <input type="text" id="datepicker">
1
2
3
4
5
6
7
8
9
10
11
AngularTwo-way data-bound transcluded isolate scope directives.
myApp.directive('qrCode', function () {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'components/qrcode/qrcode.html',
link: function (scope, element, attributes) {
// do stuff here
}
};
});
1
2
3
4
5
6
7
8
9
10
11
12
HTMLTemplates
HTML templates:Declaration
<template id="commentTemplate">
<img src="">
<div class="comment-text"></div>
</template>
1
2
3
4
5
1. Scripts aren't executed, images aren't downloaded, DOM isn'trendered
2. you can't traverse into them from outside
Templatesare a blueprint
HTML templates: Usage
<script>
function addComment(imageUrl, text) {
var content = document.querySelector('#commentTemplate').content;
var image = content.querySelector('img');
var comment = content.querySelector('.comment-text');
image.src = imageUrl;
comment = text;
var insertPoint = document.querySelector('.templates-demo-yield');
insertPoint.appendChild(content.cloneNode(true));
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
HTML templates: Demo
Add Comment
Shadow DOM
Isolates Component MarkupNo overlap with page functionality and other styles.
Shadow DOMis the sandbox
Custom Elements
Custom ElementDefinition
<element name="hello-world" constructor="HelloWorld">
<div>Hello World!</div>
<script>
this.register({
prototype: {
readyCallback: function () {
// Component is ready
},
announce: function () { alert('Hello World!'); }
}
});
</script>
</element>
<hello-world></hello-world>
CustomCustomElementsElements
are the backbone
HTML Imports
Why imports?
CSS<link rel="stylesheet">
Javascript<script>
HTML<link rel="import">
HTML imports
Not limited to markup, can contain CSS and Javascript
Imports are subject to access control (CORS)
Support
April 30th
Polymer