dna.js
Introduction
@@pkg.summary 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 under the MIT License.
To-Do List Application
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
Add the class dna-template
to an element to turn it into a template, and
give the template a name using the id
attribute.
Put the template directly into the HTML of your web page, and specify where data fields
(object properties) are to be inserted into the template by enclosing the field names in
double tildes.
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>
book
node
dna.clone('book', { title: 'The DOM', author: 'Jan' });
<h1>Featured Books</h1>
<div class=book>
<div>Title: <span>The DOM</span></div>
<div>Author: <span>Jan</span></div>
</div>
Call the dna.clone()
function to insert a copy of the
template into the DOM. The supplied JSON data object is used to
populate the fields of the template.
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.
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.
Featured Books
To see all the pieces running together, check out the standalone example:
Live Model
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 is 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:- Be completely web framework agnostic
- Put no HTML in your JavaScript
- Templates should be real HTML that validate
- Templates can be inline (no need for separate template files)
- Iteration is best done with data arrays not messy
template
for
loops - Zero setup until data is pushed (can be after page load)
- Stay away from serialization/deserialization (no need to call the
.html()
function) - JavaScript should be void of boilerplate code and anonymous functions
- 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, Rails, Django, and Flask 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