JQuery Templates Strawman

Implements the jQuery Templates Strawman,

Contents

The src directory contains the JavaScript implementation. The test directory contains HTML benchmarks and a conformance suite.

This project actually contains several semi-independent implementations.

The reference implementation (in src/ref.js) is a simple, inefficient, clear implementation of the spec.

The strappend implementation (in src/impl.js) is a small, fast, implementation that should conform with the reference implementation in every detail, but is more complicated due to speed/size constraints.

The other files in src are common supporting code for the two implementations.

If the strappend implementation differs from the reference implementation then strappend is wrong. If the reference implementation is behaving differently than it should, then there is an error in the spec.

Makefile	Builds the compiled JS. Run make from the directory containing this README.
build/	Contains concatenated and compiled JS files after running make
closure/	Tools used to minify the JS
src/	Source JS files that declare private names globally but make properly scopes the JS in build/
↳ jquery-templates-defs.js	Constants definitions for the lexical grammar and defaults.
↳ jquery-templates-parser.js	Definitions of the parser which converts template source to an AST.
↳ jquery-template-ref.js	Reference implementation. Slow, verbose, but simple.
↳ jquery-template-impl.js	Strappend implementation. More efficient than the reference implementation.
↳ jquery-templates-api.js	Defines the $.template API.
↳ jquery-templates-autoesc.js	Implements naïve autoescaping.
tests/	Test suites and benchmarks.
↳ conformance-suite.html	A test-suite for the jQuery templates specification.
↳ templates-benchmarks.html	Benchmarks for jQuery and other template implementations

Building And Running Tests

The source files under js/ are written to minimize dependencies on jQuery and to minify well. They declare private helper functions globally.

Running

make

(or its Windows equivalent) at the command line will generate properly scoped and minimized JavaScript files under the build/ directory.

build/
↳ jquery-templates-reference.js	A simple, slow reference implementation that mirrors the spec.
↳ jquery-templates-strappend.js	An efficient implementation that provides good error messages.
↳ jquery-templates-compiled.js	An aggressively minimized version of strappend that does not include error reporting code.

Compiled Versions

The efficient strappend implementation functions in 3 modes:

1. Debug: jQuery templates are compiled as-needed in the client with rich error checks and error messages.
2. Production: jQuery templates are compiled as-needed in the client with DEBUG = false which removes most of the error checks and error messages to minimize download size and startup time.
3. Pre-compiled: jQuery templates are pre-compiled to JavaScript functions so the parser does not need to be shipped with the application, and code-minifiers can inline/optimize the application along with the template code.

Debug mode

Normally to use jQuery templates, you ship code like the below:

    <script type="text/javascript" src="jquery-templates-strappend.js"></script>
    <script type="text/javascript" src="my-jquery-extension.js"></script>
    <script type="text/x-jquery-tmpl" id="sayhello">
      Hello, ${world}!
    </script>

which includes jQuery templates support code including the template parser and compiler and a template definition.

At load time, the jQuery templates code will parse and compile templates as needed.

Production mode

Debugging checks are not useful after you've run your unittests and you know your templates are syntactically valid. The debugging checks take a significant amount of space; nice error messages don't compress well.

The compiled version of the strappend includes the full template parser and runtime, but without error checks that are usually redundant in production.

    <script type="text/javascript" src="jquery-templates-compiled.js"></script>
    <script type="text/javascript" src="my-jquery-extension.js"></script>
    <script type="text/x-jquery-tmpl" id="sayhello">
      Hello, ${world}!
    </script>

Pre-compiled

Pre-compiled mode is similar to production mode but offers some benefits for projects that already have a compilation step, e.g. using JavaScript minifiers.

In pre-compiled mode, a script extracts templates from HTML or similar source code and substitutes equivalent JavaScript code, so that the result does not need to include a download of the template parser, and the page load is not slowed down by invoking the parser.

So in pre-compiled mode, the example above would pre-compile to something like

    <script type="text/javascript" src="jquery-templates-runtimeonly.js"></script>
    <script type="text/javascript">
      $.template("#sayhello", { tmpl: function ($data) { return "Hello, " + $.encode($data.world); } });
    </script>

Server Side JS

This differs from the original jQuery templates in that it contains no DOM dependencies, and compiled templates produce a string of HTML instead of a DOM so that it can work well with Node.js and other server-side JavaScript frameworks.