A brave new web - A talk about Web Components
-
Upload
michiel-de-mey -
Category
Software
-
view
97 -
download
0
description
Transcript of A brave new web - A talk about Web Components
![Page 1: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/1.jpg)
A BraveNew Web
![Page 2: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/2.jpg)
@gdemey & @michieldemey
![Page 3: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/3.jpg)
![Page 4: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/4.jpg)
Web Components
![Page 5: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/5.jpg)
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."
![Page 6: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/6.jpg)
TemplatesStandardized client-side templating
Shadow DOMDOM tree encapsulation
Custom ElementsCreate new semantic HTML elements
ImportsImport chunks of HTML or entire components
![Page 7: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/7.jpg)
<link rel="import" href="elements/x-blink.html">
<x-blink>
Blink!
</x-blink>
Blink!
![Page 8: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/8.jpg)
<link rel="import" href="elements/qr-code.html">
<qr-code data="http://demey.io"></qr-code>
![Page 9: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/9.jpg)
Ancienthistory
![Page 10: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/10.jpg)
Java Applets & Flash Controls
![Page 11: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/11.jpg)
ASP.NET Web Controls
<asp:control_name id="some_id" runat="server">
</asp:control_name>
![Page 12: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/12.jpg)
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
![Page 13: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/13.jpg)
![Page 14: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/14.jpg)
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
![Page 15: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/15.jpg)
HTMLTemplates
![Page 16: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/16.jpg)
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
![Page 17: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/17.jpg)
Templatesare a blueprint
![Page 18: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/18.jpg)
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
![Page 19: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/19.jpg)
HTML templates: Demo
Add Comment
![Page 20: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/20.jpg)
Shadow DOM
![Page 21: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/21.jpg)
Isolates Component MarkupNo overlap with page functionality and other styles.
![Page 22: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/22.jpg)
Shadow DOMis the sandbox
![Page 23: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/23.jpg)
Custom Elements
![Page 24: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/24.jpg)
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>
![Page 25: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/25.jpg)
CustomCustomElementsElements
are the backbone
![Page 26: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/26.jpg)
HTML Imports
![Page 27: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/27.jpg)
Why imports?
CSS<link rel="stylesheet">
Javascript<script>
HTML<link rel="import">
![Page 28: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/28.jpg)
HTML imports
Not limited to markup, can contain CSS and Javascript
Imports are subject to access control (CORS)
![Page 29: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/29.jpg)
Support
![Page 30: A brave new web - A talk about Web Components](https://reader033.fdocuments.us/reader033/viewer/2022051514/54b733844a795910488b4588/html5/thumbnails/30.jpg)
April 30th
Polymer