alanwilliamson

Rendering Server Pages using JQuery and CFML

A few months ago, I started the integration of Javascript to OpenBD, that would enable the rendering of Javascript at the server side.

Pre-Christmas, I successfully proved the integration points and while there was some rough edges, the whole notion of running Javascript on the server-side instead of inside the browser got my imagination working overtime.

Javascript integration to CFML was working very well and efficently. I successfully moved variables from CFML into Javascript and back out again. I proved that you could write CFML functions using pure Javascript which enabled you to create full CFC's using just Javascript instead of CFML or CFSCRIPT.

While powerful, I wanted more! Javascript for many people without their popular framework isn't really Javascript. Take, for example, JQuery away from some developers, and they are completely lost.

The problem with the server side is that it has no concept of the browser DOM model, to which all these frameworks rely on to function. So before you try to even load up JQuery, ProtoType or any other Javascript library, you first must mock, or emulate, the DOM tree and its functions.

Fortunately there are people who are working on this problem, primarily for testing purposes. One such project is EnvJS, which is a complete browser emulation, written, would you believe, in Javascript.

So be importing this project's efforts first, we can simulate the browser at the server side, allowing us to do things like this:

<cfjs>
$cf.load('env.rhino.js');

window.onload = function(){
  $cf.print( document.innerHTML );
};

window.location='http://www.google.com/';
</cfjs>

This example sets up a listener for the "onload" function on the "window" object, and when triggered uses the CFML Javascript object $cf to print it out to the browser. We then load the "window" object with content remotely loaded from Google.

This is doing the exact same as say CFHTTP would, and then dumping out the resulting content using CFOUTPUT.

This already is very powerful. We could load up our server-side template, manipulate it using Javascript, then send it straight back to the client.

window.location=$cf.expandPath("/my/template.inc");

Now the real exciting step forward is adding a framework to the mix so we can start doing some real manipulation of the template at the server-side. Imagine this saved in a CFML page:

<cfjs>
$cf.load('env.rhino.js');
$cf.load('jquery-1.3.1.js');

produceHeader = function(){
  var content = "<p>My Header: " + $cf.now() + "</p>";
  var query = $cf.QueryRun("ds", "select column1 from table");
  //do something with the query
  return content;
};

window.onload = function(){
  // Replace the header tag using JQuery
  $("#header").html( produceHeader()  );

  $cf.print( document.innerHTML );
};

window.location=$cf.expandPath("/my/template.html");
</cfjs>

Now we have a very powerful combination; JQuery and CFML. The ease of manipulating HTML components using JQuery coupled with the server side power of CFML.

No longer do Javascript developers have to worry about the confines of the browser and open up a new world of server-side processing without having to learn a single line of a new language, moving all their current knowledge (and libraries) with them.

This is exciting me greatly and best of all, this isn't a pipe dream. You can start playing with this now! Start creating your server-side pages using Javascript and JQuery, running on top of OpenBD, now.

I will be doing a lot more exploration and performance tuning for this plugin. I am also looking for deep integration where even the need for CFJS tags are removed, by creating a complete server-side file extension (.jss?) that would automatically render Javascript pages on the fly.

We may never build dynamic server side pages the same ever again.

Head over here OpenBD Download Page to get the latest nightly build of OpenBD, and the Javascript plugin for it.


 

Recent Cloud posts

Recent JAVA posts

Latest CFML posts


 
Site Links