Server-side and client-side JavaScript

Question

I am having great difficulty choosing which frameworks to use for an app that is about to go into development. I am a front-end guy, and my friend is doing the back-end.

Say I was developing a simple todo list app. I have a template for each item on the todo list. Ideally, I would want the server-side JavaScript to use this template as well as the client-side JavaScript.

So on page load, if there are already 5 todos in the database, the HTML will be compiled on the server. If I then add a new todo item to the list, the client-side JS will compile the HTML using the same template.

I've heard a lot of buzz about Node.js, Backbone.js, etc. It is quite overwhelming just how many options there are for this sort of thing. Can anybody give me examples of using these technologies together?

Answer 1

Node.js is JavaScript on the server-side, while Backbone.js is used to structure your front-end stuff elegantly, using collections, models and views.

Each of the two has their own role. For a better comparison between front-end frameworks you can check Addy Osmany's TODO list, written in a LOT of them: https://github.com/addyosmani/todomvc

There are some nice tutorials over the net on Backbone also:
- http://dailyjs.com/2011/04/04/node-tutorial-19/
- http://backbonetutorials.com/
- http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/

Here's an application that combines Node.js on the server with Backbone on the client:

http://fzysqr.com/2011/02/28/nodechat-js-using-node-js-backbone-js-socket-io-and-redis-to-make-a-real-time-chat-app/

Backbone (like Node.js) is really popular so you would get a lot of help / resources online.

Answer 2

You might have a look at http://derbyjs.com/#why_not_use_rails_and_backbone

They try to achieve the following when opening a webapp:

1. Transmit a completely rendered page on the first request.
2. From then on all changes shall be directly made client side and synced to the server via ajax.

So usually the first request a user makes to a site with a "fat" client is pretty painful:

• App data has to be transferred and initialized
• Data has to be loaded by the Client
• Data is displayed

This behavior is usually way slower than transmitting an oldschool like server side rendered page. Gmail or iCloud for example need some time to load up because they do it like this.

Answer 3

Sure. Check out TodoMVC to get a better idea of various alternatives.

Answer 4

Paste the template file at the bottom of the page. This way your client code can use it easily without making a call to get the template.

An Example using JQuery when calling your template would be

<div style="display:none" id="sample_jquery_template">
  Hello ${name}
</div>

in your client side javascript code

..javascript..
person = {name:'Joe'}
$.tmpl($("#sample_jquery_template").html(), person ).appendTo( "#destinationList" );

Answer 5

There are enough templating solutions out there like mustache.js working on both ends.
But for working with the templates on the client-side it is helpful to have the rendered data available.
Henrik Joreteg wrote a nice article about reusing your backbone-models and syncing them between client and server.

Answer 6

Dav Glass from Yahoo gave a good talk showing how he ran YUI3 on the client and server with node.js.

Here is his github of the examples from the video:

You also might be interested in checking out jsdom

I just started learning node and this video really helped me see how to experiment on the server and client with node. You will see him disable javascript and the calendar still works - that was cool.

And here is a good backbone resource: