Running a jquery component using nodejs

I have a fully developed jquery component like jquery full calendar

my component seems to be running slow in browsers(not that calendar). so i thought of running it in the server using nodeJs.

i want to do all the dom manipulations in the server, only the html page has to be sent to browser. it seems everything is possible if i start from the scratch, but i dont want to do it. here is what i planned to do

  • if user enters the url then it has to hit the server.
  • Then in server all Js and css has to be compiled
  • Then it has to return the html file to the browser
  • when user performs some operation again it has to hit the server and do all changes then it has to sent to server

can anyone tel me how to do this or any other best alterative way to acheive what i want? A simple demo app would be better. Thanks in advance.

there's a jquery node package. So you can install that package and the use jquery as you would otherwise have done

install jquery for node.js

npm install jquery

then add this line to your script

var $ = require('jquery');

if you are on windows you might run into troubles with contextify while installing jquery. If you do search for the error message (in essence you need to setup make for your environment)

I think there might be some confusion in your question about the way the DOM works.

Whilst it is possible to render an app that has a DOM on the node.js server using a library like jsDom, when that same page is served to the client, it has a completely different DOM instance, and there isn't any way to communicate between the two of them. So any changes that your app made to the DOM on the server can't easily be propagated to the DOM on the client.

If your component seems to be running slowly in the browser, then you're much more likely to get a good result out of working on the component to make it more efficient than you are by trying to offload the DOM manipulation to the server.

If you look at the two different scenarios and break them down into what the browser actually does, you'll see why it's a bad idea.

Scenario (1) - Render Dom changes on the server

  1. Step 1 - Client Loads initial html page from server (slow)
  2. Step 2 - User interacts with page on client(fast)
  3. Step 3 - Client sends the user interaction back to server (vslow)
  4. Step 4 - Server loads a Dom(slow)
  5. Step 5 - Server runs Dom changes (fast)
  6. Step 6 - Server sends re-rendered HTML back to client (slow)
  7. Step 7 - Client renders new HTML from Server (slow)

Scenario (2) - Render Dom changes on client

  1. Step 1 - Client Loads initial html page from server (slow)
  2. Step 2 - User interacts with page on client(fast)
  3. Step 3 - Client runs Dom changes (fast)
  4. Step 4 - Client renders changed DOM (Slow)

You will be much better off just working on your component to make it faster than to try offloading the DOM rendering to the server. Here's a good blog post on how to speed up jquery code.

If you really do want to go ahead with the workflow you suggested in the question, I'd recommend looking into the jsDom library, but I really wouldn't recommend it.