Search code examples
jquerynode.jsjquery-templatesenvjs

nodejs or envjs - dynamic jquery tmpl


My current task is to generate and provide centralized templates for a particular DOM - for this example let's just say it's a form.

Basically I'd like to take each form element (from the labels, to the inputs, to the div wrappers) and save them as individual templates.

From there we will have a UI where our producers can piece together these forms. Once they decide how they want their form to be layed out (DOM order and structure is actually critical for this project. It can not be a CSS-only solution), a script on our platform side will save a JSON object which will determine the structure of the DOM based on template names which I can reference on page load later on.

I'm thinking that an ideal solution here would be to send that JSON object to a node server or use envjs somehow to 'build' this dom and then assign it to a PHP variable to be included in the CodeIgniter view so it can be indexed by Google.

I know JQuery works natively with envjs and I know there's a JQuery plugin for node, but alas, this is my first server-side JS project and it happens to be pretty major. I was able to get envjs working on my local machine through the command line but it takes a good 10-30 seconds to complete a simple task. If envjs is the way to go, how can I keep it running in the background and have scripts reference it? PHP curl to an envjs servlet on Tomcat maybe?

One caveat is my local dev is WAMP (IT won't let us have local unix machines) but our test and production environments are both LAMP. I do have a personal LAMP server I can test on if that's the absolute-only way to go here, but coding company stuff on my personal server can get me in some heat.

Unfortunately I don't have time to research all the possibilities and try/fail as I normally would with new technologies on my own time. Ideas, guidance, code examples - anything that can help me decide how to approach this would be greatly appreciated.


Solution

  • Short answer: use node. Use it right now. In fact, here's a link to the latest native Windows .exe which is standalone with no dependencies: http://nodejs.org/dist/v0.5.4/node.exe

    Long answer: env.js is/was a cool project. It simulates a js environment in js. It can run in other environments and stuff. Whatever, it doesn't matter.

    Node.js is a js host environment that runs on top of V8. V8 is the fastest js environment there is, powers Chrome, etc. Node itself is for the native system environment what regular js is to a browser: an powerful combination of APIs mixed together in a witches brew of ease of developer use and breadth of feature set.

    On the browser you get control over video, audio, user input, etc. via DOM extensions to javascript. With node on the server (or just your own computer, it has a LOT of applications beyond regular server usage) you get incredible support for all types of IO: http/udp servers and clients that do all the boilerplate work for you, file I/O, managed data streams for handling said network and file I/O, access to spawn and communicate with child or fork processes, and direct access to V8's compiler to compile and save/run javascript bytecode.

    In regards to the DOM, there's at least one full (html) implementation of the DOM for node and multiple partial ones. At least YUI, jQuery, and MooTools that I know of can be run in Node trivially on top of a DOM library to construct DOMs from any source you'd like as you would in the browser, and then serialize it to html or whatever.

    https://github.com/tmpvar/jsdom is the DOM implementation that runs on in node (or any javascript environment I believe).

    https://github.com/tmpvar/jsdom/blob/master/example/browser/browser.js is an example of emulating a browser:

    var sys = require('sys');
    var dom = require('../../lib/jsdom/level2/html').dom.level2.html;
    var browser = require('../../lib/jsdom/browser/index').windowAugmentation(dom);
    
    var document = browser.document;
    var window = browser.window;
    
    var el = document.createElement('div');
    el.id = 'foo';
    el.innerHTML = '<em>This is a test</em> This <strong class="odd">is another</strong> test ';
    document.body.appendChild(el);
    
    sys.puts(document.outerHTML);
    

    Some other libs that may enlighten your way to a decision