Design Patterns for the Rails 3.2 JS-heavy App

Question

I am working on a new guide for rail management 3.2, which relies heavily on JSON data (autocomplete results, calendar events, tasks, dynamic manipulations with forms, etc.). The backend system is already quite solid, so we are investing in part of the user interface, and we want to make it more like a webapp-like one, reflecting the behavior of other "fat client" applications such as Google. To achieve this goal, what would be the best design structure: using an MVC JS structure such as Backbone.js, thereby delegating a significant part of the data manipulations to the user interface and interacting with our JSON api or working with remote JS (i.e. . js.erb), which allows more efficient use of Ruby code?

We already use Backbone.js very roughly in some views, but it seems that the first approach uses a lot of resources for developers, since JS is harder to code, and we have an additional burden of mirroring the model code in the user interface, being much more responsive to the enduser. The latter approach allows the use of a more compact View code due to response time and, nevertheless, is not entirely correct, but, of course, it develops faster and becomes more flexible.

Given that we are a small team with a lot of Rails experience and not much in JS / Coffeescript / Backbone.js, and we have a close time to meet, which approach would you take? The reason I lose this is because our company takes pride in the quality of our code and our commitment to modern design patterns, so I can't help but think that, despite its strengths, using remote JS seems like a "bad label" so I would be very grateful to you from you guys. Maybe I'm just biased.

Answer 1

Well, I can’t decide for you, it depends mainly on how close the deadline is, but I prefer the Backbone.js approach.

If I have to argue, I can say that you will have static and cached JS scripts and lightweight AJAX requests (JSON only), while with a different approach you will load heavier and non-cached scripts.

But first of all, I believe that the Backbone method is the best way to get your code organized and maintained.

• Coffeescript is awesome and very fast to learn. This simplifies JS syntax and makes it fun. It is worth a try. Studied in 30 million.

• Backbone.js is awesome and fast to learn. Using this approach will allow you to rely on events that are much purer than we can do.

  Thanks to the asset pipeline, you can separate the class views / models / routers in separate files, which is very nice.

  Thanks to coffeescript, you can write your base objects using very clean syntax:

  class @MyView extends Backbone.View events: 'click obj': 'handler' [...] 

  With this, I add a little @module to my projects to organize my objects in namespaces.

However, it will take you some time to find a good file organization.

You can start with gem rails-backbone and have some rail-like generators. I don’t like it, but I think this is a good start. It includes the Backbone.sync function adapted to the rails.

Edit

Here are some details about the @module . I include this in application.js.coffee (don't forget require_self ):

 @module = (names, fn) -> names = names.split '.' if typeof names is 'string' space = @[names.shift()] ||= {} space.module ||= @module if names.length space.module names, fn else fn.call space 

In my class files:

 @module 'MyProject.Model', -> class @MyModel extends Backbone.Model [...] 

(Note that @ is a coffeescript shortcut for this. .)

The assistant creates MyProject and MyProject.Model if necessary (if null) and performs the specified function with this binding to MyProject.Model . This way you can access your model as from the root namespace ( document ):

 m = new MyProject.Model.MyModel 

You can also bind an assistant:

 @module 'MyProject', -> @module 'Model', -> [...] 

I use the following namespace hierarchy

 MyProject Model View Router Runtime (to store all runtimes objects and don't pollute the root namespace, easier for debug)