Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/anykeyh/tinyhtmltemplate

Smallest and fastest HTML templating library.
https://github.com/anykeyh/tinyhtmltemplate

Last synced: 30 days ago
JSON representation

Smallest and fastest HTML templating library.

Awesome Lists containing this project

README 

        
#tinyHtmlTemplate



This lib provide simple template through DSL like javascript declaration.



## What's the purpose of this lib?



With it you can create your DOM in a minute, bind events, and create partial

templates (or components). If there's errors, you know where they are

because we trace it!

Because you write in Javascript, no more runtime template syntax errors.



I've worked on the size of the lib to reach 2^11 bytes ( I still miss 10% :-( ),

so it suits for project where page loading speed matters, network is slow etc.

( e.g. mobile website in third world ).

Memory footprint is really small also.



In terms of performance, it beats any parsed template and proceed almost the same

speed than native javascript. Get beaten by reactlike software

if you have a lot of elements to update frequently



## How to install?



Using browserify:



    $ npm install tinyHtmlTemplate --save



Then:



```javascript

    var Template = require('tinyHtmlTemplate').tinyHtmlTemplate

```



## How to use it?



tinyHtmlTemplate use a DSL-like structure and is very well suited for any language

which simplify the syntax of the  context `this`.

For example with `@` of coffescript, it rocks!

Well, this lib has been built like this because I work with coffeescript.



So it's very nice on it.



You can still use it on Javascript:



```javascript



    // No browserify = using window object

    var Template = tinyHtmlTemplate;



    // Render into the parent element. Can be anything.

    var parent = document.getElementById("theParent");



    Template.render(parent, function(){

      this.div({id: "template"},function(){

        this.text("Templating is so easy!");

        this.a({href: "#"}, function(){

          this.text("Click here to see binded event!");

          this.on("click", function(evt){

            alert("This is when I click the  element !");

          });

        })

        this.p("You can also write the content like this", function(){

          this.ul(function(){

            this.li({innerHTML: "You can set html
like this"})

            this.li(function(){

              this.text("Or like")

              this.br();

              this.span({style: { backgroundColor: "red", color: "white" }}, function(){

                this.text("that.");

              });

            })

          })

        });

      })

    })



```



Or with coffeescript



```coffeescript



    Template.render document.body, ->

      @div id: "todo-list-component", ->

        @ul className="todo-list", ->

          for todo in todoList

            @TodoView(todo)



```



## Using partials



You can create subtemplates and call them easily:



```javascript



  Template.register('Important', function(text){

    this.strong("/!\\ " + text);

  } );



  Template.render(document.body, function(){

    this.Important("This is an important message!");

  })



```



## Additional notes



The properties are directly linked to `HTMLElement`. So if you want to set the

attribute `class` or `for`, you should use `className` or `htmlFor`



Get a look to the `examples/todo` folder for a ultra simple homemade MVC built

on top of this lib.



## Licence



MIT.