jiggliemon

(function() {
    function Game() {
        this.reset();
    }
    Game.prototype = {
        reset: function reset() {
            this.count = 0;
            this.guesses = [];
            this.answer = Math.round(Math.random() * 99 + 1);
        },

jiggliemon

[{"name":"root","type": "core/template",
  "children": [
    {"name": "header","type": "core/template"},
    {"name": "body","type":"core/template",
      "children": [
        {"name": "body.left", "type": "core/template"},
        {"name": "body.right", "type": "core/template"},
        {"name": "body.main", "type": "core/template"}
      ]
    },

jiggliemon

function protofy () {
  var args = Array.prototype.slice.call(arguments)
  
  return (function objectify (obj) {
    obj = args.shift()
    return args.length ? protofy.x( Object.create( objectify() ), obj ) : obj
  }())
}

protofy.x = function ( one, two, k ) { 

jiggliemon

Links

• Deck for a talk on the whole web component stack
• Shadow DOM

Enabling

Firefox Nightly about:config

• Add a Boolean flag named dom.webcomponents.enabled; set to true

jiggliemon

var block = require('yayo/block')
var fs = require('fs')

function getTemplate(name) {
  return fs.readFileSync('./tmpl/'+name+'.tmpl', 'utf8')
}

var layout = new block({
    template: getTemplate('layout')
})

jiggliemon

{block name='title'}{/block}
{block name='body'}{/block}

jiggliemon

{
   "name": "block.name"
  ,"type": "core/text"
  ,"blocks": [
     {"name": "some.block","type": "core/list"}
    ,{"name": "some.nested.block","type": "core/text"}
  ]
}

jiggliemon

var Block = require('blocks/block')
var TaskModel = require('app/blocks/task')

var TaskBlock = Block.create({
  template: "<input type=\"checkbox\" <%= this.model.get('doneness')?'checked':'' %>/><%= this.model.get('text') %>"
}, {
  construct: function (taskId) {
    this.setModel(new TaskModel(taskId))
  }
})

jiggliemon

var Obj = require('parsed/object')
var LocalStorage = require('parsed/object/localstorage')
var Validation = require('parsed/object/validation')

var Task = Obj.create('Task', {
  implement: [LocalStorage, Validation]
}, {
  init: function () {
    
  }

jiggliemon

Write more markup

Markup is the final presentation API.

If you're in the business of writing markup that's intended to be styled by a 3rd party, provide the interested party the most flexible environment possible: write more markup | give more hooks.

A class that has more methods is more flexible than a class with one. A document with more elements and attributes is more flexible and style-able than one that provides minimal markup.