Brownbag on basics of web components

WEB COMPONENTSjson Jason Park

WHAT ARE WEB COMPONENTS?

WEB COMPONENTS

• Custom Elements

• Templates

• Shadow DOM

• HTML Imports

WEB SEVERELY LACKS EXPRESSIONSEver seen how Gmail builds a ‘tab’?

SEXY MARKUP!Custom element’s here to rescue!

CUSTOM ELEMENTREGISTERING NEW ELEMENTS

var XFoo = document.registerElement('x-foo');

document.body.appendChild(new XFoo());

CUSTOM ELEMENTEXTENDING ELEMENTS

var XFooProto = Object.create(HTMLElement.prototype);

var XFooExtended = document.registerElement('x-foo-extended', {

prototype: XFooProto,

extends: 'x-foo'

});

CUSTOM ELEMENTINSTANTIATE ELEMENTS

Declare them:

<x-foo></x-foo>

Create DOM in JS:

var xFoo = document.createElement(‘x-foo’); (= var xFoo = new XFoo())

xFoo.addEventListener('click', function(e) {

alert('Thanks!');

});

document.body.appendChild(xFoo);

TEMPLATES BEFORE HTML5#1: Offscreen DOM

✓ Using DOM

✓ Nothing gets rendered

‣ Network request is still made for the image

‣ Difficult to scope CSS rules for the template

TEMPLATES BEFORE HTML5#2: Overloading script

✓ Nothing is rendered

✓ Browser doesn’t parse the content as it doesn’t recognise the mime type

‣ Security issues. Runtime string parsing of user supplied data can easily lead to XSS vulnerabilities.

TEMPLATES

✓ Content is effectively inert until activated

✓ Throw in any content (audio, script, style, etc) inside template. There won’t be a side effect until the template is used

✓ Content is considered not to be in the document

“quick demo on template”

SHADOW DOM• HTML5’s answer to DOM tree encapsulation

• Form internal structure of web component

SHADOW DOM

• Page will display “こんにちは、影の世界!” instead of Hello, world!.

SHADOW DOM• Separate content from presentation inc. CSS

Delivering web component

HTML IMPORT

• Distribute HTML/CSS/JS in a single bundle

• Manage dependencies - resources are automatically de-duped by leveraging browser caching

• Choose what you need on a page.

HTML IMPORT

can be replaced by

bootstrap.html

PUBLISH WEB COMPONENTS

• Web components are not website specific.

• HTML, CSS and script are all packaged in a single file - loaded via HTML import

• http://customelements.io

HTML5.. Isn’t that just a fairytale?

YES…

& NO - WITH POLYFILLonly on “evergreen” browsers though

POLYMERWeb component polyfill from Google

X-TAGWeb component polyfill from Mozilla

<X>

Is this applicable in real world?

WEB

• Only on evergreen browsers.

• Most of them are experimental.

• http://builtwithpolymer.org/

MOBILE/DESKTOP

• Crosswalk project - run HTML5 apps on iOS & Android

• node-webkit - app runtime based on Chronium & node.js. Distribute to Mac, Linux and Windows.

THANKS!:)