dna-engine

Introduction

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

The dna-engine project is open source under the MIT License and hosted on GitHub.

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.

            <h1>Featured Books</h1>
            <section class=books>
               <div id=book class=dna-template>
                  <h2>~~title~~</h2>
                  Author: <cite>~~author~~</cite>
               </div>
            </section>
         

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

            <h1>Featured Books</h1>
            <section class=books>
               <div class=book>
                  <h2>The DOM</h2>
                  Author: <cite>Jan</cite>
               </div>
            </section>
         

Call the dna.clone() function to insert a copy of the template into the DOM.  The supplied 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.

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

✅ To-Do List Application Example

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

Experiment with the dna-engine to-do list application at: jsfiddle.net/4jkua81f

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.

📘 Book Finder Example

dna-engine is designed work well in REST applicatons.  This simple example shows results from the Google Books API being fed into the dna.clone() function.

Experiment with the Book Finder example at: jsfiddle.net/ztsr4qm9

For a step-by-step explanation of the code, check out the Tutorial to Build a REST-driven Search Component.

☯️ Live Model Example

dna-engine 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: jsfiddle.net/p5exnfuq

Philosophy

The big frameworks, like Angular, React, and Vue, are 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-engine is familiar to all web developers, enabling developers to be productive on the first day of using dna-engine.

1. Independent: Be web framework agnostic.
2. Cohesive: Put no HTML in your JavaScript.
3. Valid: Templates should be real HTML that pass W3C validation.
4. Functional: Iteration is best done with data arrays not messy template for loops.
5. Stealth: Zero setup until data is pushed (can be after page load).
6. Data: Stay away from serialization/deserialization and HTML strings.
7. Declarative: 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-engine 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.  If you use a traditional server-side web framework, such as Grails, PHP, Rails, Django, or Flask, dna-engine can simplify your HTML templates and improve performance by moving processing to the client.  However, dna-engine is best as a Jamstack web application running entirely on the client.

dna-engine is all about keeping it simple.

Questions and comments

Tweet your question or comment with #dna-engine or submit an issue on GitHub.