what is the best architecture to show the frontend of a pure js app?

Question

Basically, if you have a purely JS app (that get info from socket.io, or from a server with ajax request), and you need to show this data after processing it, what technique are you using?

Currently i'm creating the elements manually with code like

var myDiv = new Element('div',{ /* options */);

And injecting it where I need making all the DOM structure. I find this hard to maintain and especially for those designers that can code html, but they can't code html from JS.

Is there any way that will improve this process? Is it better to get the html from ajax? or just make html code in a string?

I'm looking for the most optimal in terms of maintenance and resources.

Answer 1

What you're looking for is a "template".

You have an HTML template (some divs, etc) and you bind this with the datas you provide in JS. Then, with whatever template engine you're using, you can get the full HTML.

Here are some template engines out there:

• https://github.com/flatiron/plates
• http://embeddedjs.com/

And a code sample using plates:

var Plates = require('plates'); // specific to node.js, see for client-side use

var html = '<div id="test">Old Value</div>';
var data = { "test": "New Value" };

var output = Plates.bind(html, data); 
console.log( output ); // '<div id="test">New Value</div>'

You can store your templates either in a single file ("templates.html") loaded through ajax, or by storing it in the HTML page (not really recommended for maintenance matters).

If you store them all in an external file, you can do something like this:

templates.html:

<!-- text/html isn't parsed by the browser so we can put anything in it -->
<script type="text/html" id="template1"> 
    <!-- put your template in there
</script>

And you can get its content through getElementById( 'template1' ).

Answer 2

Easiest way for you if project is in late stage to add something like jQuery.template plugin and create templates in separate files. Then, use backend to combine those peaces in single page and on DOM Ready fire up your client side app.

If your project is in early stage use AngularJs or BackboneJS frameworks. Believe me it is worth every cent :)

Answer 3

I would recommend you take a look at Backbone.js.

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface

I use backbone even if I am not over a RESTful interface. It's pretty easy to separate the structure from the behavior ... You can achieve the same using jQuery but it wont be as neat and clean. It's one of the MV* framework. You have:

1. Models containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.
2. Collections are ordered sets of models.
3. Views: The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page
4. Routers provides methods for routing client-side pages, and connecting them to actions and events

It's getting attention recently. Apps that were created using Backbone include:

1. FourSquare
2. LinkedIn for Mobile

This is a great resource if you're starting to work with Backbone.

Answer 4

Distal Templates http://code.google.com/p/distal/ :

 <table id="a"> 
   <tr><th>OPINIONS</th></tr> 
   <tr data-qrepeat="m keywords"><td data-qtext="m.name"></td></tr> 
 </table> 

Then call:

distal(document.getElementById("a"), {
  keywords: [
    {name:"Brilliant"}, {name:"Masterpiece"}, {name:"Witty"}
  ]
});

will become:

 <table> 
   <tr><th>OPINIONS</th></tr> 
   <tr><td>Brilliant</td></tr> 
   <tr><td>Masterpiece</td></tr> 
   <tr><td>Witty</td></tr> 
 </table> 

Answer 5

And injecting it where I need making all the DOM structure. I find this hard to maintain and especially for those designers that can code html, but they can't code html from JS.

Another option is modest. As you can see from the documentation, it obviates the need for HTML chunks in javascript. The designers can change the HTML structure without needing to look at the javascript, and javascript coders can use parameters defined by the designers to fill in the data (all in javascript).

This example is from the readme:

HTML:

<div>
  <contact>
    <name>Casey Jones</name>
    <phone>123-456-7890</phone>
  </contact>
</div>

Javascript:

var contact = {
  name : "Casey Jones",
  cell : "123-456-7890"
};
var out = modest.render('contact',contact);