Real World Web components
59
Web Components Real World Jarrod Overson jarrodoverson.com
-
Upload
jarrod-overson -
Category
Technology
-
view
4.059 -
download
2
description
Slides for talk given at the jQuery Conference San Diego in 2014
Transcript of Real World Web components
Web Componentsa.k.a.
outside of Google
Web Components?What are
Templates Custom Elements Shadow DOM HTML Imports (and more…)
Web Components
HTML Templates
<script type="text/x-template"> <h1>Hello World!</h1> </script>
<div style="display:none"> <p>I am cloned over and over!</p> </div>
( traditionally )
HTML Templates
<template> <p>I don’t exist yet!</p> </template>
now(ish)!
Benefits
1. Inert 2. No .innerHTML 3. It makes sense
Custom Elements
❯ MyEl = document.registerElement('my-el'); function my-el() { [native code] } !❯ var el = new MyEl(); undefined !❯ el.outerHTML; "<my-el></my-el>"
OH NO!Not XML!
Benefits
1. Legit new elements 2. Can inherit from the old 3. Make your own semantics
Shadow DOM❯ outer = document.createElement('div'); <div></div> !❯ inner = document.createElement('p') <p></p> !❯ inner.innerText = 'Hello jqcon!'; "Hello jqcon!" !❯ outer.createShadowRoot().appendChild(inner); <p>Hello jqcon!</p> !❯ document.body.appendChild(outer); <div></div>
Shadow DOM
Shadow DOM
Shadow DOM
Shadow DOM
Benefits
1. Proper encapsulation 2. Style boundaries 3. You can use IDs again!
❯ document.querySelector(‘#sameId’); !❯ el.shadowRoot.querySelector(‘#sameId’);
HTML Imports
<link rel=“import" href="external.html">
Benefits
1. It gets stuff out of your stuff
Support for each
<template>
registerElement
Shadow DOM
HTML Imports
Wat
Why am I even here?
Web Components?Why even bother with
Web Components
are part of a fundamental shift in how
the web evolves
The web learns best from itself
getElementsBySelector CoffeeScript Everything CSS ever From what you do
Spec writers make things possible
The community’s job is to make them easy
oi jQuery, tip o’ the hat
Web Components?Ok, so how do I use
Polyfills for emerging features
and a framework for building upon them
<polymer-element name="hello-world"> <script> Polymer('hello-world', {}); </script> </polymer-element>
What happened to <element>?
proto = Object.create(HTMLElement.prototype); HelloWorld = document.registerElement( ‘hello-world', { prototype : proto });
vs Native
<polymer-element name="hello-world"> <template> <div>Hello World</div> </template> <script> Polymer('hello-world', {}); </script> </polymer-element>
<template id="hw-template"> <div>Hello World</div> </template> !<script> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var template = document.getElementById('hw-template'); var clone = document.importNode(template.content, true); this.createShadowRoot().appendChild(clone); }; HelloWorld = document.registerElement( 'hello-world', { prototype : proto } ); </script>
vs Native
Yay!
Boo!
So what’s the reality?
Parent with crappy, leaky
styles
Sexy scoped web component
chrome 34 with flags turned on
IE 10 with defaults
firefox 26.0 with defaults
chrome 32 with defaults
The reality?
It’s largely thereAfter all,
the component did render.
and you do get useful lifecycle methods
and Polymer does give you sexy data binding
Shadow DOM is not very polyfillable.
Why would I use Web Components
when I have
directives?
How do
work together?
and
Demo!
Web Components are useful
and important.
The bleeding edge is accessible
but you need excuses to use it
1. Prototypes
Make your prototypes with the bleeding edge
Attach a cost to backwards compatibility.
2. Internal Tools
Internally, browser compatibility
doesn’t need to matter.
IE 8 doesn’t exist when you will it away.
3. Native Apps
Do you really need a web server?
Or do you just love web tech?
1. node-webkit 2. brackets-shell 3. CEF 4. Packaged Apps
Demo!
Jarrod Overson
jsoverson.com/githubjsoverson.com/linkedin
jsoverson.comjsoverson.com/google+
jsoverson.com/twitter
@jsoverson
