xjade

[DEPRECATED] - Look instead at React

It was a fun to implement this, but now there are other significantly better solutions.

XJade - HTML DOM Templating Engine

XJade is a new template engine which accelerates and simplifies building complex dynamic web interfaces in JavaScript. Write your GUI templates in shorthand declarative way and let XJade do the hard work for you.

XJade will generate well optimized code which uses native DOM methods like createElement(), setAttribute() or appendChild() to build parts of your GUI directly in client browser. Templates are compiled as a part of your build process and client will receive only generated code.

If you are developing a fat client, single page application or just need to generate HTML view of your data, XJade will save your time and make your code more maintainable. Take a look at this simple example screenshot from real project.

Check it out:

• What is new
• Language Reference
• TODO list

Features

• Readable short-hand HTML - XJade uses indented CSS selectors to describe node trees.
• Embedded into JavaScript - Templates are written inside anotated JavaScript functions.
• DOM structure - Elements are created using standard native DOM API.
• Client side performance - super fast on Chrome! See this benchmark for more info.
• Server side support - Generate your static HTML files with XJade and never write HTML again.
• Easy integration - works with AMD/CommonJS modules, TypeScript or any binding library.

Why Use XJade?

• DOM API is too verbose.
• HTML String concatenation is error prone, possible security hole and hard to read (no HTML syntax highlightig, no multiline strings, etc.).
• jQuery or other libs are still verbose and messy when you need more complex structure.
• Cloning prearranged node trees doesn't work well with conditions or when you need references to created nodes inside template.
• Most other template engines:
  • uses either verbose HTML or weird custom syntax
  • works with strings instead of direct DOM manipulation
  • uses mixins, partials, blocks and other own constructs instead of simple function calls

How to work with XJade?:

1. Write your view code which dynamically generates DOM structures with XJade templates into .xjade files.
2. Watch and compile your .xjade files with grunt.
3. Use any module loader or plain script tags to include your compiled sources.
4. Call compiled XJade functions with some root node or null as their first argument.

Instalation

Command line

After installing the latest version of node, install with:

npm install -g xjade

Usage:

Usage: xjade [options] [...files]

Options:

  -h, --help             output usage information
  -V, --version          output the version number
  -c, --compile <kind>   Specify compiler: 'js' (default), 'html' or 'ast'.
  --doctype <str>        Specify doctype: '5' (default), 'strict', 'transitional', 'xhtml' or other.
  --data <str>           Filename or string with input data input JSON format.
  -p, --pretty           Print pretty HTML.

Command line version outputs compiled templates to it's standard output. To save your templates to file use Redirection.

Grunt plugin (recommended)

• grunt-xjade - This is the best way how to integrate XJade into your project.

IDE support

• sublime-xjade - Syntax highlighting and snippets for Sublime Text editor.

Server side usage

Althought XJade primary target is Browser, it's possible to use it on server side as static HTML files generator. Set XJade compile option to html to compile and execute input file and all its includes to single HTML output. Your input template must have exported render function. Data object (see XJade compiler options) will be passed as its first argument.

Use cases:

• Generate index.html for single page application with same syntax as client side templates
• Generate complex static HTML files from separated sub templates and data parameters

Example (index.xjade):

exports.render = function @template () {
    html
        head
            script[src="app.js"]
            link[href="style.css" rel="stylesheet" type="text/css"]
        body
            'This HTML was generated by XJade!'
};

Generate pretty formated HTML with:

xjade -c html -p index.xjade

License

MIT

Acknowledgements

MAINDATA

Developing firts prototype of XJade was supported by MAINDATA.

Jade

Jade was first template engine I have used.
This project started as try to fix Jade's client side limitations. That's why it was named XJade.

Other

Thanks to PEG.js for amazing parser generator.
Thanks to Blade for idea of forking Jade and using PEG.js.
Thanks to ist.js for idea of using DOM API directly rather then strings.