One of the most important practices when developing complex web applications is to seperate them into different layers. This applies to the server side as well as to the client side of things. On the client side the separation usually is:

  • Content
    The content of the web application expressed in semantic HTML markup, enriched with additional ids and classes to refer to in the other layers
  • Layout
    CSS rules for styling the content
  • Behaviour
    Javascript code transforming the DOM to provide a better user experience
It is important that the second and third layer are optional. The Content layer should contain the basic information and be accessible without the Layout and the Behaviour layer. Content and Layout should look nice and work without the Behaviour layer.

While this wisdom is very much common place for the first two layers, many people still don’t do the Behaviour layer correctly. There are several important points to this:

  1. Build every single page so that it works well without any javascript. Do not rely on javascript for navigation or load content via javascript etc.
  2. Build your scripts so that they use DOM methods to transform the non-javascript page into a better page using javascript.
  3. Use w3 DOM scripting in your pages. No document.write nonsense, no onclick=”” for events. If you want to or have to support Internet Explorer that means using additional addEvent methods. (See the links for John Resig’s excellent addEvent )

Links: