A brave new web - A talk about Web Components

Preview:

DESCRIPTION

This is an introduction talk where we will look at the basics of Web Components.

Citation preview

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

Recommended