Maintainaible JavaScript

Maintainaible JavaScript

WSG Meeting, July 2006, London

Christian Heilmann

http://wait-till-i.com

http://www.beginningjavascript.com

The perfect scenario

Play Button

Equal amounts of Innovation, Implementation and Maintenance

The perfect scenario

The advertised scenario

Fast forward button

Lots of innovation, a bit of implementation and nearly any maintenance

The advertised scenario

Example: Image Reflector

Scriptaculous image reflector

Example: Image Reflector

Example: Image Reflector

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

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

Example: Image Reflector

Duck - Ball (euphemism)

This is nothing new

Rewind

Rewind 6 years

Doc Ozone

Rewind 6 years

HTMLGuru

Rewind 6 years

Dan Steinman

We all did it…

Ich will net

What happened?

Stop

What happened?

Eject

What happened?

No Record

Which means…

So what can be done?

How?

How?

What Is Good JavaScript?

What Is Good JavaScript?

What Is Good JavaScript?

Heavily commented code for a tutorial

What Is Good JavaScript?

Sensibly commented code

What Is Good JavaScript?

What Is Good JavaScript?

What about examples?

Quick example

Folder with different code files

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];
		}
	}
}