The Web As Platform
Past, Present, and Future

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

The Other Side of Classes

// Classes are state with functions
function Behavior(config) {
  this.config = config;
  this.doIt = function(itemToActOn) {
    if (this.config.flag) {
      // ...
    } else {
      // ...
    }
  }
}

var b = new Behavior({ flag: false });
b.doIt($("item"));

The Other Side of Classes

// Closures are functions with state
function bindBehavior(config) {
  return function() {
    if (config.flag) {
      // ...
    } else {
      // ...
    }
  }
}

var b = bindBehavior({ flag: false });
b($("item"));

Network Economics Matter

HTTPArchive, 2012

Magic?

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>

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);

Declarative Matters

<element extends="div" name="greeting" constructor="Howdy">
  <script>
    this.lifecycle({
      created: function(shadowRoot) {
        shadowRoot.shadowHost.addEventHandler("click", function() {
              alert("And good day to you!");
            });
      }
    });
  </script>
  <template><h1>Hello World!</h1></template>
</element>

<div is="greeting"></div>

var c = new Greeting();
document.body.appendChild(c);

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>

ES.next Modules

module widgets {
  module events from 'goog/events.js';
  import {EventType, FocusHandler, KeyHandler} from events;
  import * from 'goog/widget.js';

  export let collection = new WeakMap();
 
  export class DropDownButton extends Widget {
    constructor(attributes) {
      super(attributes);
      this.buildUI();
      // ...
    }
  }
}

Binary Data

const Point2D = new StructType({ x: uint32, y: uint32 });
const Color = new StructType({ r: uint8, g: uint8, b: uint8 });
const Pixel = new StructType({ point: Point2D, color: Color });
 
const Triangle = new ArrayType(Pixel, 3);
 
let t = new Triangle([{ point: { x:  0, y: 0 }, 
                        color: { r: 255, g: 255, b: 255 } },
                      { point: { x:  5, y: 5 }, 
                        color: { r: 128, g: 0,   b: 0   } },
                      { point: { x: 10, y: 0 }, 
                        color: { r: 0,   g: 0,   b: 128 } }]);

• Explaining ourselves: a superset of WebGL TypedArrays
• All items must have known storage classifiers

Maps & Iteration

let someObject = { name: "yet another anonymous object" };
let collection = new WeakMap();
collection.set(someObject, anotherObject);
collection.has(someObject) == true;
collection.get(someObject); // anotherObject

for (let [key, val] of items(someObject)) {
  // Look ma! I'm bound per iteration!
  doWork(val);
}

Classes Today

function Comment(text) {
  HTMLElement.call(this); // Makes this an Element
  ...
}

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

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

Classes Today (For Real)

// Closure
goog.inherits(HTMLElement, Comment);

// Prototype
Comment = Class.create(HTMLElement, ... );

// MooTools
Comment = new Class({ extends: HTMLElement, ... });

// YUI
Comment = function () { Comment.superclass.constructor.call(this); }; 
YAHOO.lang.extend(Comment, HTMLElement);

// Dojo
dojo.define("Comment", [ HTMLElement ], ...);

// jQuery UI
$.widget( "comment", { ... });

ES.next Classes

class Comment extends HTMLElement {

  constructor(attrs = {}, ...args) {
    super(attrs);
    this.textContent = attrs.text || lorem;
    this.shadow = new ShadowRoot(this);
    this.buildUI(...args);
  }

  buildUI() { /*...*/ }

  css(...args) {
    super.css(...args);
    // Custom work here
  }
}