We write code because that is our work and we write tests so that we know when we are done.

- Beck, K.  Extreme Programming Explained: Embrace Change

Or something like that.

So I have started kicking the tires on the metaphorical test driven development car. I started reading this book on Test Driven JavaScript Development (Developer’s Library). You can read the first few chapters for free on Safari books online. I think I’m going to get a subscription to Safari books for a while since it might be cheaper for me given my reading habits. I digress.

So I was sitting at my desk and I had to do some AJAX thingy with a form and an email address as the input for a client’s website. It looked pretty straight forward. But how do I give some email validation feedback to the user? I am thinking a regex expression would be nice. But I am not a regex ninja so I might need a few goes at this and how do I know if it works? The last thing I want is to prevent the user from entering valid email addresses – false positives are better than false negatives. Aha! How about I write some tests?

It took me a while and I had a lot of help from this guy’s blog but I came up with a regular expression that passed enough test cases for me to feel satisfied with it. Simply run it in your browser’s developer’s console to see it go.

After some researching the query looked like this

Then I asked myself if I could strip out this character. Hmm.. So I came up with this –

I would have liked to use this in an update statement but I couldn’t crack that last piece of the puzzle. Can you?

Caveats are that if the domain the client is on is HTTPS the URL fragment also has to be HTTPS but if the destination server doesn’t have a valid SSL certificate the submission fails. It fails silently in Chrome, Firefox and IE7. Sometimes it triggers a message in IE8 but it definitely triggers a security pop-up in IE6 (of course).

I found that Google chrome is the best browser for developing this because it actually tells you what is going on in the console and in the iframe – the rest just act like nothing happened.

The main aim of his talk as I understand is to come up with an object way of recognizing and talking about good code design and more specifically code coupling. He referenced the idea of ‘connascence’ which basically means “things which change together”. There are different types of ‘connascence’ (I wonder when I’ll get bored of using quotes on that word).

Types of ‘connascence’

1. name – method name and method call. When the name of a method changes you have to change the corresponding method calls. This is the weakest type of coupling and we refactor code in this direction.
2. position – order specific process. Think of an array as opposed to a hash or collection of some sort – the latter is better. By using a collection/hash we reduce our coupling to ‘connascence of name’.
3. meaning – variables mean arbitrary things that need to be understood to use them properly. Use constants instead.
4. contranescene – namespace conflicts. Ever heard of jQuery.noConflict()? Make your variables play nice with each other by using namespaces.
5. algorithm – duplication of algorithm in more than one place. I usually spot this very quickly.
6. timing ie. race conditions. This happens when a function or process finishes sooner or later than it is expected to. In JavaScript callbacks are really useful.
7. execution – order of execution matters.
8. identity – objects have to be the same.

Coupling drives me crazy and I need to get better at reducing it. It’s scary when I want to change some code and I keep wondering if some function far away is going to break. (Tip: keep related functions close together). I found this mnemonic  SOLID helpful. Maybe I should write each letter on a finger.

I’ve sometimes thought that optimizing web applications is as much a science as dowsing. (No offense intended, dowsers of the world — but you have to admit it’s a hard thing to explain even when it does work out.) Even when you are completely willing to invest time and energy into optimizing an application, how do you actually go about it?

I think dowsing is an apt metaphor but what woud this body of knowledge look like?

1. Design: A pattern for designing achievable websites.

You can get a some Photoshop templates including some nice grid based designs. But seriously, don’t talk about pixel perfect development if you don’t have pixel perfect designs.

Developer: Oh, I like that transparency (but really thinking, epic fail in IE6). Are we supporting IE6?

Designer: Yes.

Developer: (To project manager) How long is this supposed to take?

And don’t even start about using JavaScript to fix PNGs in IE6. Been there, done that and it can still be a huge time sink depending on the design. You know what happens when a developer comes across a huge time sink and an impending deadline? Bugs. Sorry, guys the secret was already out in Peopleware.

2. Develop: Guidelines for solving problems effeciently – this includes CSS, HTML and JavaScript.

I think the best way forward for HTML is the Semantic web including Microformats because you can write the same mark-up and use it in many different ways. The Mozilla Development Community has this nice article about writing effecient CSS and there is a movement towards Object Oriented CSS which I like – probably because of my formal programming background. The less redundancy I have in my life the better. The rule of thumb for JavaScript seems to be “Find a framework and stick with it”. jQuery is what I use most.

3. Test: A testing framework

This is where it gets interesting because I think there is a big need for this. There’s NUnit and JUnit and all kinds of gangsta sounding testing frameworks for other languages but on the net all we have is JS Lint. No offense to JS Lint but can we have some regression testing with ketchup please? But what would you expect when we are still terrorised by the Internet Explorer Trident Engine which is built on the mysteries of the Universe? Testing is important to ensure code quality and shorten lead times.

And then you say, “But Peter, you can use JUnit with the Google web toolkit”.

Segregation vs. Integration

I couldn’t really think of a better title so this will do for now. What I am trying to get at is two approaches to getting consistent results in a web development process – less time troubleshooting and more time having fun. On one hand I can see Yahoo!’s YUI and on the other Google’s Web Toolkit and now Closure Library. Yahoo! and Adobe seem to be on the same page on this where it feels like a design led approach.

Segregation

Bring me all your layouts, CSS and semantic HTML – plug it into my library and let me upgrade you.

Which is great for existing web development teams that are broken along functional lines of designers and developers. So the product of each process remains segregated: they can live independently of each other. Your HTML can have a different life-cycle to your CSS or JavaScript. This is nice because many people with different skill sets can work on the same problem. Also nice if you already have site that you want to spice-up a bit.

Integration

Google seems to be saying,

Come to me all who are object oriented and are strongly typed and I will give you HTML.

If you’ve already worked out your sweet science in Java, Python et al. why re-invent the wheel? Just port it into whatever format you need – integration. Great for code monkeys . . maybe you can fit a designer or two into the workflow but I think there is less variety in this process.

Hammers and nails

The problem with only having a hammer in your toolbox is that every problem looks like a nail. I can see how for enterprise applications Google’s philosophy is a god-send. You might already have a Java code base and all you need is a new interface or two. Write a few facade classes and you are on your way to a new intranet site or whatever.

But I am biased to the idea that the web offers such a rich range of experiences and possibilities. Do you remember how boring the internet was without Flash? All that reading, reading, reading. Having a diverse group of people working on a platform, in cross-disciplinary manner, will create rich set of possibilities.

Ideally I would like to believe that the integrated development environment will generate the best code possible but what if I want to make changes to the generated code? Maybe put in some microformats? Some hacks for IE9 perhaps? It’s the same problem that Model Driven Architecture has.

To be fair, this is an abstract thought experiment and time and experience will have their say. . and so can you.