The Future Is Layered

Alex Russell <slightlyoff@google.com>
Twitter: @slightlylate
March 8, 2012

Who am I?

Confusing "Can't" and "Shouldn't":

a11y, layout, etc.

Twitter & GMail:

Case Studies In Dissonance

Network Economics Matter

HTTPArchive, 2012

The Level of Abstraction Matters

Magic?

Components Today

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js">
</script>
<script type="text/javascript">
YUI().use('calendar', 'datatype-date',  function(Y) {
    var calendar = new Y.Calendar({
      contentBox: "#mycalendar",
      width:'340px',
      showPrevMonth: true,
      showNextMonth: true,
      date: new Date(2011, 07, 01)}).render();
});
</script>

Components Today

<script 
 src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js">
</script>
<script>
dojo.require("dijit.dijit");
dojo.require("dijit.Calendar");

dojo.ready(function() {
    var c = new dijit.Calendar({
        value: new Date(),
        isDisabledDate: function(d) {
          // ...
        }
    });
    document.body.appendChild(c.domNode);
});
</script>

Web Components: Explaining The Magic

function Comment(text) {
  HTMLElement.call(this); // Makes this an Element
  this.textContent = text || '...';
  this.buildUI();
}

Comment.prototype = Object.create(HTMLElement.prototype);
Comment.prototype.constructor = Comment;
Comment.prototype.buildUI = function() { ... };
HTMLElement.register('x-comment', Comment);

var c = new Comment("Howdy, pardner!");
document.body.appendChild(c);

<!-- At risk in standards -->
<x-comment>...</x-comment>
<!-- Might instead be: -->
<div is="x-comment">...</div>

And Check Out That Sexy Lifecycle!

Shadow DOM

function Comment(text) {
  HTMLElement.call(this); // Makes this an Element
  this.textContent = text || '...';
  this.shadow = new ShadowRoot(this);
  this.buildUI();
}

Comment.prototype = Object.create(HTMLElement.prototype);
Comment.prototype.constructor = Comment;
Comment.prototype.buildUI = function() { ... };

HTMLElement.register('x-comment', Comment);

Styling Isn't Magic Either

<template id="commentTemplate">
  <div class="holder">
    <style scoped>
      img     { ... }
      .text   { ... }
      .holder { ... }
    </style>
    <img class="avatar" alt="avatar">
    <div class="text">
      <content></content>
    </div>
  </div>
</template>

What About The Data Behind?

Data Binding: Model-Driven Views

<script> 
document.body.model = Model.get({
  'items': [
    { 'name': 'Africa',
      'children': [
        { 'name': 'Egypt' },
        { 'name': 'Kenya',
          'children': [ { 'name': 'Nairobi' }, { 'name': 'Mombasa' } ]
    } ] } ]
});
</script>

<template iterate="items" id="t"> 
  <li>{{name}}
    <ul><template ref="t" iterate="children"></template></ul> 
  </li> 
</template>

Imperative Primitives: Mutation Observers & Summaries

<script> 
var summary = new MutationSummary({
  callback: [function],         // required
  rootNode: [node],             // optional
  observeOwnChanges: [boolean], // optional
  queries: [{query}, …] // required. one query object at min.
});

// ...sometime later
summary.disconnect();
</script>

Cooperation Is Key

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(callback, element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

// usage: 
// instead of setInterval(render, 16) ....
(function animloop(){
  render();
  requestAnimFrame(animloop, element);
})();

Babel Reborn

addEventListener, Served Two Ways

• Mozilla's dom.js
• WebKit
  • C++ Header & Impl
  • IDL

WebIDL and .length, [Constructor]

!=

Thank you!

Questions?