Architecture guidelines for a "single page web-app"

Question

I'm going to start a side project to build a "single page" web application. The application needs to be real-time, sending updates to the clients as changes happen.

Are there any good resources for best-practice approaches wrt the architecture for these kinds of applications. The best resource I've found so far is the trello architecture article here: http://blog.fogcreek.com/the-trello-tech-stack/

To me, this architecture, although very sexy, is probably over-engineered for my specific needs - although I do have similar requirements. I'm wondering if I need to bother with a sub/pub at the server side, could I not just push updates from the server when something happens (e.g. when the client sends an update to the server, write the update to the db, and then send an update to the clients).

Tech-wise, I'm probably looking to build this out in Node.JS or maybe Ruby, although the architecture guidelines should to some extent apply to any underlying server technologies.

Answer 1

I would definetly look towards client side MVC for this such as Backbone.js. It's very lightweight but will give your application some much needed structure. I highly recommend the Peepcode screencast as the fastest way of learning more about Backbone.

A nice architectural benefit of client side MVC like this is the fact that you can more easily move towards exchanging data with your server side e.g. structured JSON over REST.

Backbone.js supports this out of the box - you can serialise your models between the client and server as JSON, which can free us from thinking in terms of request/response.

Something like Node.js on the server side appeals under this model where you will possibly have a lot of short lived potentially asynchronous requests to push and pull data.

One alternative.... A model like Comet can be a simple way to achieve web pub/sub and there are some server side frameworks that support this.

Answer 2

I would probably go with a MV* javascript framework for the front end. I myself am building a single page web application and after investigating a number of solutions, I ended up going with Backbone.js. I found while this solution did not provide the most out of the box functionality, it did provide me with a core foundation to start with and is a lot more flexible than other solutions I looked at (which was important to me).

Other popular solutions are Ember.js and Knockout.js which do provide more out of the box functionality however you have to follow their conventions to make use of thT functionality (which may or may not work for you).

Answer 3

This is a no brainer IMO. AngularJS for the front end because it's awesome. NodeJS/express/SocketIO for a dynamic and sexy backend with pub/sub goodness and a minimum of fuss. And as a bonus, you can use one language for the front and the back!

Check out my implementation of same https://github.com/hackify/hackify-server for an example

One caveat, some folks are recommending a NodeJS alternative to socketio called sockjs but I haven't checked this out so I can't recommend it

Answer 4

Sounds like what you're looking at is Apache 2.2 with PHP or Tomcat application server with a simple servlet which handles requests. It's the carpenter's equivalent of hammer and nails. Nothing complicated but it gets the job done. If you ever needed to expand functionality, you could always do so since Tomcat can support jsp and jsf if you ever needed it to.

For what concerns the front end, I'd be comfortable simply using jQuery ($.post, $.load, $.ajax) since it's quite handy doubling as a means to add functionality to your page in combination with jQuery UI

Answer 5

If you want real-time client updates, then you will either have to implement the long-blocking "AJAX" calls, or preferably use the modern websockets. These allow you to push updates to a connected client which will be handled by a bit of javascript.

I understand the current state-of-the-art (or latest fad) is AngularJS by Google. Its partly designed to make writing SPAs easier.

Answer 6

If you want something close to the mean stack (node.js, mongo...) for building a single page application that needs to be reactive, I'd pick meteor. Especially if you are building a prototype and starting from scratch.

Rails with an angular frontend would be an ok choice imho, but you will have an harder time "sending updates to the clients as changes happen", as you would need to install specific gems, string together some long-polling or sockjs library...