- ×
An uncomplicated user interface library for semantic templates
Filed under application tools › templatingShow Alldna-engine
An uncomplicated user interface library for cloning semantic templates
dna-engine is a lightweight easy-to-use UI library enabling developers to rapidly build maintainable JavaScript applications.
A) Bookstore Example
Designate templates with the
dna-template
class, and put the templates directly into the HTML of your web page. Use the element'sid
to indicate the name of the template. Enclose data fields in double tildes~~
.1. HTML for book template
<h1>Featured Books</h1> <div id=book class=dna-template> <h2>~~title~~</h2> Author: <cite>~~author~~</cite> </div>
Then call the
dna.clone()
function to insert a copy of the template into the DOM. The supplied JSON data object populates the fields of the template.2. JavaScript call to add book node
dna.clone('book', { title: 'The DOM', author: 'Jan' });
The new clone element replaces the template. The original template is detached from the DOM and kept for additional cloning.
3. Resulting HTML with clone
<h1>Featured Books</h1> <div class=book> <h2>The DOM</h2> Author: <cite>Jan</cite> </div>
Need to clone the template multiple times? Simply pass an array of data objects into the
dna.clone()
function.B) Additional Information
- https://dna-engine.org (see the "Try it out" section for an interactive example)
- Sample To-Do Application (jsfiddle)
- Introduction to dna-engine (YouTube)
- Documentation
- Release Notes
C) Contributor Notes
To be a contributor, fork the project and run the commands
npm install
andnpm test
on your local clone. Make your edits and rerun the tests. Pull requests welcome.D) Build Environment
Check out the
runScriptsConfig
section in package.json for an interesting approach to organizing build tasks.CLI Build Tools for package.json
- 🎋 add-dist-header: Prepend a one-line banner comment (with license notice) to distribution files
- 📄 copy-file-util: Copy or rename a file with optional package version number
- 📂 copy-folder-util: Recursively copy files from one folder to another folder
- 🪺 recursive-exec: Run a command on each file in a folder and its subfolders
- 🔍 replacer-util: Find and replace strings or template outputs in text files
- 🔢 rev-web-assets: Revision web asset filenames with cache busting content hash fingerprints
- 🚆 run-scripts-util: Organize npm scripts into named groups of easy to manage commands
- 🚦 w3c-html-validator: Check the markup validity of HTML files using the W3C validator
Feel free to submit questions at:
github.com/dna-engine/dna-engine/issuesdna-engine is open source under the MIT License. The website and documentation are published under the CC BY-SA 4.0 license.