Good Practices for Rich Web Applications

Use jQuery

jQuery is the best thing that has happened to Javascript. The library is elegant, powerful and has exactly the right level of abstraction for working with the DOM.

Learn it and use it. Good resources are: the jQuery API,

Learn Javascript

Javascript is the programming language of the web. Learn it! Javascript is different from most other programming languages. 

If you want to learn Javascript you should get the following books, The Little Schemer, The Seasoned Schemer, Javascript, the Good Parts, and possibly High Performance Javascript

 
Learn CSS 

Many programmers think that CSS is the language of designers and not programmers. This is not the case at all. If you are lucky enough to have a designer on your team (most people don't), CSS is the language with which you communicate. It is the interface between designers and programmers and as a programmer you should know it better than the designers.

It will also be up to you to keep the HTML clean, and a good way to do this is to use semantic HTML, combined with CSS. You have no idea what the designers can come up with.

Decide how "Rich" your application should be

How rich should your application be? The scale varies from no Javascript to only Javascript, but you will probably want to land somewhere in between. Here are a few suggestions.

• No Javascript, everything is server generated.
• Slightly enhanced pages, simple validations, but no Ajax.
• Ajax enhanced pages, but every page still reloads frequently.
• Single page per area, entire area is handled by Javascript.
• Only Javascript, Ajax interaction with the server
• Only Javascript, no interaction with the server
  
  Html
  HTML is code! Divide your pages into partials by responsibilities. It allows you to keep your pages DRY and readable. The Single Responsibility Principle applies to HTML too.
  Make sure you keep the Javascript with the code that it manipulates. If you, for example, have a calendar partial that uses jQuery DatePicker, you have to make sure that the partial includes all the necessary Javascript to configure the calendar. Don't keep Javascript code in the page away from the partial. Things that change together should be together.
  Use clone()
  Separating the HTML and the Javascript goes both ways. Don't generate HTML code in Javascript. It doesn't matter that it is super simple to do it using jQuery.html(). Keep them separate, use jQuery.clone() instead.
  
  
  The point of this is, again, to keep the HTML separate from the Javascript.
  Conclusion :

              We have to realize that we are responsible for the entire application, not just the business logic, but  the HTML and CSS too

Jquery changes from 1.4.2 to 1.6

jQuery is a powerful library and it is possible to get by without
using any of the new features. 

delegate()

Most people know about live() and how it can be used to attach
listeners to elements that don’t yet exist in the DOM. live() has
a younger brother that was born in 1.4.2 and he is called delegate().
delegate() is more powerful. It gives you more precision in
where to attach the listener.

$('.main-content').find('section').delegate 'p', 'click', ->

  $(this).addClass 'highlight'

As you can see above, delegate(), unlike live(), can be chained like
normal jQuery calls.

jQuery.now(), jQuery.type() and jQuery.parseXML()

Nothing special here, just some utilities that are good to know about.

$.now() is (new Date()).getTime()

$.type('hello') is 'string'

xml = """

"""

xmlDoc = $.parseXML xml

($(xmlDoc).find 'title').text() is 'RSS Title'

All these utilities are interesting, but the truly good thing that came
out of jQuery-1.5+ is Deferred().

Deferred()

With the release of jQuery 1.5 the internal implementation of $.ajax
was changed to use Deferred(), and, even better, the implementation
was deemed so useful, that it became part of the public API.

Here is how you can use it via the $.ajax method.

Declare a function hex that calls the /hex url on the server, which
will return a hex value between 00 and FF.

  hex = ->

    $.ajax { url: '/hex' }

Call the function multiple times, and you get a new Deferred back for
each call. Notice the lack of handlers for the calls.

  red = hex()

  green = hex()

  blue = hex()

Attach handlers to each of the Deferreds to do something useful with
the returned value. Notice the use of done instead of success.
success is deprecated and will be removed in 1.8.

  red.done (hh)->

    $("#r").css 'background-color', "##{hh}0000"

  green.done (hh)->

    $("#g").css 'background-color', "#00#{hh}00"

  blue.done (hh)->

    $("#b").css 'background-color', "#0000#{hh}"

I am not limited to adding one handler, I can attach as many as I like.
Here I attach another one for logging the success of the red-call.

  red.done (hh) ->

    console.log(hh)

If this was all there was to it, I would be happy, but it is not by
using the $.when method I get a new Deferred object that orchestrates
multiple Deferreds in a very simple way. Let me create a color-Deferred
that waits for the others to return and then calls a new callback when
they are all done.

  color = $.when(red, green, blue)

  color.done (r, g, b) ->

    $("#color").css 'background-color', "##{r[0]}#{g[0]}#{b[0]}"

The results from the requests are given in the same order as the
Deferred objects are passed in. The results are given as an array with
three arguments [ data, ‘success’ , deferred ].

Apart from the examples I have shown, there are methods
working with Deferred. Methods for creating, jQuery.Deferred(),
resolving, resolve(), resolveWith(), and rejecting, reject(),
rejectWith().

To attach handlers to the events, you can use done() for resolve,
fail for reject, always() for both resolve and reject. You can also
use then(doneCallback, failCallback) to attach both a done and a
fail handler with one call.

Deferreds are really cool, check them out here