Template Object Model

Lets flesh out a basic HTML DOM templating interface here.

Requirements

 * Both a PHP and JS implementation
 * Resource loader needs to support loading templates
 * thoughts on speculative loading
 * also elements in HTML5
 * tendency to move towards JS for client side (and later server-side) templating
 * if/else
 * array handling
 * foreach
 * detect an empty array
 * Template partials / transclusion
 * Ability to control HTML escaping (preferably with escaped output as the default)
 * Should be obvious to see what is escaped by looking at the template
 * Context sensitive escaping (attributes)
 * Extensible enough to accommodate MediaWiki i18n system
 * Should either be a custom implementation of the library or a predefined function/filter
 * Ensures balanced templates (partial DOM)
 * Client-side library that has a small footprint (~20K or less)
 * should support visual editing (so no magic syntax in templates, only HTML, simplicity)

Interesting implementations

 * Distal -- Zope TAL in JS
 * Genshi -- cleaner than TAL, very close to what we are looking for, but Python implementation rather than JS
 * AngularJS -- attribute-based HTML templates compiled to code (?), reactive programming with separate model
 * React -- compiles HTML templates to efficient code, reactive
 * XHP -- FB XML literals in PHP; slow in Wikia testing, PHP only.

Spec strawman
In uncompiled templates, we can use user-friendly and compact syntax similar to mustache:

This can be de-sugared to a pure XHTML template by replacing the brace syntax with elements and attributes suitable for visual editing:

Expressions

 * data references in dot and [] notation
 * iteration in :  ,
 * (in)equality predicates:
 * logical negation/and/or, parenthesis

We considered also supporting function calls, but decided to go with data references only for now to keep porting straightforward, and maintain a clear separation between formatting options and data. If necessary, such support can be added at a later point.

Value formatting
Via attributes on the  element. I18n behavior inherited by DOM scope.


 * Strings
 * maxlength
 * case= upper/lower
 * Numbers
 * fmt format string (precision, padding etc)

Higher-level widgets
Basically like extensions.


 * Declarative with freedom of implementation
 * Rich support in VE possible
 * Drop-downs of options
 * Data type driven formatting (date/birthday formatted as localized age)
 * In-place editing of the underlying data within the rendering
 * Table widget alternative to data tables with table start / row / end templates
 * Both table and plot could come in handy in special pages

Prototype
We'll probably develop a  prototype over the weekend, likely based on distal.