dna.js Semantic Templates

An uncomplicated user interface library

dna.js Semantic Templates

dna.js is an easy-to-use UI library for jQuery enabling developers to rapidly build maintainable JavaScript applications.  You write semantic templates and then dna.js converts your JSON data into dynamically generated DOM elements.

The project is open source and available for free.  The code is hosted on GitHub and is dual-licensed under The MIT License (MIT) and GNU General Public License (GPLv3).

To-Do List Application

Screenshot

Looking under the hood of a simple to-do list application is a good way to quickly understand a library.

Experiment with the dna.js to-do list application at:

The core of the to-do list application is not even 10 lines of JavaScript, yet the application includes add a task, complete a task with style change, delete a task, and smooth animation effects.

Bookstore Example

Designate HTML elements as templates with the dna-template class, and put the templates directly into the HTML of your web page.  Use each element's ID to indicate the name of the template.  Enclose data field names in double tildes.

HTML for book template

         <h1>Featured Books</h1>
         <div id=book class=dna-template>
            <div>Title:  <span>~~title~~</span></div>
            <div>Author: <span>~~author~~</span></div>
         </div>
      

Then call the dna.clone() function to insert a copy of the template into the DOM.  The supplied JSON data object will be used to populate the fields of the template.

JavaScript call to add book node

         dna.clone('book', { title: 'The DOM', author: 'Jan' });
      

The new element is a clone, and it is placed into the DOM where the template was located.  The original template is detached from the DOM and kept for additional cloning.

Resulting HTML with clone

         <h1>Featured Books</h1>
         <div class=book>
            <div>Title:  <span>The DOM</span></div>
            <div>Author: <span>Jan</span></div>
         </div>
      

Clones can alternatively be generated by providing a URL to a REST resource.

JavaScript call to load data from a REST call

         dna.rest.get('book', 'http://dnajs.org/rest/book/3');
      

Try It Out

Click "Add a Book" to trigger an event that calls the dna.clone() function.  Click "Clear List" to call the dna.empty() function, which deletes all the clones previously created from the template.

To see all the pieces running together, check out the standalone example:

Live Model

Screenshot

dna.js keeps track of the data model (the "M" in MVC) and updates the UI as the user changes the model.

Interact with the live model at:

Philosophy

Backbone.js, AngularJS, and React are all powerful, but they require a fair a amount of technical expertise just to get started.  The HTML and JavaScript to create web applications using dna.js will be familiar to all web developers, enabling developers to be productive on the first day of using dna.js.

Templating should be lightweight, clean, and simple:
  1. No HTML in JavaScript code
  2. Templates are real HTML that validate
  3. Templates can be in-place (no need for separate template files)
  4. Iteration is done with data arrays not messy template for loops
  5. Zero setup until data is pushed (can be after page load)
  6. No serialization or deserialization (no need to call the .html() function)
  7. Enable JavaScript to be void of boilerplate code and anonymous functions
  8. Declaring callbacks using simple HTML attributes is more cohesive and semantically meaningful than programmatically binding with JavaScript code

The more transparent a JavaScript templating solution is, the less impact it will have on your workflow for building web applications.  Templates with dna.js don't just look like HTML, they are HTML (and they validate).

JavaScript is easier to write, quicker to read, and more compact if it is focused on handling data not generating HTML.  Traditional web frameworks, such as Grails, PHP, and Rails, already handle HTML.  Generating HTML from both the web framework and a client-side HTML templating engine makes the HTML cumbersome to manage and style.  dna.js is all about keeping it simple.

Issues

Submit bugs, feature requests, and questions at: github.com/dnajs/dna.js/issues