Maintainaible JavaScript

Maintainaible JavaScript

WSG Meeting, July 2006, London

Christian Heilmann

http://wait-till-i.com

http://www.beginningjavascript.com

The perfect scenario

The perfect scenario

• We’d find new solutions
• We’d test them and implement them in real products
• We’d maintain the solutions and update them when needed.

The advertised scenario

The advertised scenario

• We innovate
• We push the envelope
• We think outside the box
• We use a lot of clichés
• We could implement it in a real product
• There won’t be much maintenance

Example: Image Reflector

Example: Image Reflector

• Great implementation
• Technically very nicely done (unobtrusive)
• Sexy
• But…
• Not clever to implement in a live environment (heavy on the client)

Example: Image Reflector

• The author mentions this:

Like those shiny reflections on web pages? Here’s a little bit of code to play with. It’s called the script.aculo.us Reflector.

[…]

It’s not really meant for production use yet, as it will probably introduce performance issues and other nasty things,

but it’s always refreshingly nice to see what a few lines of Prototype and script.aculo.us code can do.

Example: Image Reflector

• The blog/news site reporting about it didn’t:

We all want cool effects right? I remember when applets came onto the scene, you would see the reflection animations (that would take 30 mins to download over your 28.8 modem).

Not Thomas Fuchs has put together a script.aculo.us Reflector that runs on top of Prototype/Scriptaculous (or course).

Example: Image Reflector

• The example page didn’t, and didn’t link to the explanation page.
• The example page and the blog post got added to deli.cio.us and digg.com.

Example: Image Reflector

• One of the tags a lot of people used for this script and similar effects was Ajax.
• What does it have to do with Ajax?

This is nothing new

Rewind 6 years

• Doc Ozone - DHTML and Photoshop tricks for funky menus

Rewind 6 years

• HTMLGuru.com Curious Eye DHTML tutorial

Rewind 6 years

• Dan Steinman's Dynamic Duo DHTML tutorial

We all did it…

• My old page - ichwill.net

What happened?

• The .com bubble burst, and the money stopped coming in…

What happened?

• People lost or left their job

What happened?

• And of course nobody bothered about documenting what they had done.

Which means…

• Most of our day to day jobs look like this:
• 
• We spend most of our time implementing and maintaining other people’s code

So what can be done?

• The current state of the world is not your fault, but the future state is.
• You can help avoiding the frustrations we feel now prevailing in the future to avoid stalling progress once more.

How?

• Write code with maintenance in mind
• Complain and ask for better and more thorough documentation – or even better
• Help with documentation instead of inventing yet another gallery/library/fading effect

How?

• Demand maintenance and documentation time to be part of the project plans
• Try to define code standards and practices in your company – and follow them up!
• Try to get a saying in the choice of technology and products used in your company.

What Is Good JavaScript?

• Great JavaScript does not necessarily innovate, but implements in a clean and accessible manner and keeps maintenance easy.
• This starts with basic best practice approaches to scripting:

What Is Good JavaScript?

• Keeping code readable
  • proper indentation
  • commenting
  • self-explanatory variable and method names

What Is Good JavaScript?

What Is Good JavaScript?

What Is Good JavaScript?

• Keeping code autonomy
  • Separation of presentation and behaviour
    • Don’t set styles in JavaScript unless absolutely necessary – use CSS classes instead
• Separation of repeated tasks into own methods
  • createLink(), getHTTPdata()
• Keeping code task- and self-contained
  • Separation of code into different .js files
  • Namespacing / Object literals

What Is Good JavaScript?

• Keeping code maintainable
  • separation of maintained variables and functional code – variables first, then code.
  • clear communication of generated CSS class names – if necessary as an own JSON object
  • separation of labels and other text content of generated code

What about examples?

• Just buy my book, they are all in Chapter 3
• Alternatively, and by pure coincidence, this is also the free sample chapter to download at
• http://www.beginningjavascript.com

Quick example

The labels JSON object

var locales = {
 'en-us': { 
	'askQuestion':'Ask a Question',
	'homePageAnswerLink':'Answer a question now',
	'homePageQuestionLink':'Ask a question now',
	'constrainLinkLength': 40,
	'constrainLinkLengthDetail': 300,
  },
  'en-uk': { 
	// same settings
  }
}

Retrieving label data…

function doI18N(){
  lang = yhost.PluginLocale;
  for(i in locales[lang]){
    elm = document.getElementById(i);
		if(elm){
		  elm.innerHTML=locales[lang][i];
		}
	}
}