brownbag on basics of web components
TRANSCRIPT
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
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!:)