The Web Components spec and the polyfill that makes it all possible cross-browser now (polymer).

1. The Future of the
Web
...and the one polyfill that makes it all possible today

2. Browser Support
WeakMap: Chrome, FF, IE11
Object.observe: Chrome 36
MutationObserver: all but IE10, Safari 6.1, Android 4.3
Web Components: Chrome 36, FF 32, Android 4.4

3. WeakMap
keys are objects
values can be anything
does not prevent garbage collection of keys

4. Use Cases
Associate data with an element w/out augmenting the element
Associate data with a read-only object
More efficient information hiding

5. e.g.
var map = new WeakMap();
var someEl =
document.getElementById('someEl');
map.set(someEl, {foo: 'bar'});
if (map.has(document.getElementById('someEl') {
map.get(someEl).foo; // bar
}

6. Object.observe
Receive callbacks when an object changes in any way
Native impl for Angular's scope.$watch
For Arrays: Array.observe
Angular will delegate in 2.0

7. Angular
scope.name = 'Ray';
scope.$watch('name', function(newV, oldV) {
console.log('old name: ' + oldV);
console.log('new name: ' + newV);
});

8. Native
scope.name = "Ray";
Object.observe(scope, function(change) {
if (change.name === 'name') {
console.log('old name: ' +
change.oldValue);
console.log('new value: ' +
change.object[change.name]);
}
});

9. MutationObserver
Receive callbacks when an element changes in any way
Element descendendants can also be observed
Replacement for inefficient Mutation Events

10. e.g.
var callback = function(records) {
var record = records[0]; // for demo simplicity only
var added = record.addedNodes;
if (added.length) {
var newTags = 0;
for (var i = 0; i < added.length; i++) {
if (added[i].className.indexOf('tag') >= 0) {
newTags++;
}
}
if (newTags) {
alert(newTags + " new tags added.");
}
}
};
var observer = new MutationObserver(callback);
observer.observe(tagsContainerEl, {childList: true});

11. Web Components
Templates
Custom Elements
Shadow DOM

12. Templates
Create re-usable content
<template> is not rendered, must be
"activated"
Any elements can be children
<template>
<div>hi there</div>
<div>you can't see me right now</div>
<blink>luckily for you</blink>
</template>
Live example [jsbin]

13. HTML Imports
Pull another HTML file into the current document
Inject a packaged component (and all deps) w/ one line
Re-use templates stored in a central location
<link rel="import" href="/license.html">

14. Using an imported document
// Grab the <link> that imports the licensing blurb
var licensingLink = document.getElementById('licenseLink');
// Grab the relevant content from the imported doc
var content = licensingLink.import.getElementById('license');
// Append the content to our doc
document.body.appendChild(content);
NOTE: Server must return proper CORS headers for cross-domain
imports
Complete example [jsbin]

15. Custom Elements
<my-custom-element></my-custom-element>
MUST contain a dash
Take heed angular directive writers.
Use ember? You're cool.
Why?
To avoid conflict w/ future standardized elements.

16. Creating Custom Elements
Initially an :unresolved HTMLElement
To "resolve", you must document.registerElement
Two types:
1. New* CE
2. Type Extension CE
* I just made up this name

17. Standard Custom Element
<foo-bar>
<!-- unresolved content -->
</foo-bar>
<script>
</script>
Live example [jsbin]

18. Type Extension Custom
Element
<video is="frame-grabber" src="somevideo.mp4">
</video>
var frameGrabber =
document.createElement('video', 'frame-grabber');
frameGrabber.prototype.grab = function() {
// grab current frame & do something w/ it
}

19. Shadow DOM
Allows creation of self-contained, sandboxed web components
A single Node can now be made up of 3 different subtrees:
Light DOM
Shadow DOM
Composed DOM

20. Light DOM Tree
Part of the "logical DOM"
Content of the custom element provided by integrator
<blink-is-back>
Bring back the blink tag!
</blink-is-back>
Displayed pre-shadow-root render

21. Shadow DOM Tree
Part of the "logical DOM"
Internal to the custom element, not a child
Not directly accessible via the light DOM
1. Include element on page
2. Register (if CE)
3. myElement.createShadowRoot();
4. Append content to shadow root
5. Live example [jsbin]

22. Composed DOM Tree
Content that is actually rendered
Pieces of the light and shadow DOM combined
Composed DOM from the <blink-is-back> CE:
<blink-is-back>
<div style="text-decoration: line-through;">
Bring back the blink element!
</div>
<div>But seriously, don't make text blink.</div>
</blink-is-back>

23. Polymer
Shim for all specs discussed in this presentation
Defers to native impls, when present
So, You can use all of these cool specs now!

24. The first devolving framework
Less important as Web Components et al. coverage increases
Should disappear when these specs are implemented
everywhere

25. A polyfill for Shadow DOM?
How?
It's complicated
Everything is wrapped
Required to:
maintain encapsulation
maintain separation between light & shadow DOM elements
retarget events originally destined for the shadow DOM tree

26. file-input
Web Component built using Polymer
Allows <input type='file'> to be easily styled
Built-in file validation
More intuitive access to (valid) files

27. e.g.
<file-input class="btn btn-primary"
extensions='["jpeg", "jpg"]'
minSize="500000"
maxSize="3000000">
<span class="glyphicon glyphicon-file"></span>
Select a file
</file-input>

28. ajax-form
Web Component built using Polymer
Submit a form without a page reload
Send custom headers w/ form submit
Easy access to server response
Dirt simple validation support/control
Submit <file-input> elements too!

29. e.g.
<form is="ajax-form"
method="POST"
action="form/handler"
headers='{"X-Cust-Header": "FooBar"}'>
<input type="text" name="fullname" required>
<input type="submit">
</form>
form.addEventListener('submitted',
function(e) {
if (event.detail.status > 299) {
// submit may have failed
}
}
);
form.addEventListener('invalid',
function(e) {
e.detail.forEach(function(badEl) {
// do something w/ invalid element
});
}
);

31. Useful Links
WeakMap
Information hiding with WeakMaps
Object.observe
MutationObserver
Web Components
custom elements
Polymer
<form is="ajax-form">
<file-input>