Sunday, October 02, 2011

Server Side jQuery - ssjquery

I've got a new server side jQuery project up.  It's an extension on some ideas and projects over the past couple of years.  It uses the node.js javascript interpreter, and node libraries like jsdom, and htmlparser to do all the work.  It can be used within various projects that are not javascript via a command line process or a web service.

This is what the pipeline looks like on the server side.
json + html + server side jquery => rendered html

Instead you can run it on the client side so you don't need a server for development.
json + html + ssjquery run on client first before other scripts => rendered html

A webservice creates the json, and your server side jQuery scripts populate the html.  Think of it as an industrial strength templating language that millions of front end developers know how to use.

Here are my server side jQuery slides I gave at the reject.js conference in Berlin last week.  It wasn't a great talk, but I think it's helped me understand a little more on how to explain the concept to people.  I purposely did not put any code in that talk, so I'm providing it here.  Instead I concentrated on why you'd want to do it.  I might try and write up my talk notes as a separate blog post.

Here is the project page:

There is a python buildout script which downloads node.js, and all required libraries into a directory ready to run (with the npm package manager).  In there it creates a bin directory for the bin/ssjquery script for the command line version and bin/ssjqueryServer for the server version.

As a bonus, I also install the uglifyjs binaries, and coffee script binaries - but they are not required.

Here is how you run the python buildout...

$ hg clone
$ cd ssjquery/pythonbuildout
$ python bootstrap -d
$ ./bin/buildout
$ cd ..

Here is how the command line script ssjquery is called to output rendered html.

$ cd js/example/ 
$ ../../pythonbuildout/bin/ssjquery ./ server.json index.html jquery.js yourServerSide.js yourServerSide2.js > renderedHtml.html

Here is the ssjqueryServer script which listens as a webservice to render html.

$ cd js/example/ 
$ ../../pythonbuildout/bin/ssjqueryServer ./ server.json index.html jquery.js yourServerSide.js yourServerSide2.js 
Server running at try url: http://localhost:8124/?basePath=./&serverJson=server.json&serverJs=jquery.js,,,yourServerSide.js,,,yourServerSide2.js&templateUrl=index.html

That runs a web server which renders the files for you.  It's a bit quicker than calling a process each time you want to do things.  There is a possibility of embedding the javascript interpreter inside python (or php/java/etc) too.

Structure of html

The structure of your html is something like this:
  • include jquery
  • include code which will be used on server side and client side.
  • include server side jquery, and run it if have not processed it server side.
  • include client side jquery
There is a minimal index.html example here if you want to see what it looks like.

This lets you use the same html in either server side processing mode, or client side processing mode and the results should be the same.


Blogger said...

BlueHost is one of the best hosting provider for any hosting plans you might require.

for IT the said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.