Original URL: http://www.theregister.co.uk/2008/07/07/web20_for_developers/

How to be an instant Web me-2.0 developer

If you're so smart, how come you ain't rich?

By Verity Stob

Posted in Verity Stob, 7th July 2008 09:02 GMT

Stob Are you a Web 1.0 duhveloper in a rut? Is rich web codery passing you by in Internet time? Do you nibble on the ASCII Alphabetti Spaghetti of server-side processing, while younger, feck- (careful) and talent-less colleagues slurp the UTF-Eightti Vermicelli of client-side coquetry?

You do? I knew it. But don't let it get you down. I'm here specially to turn you into an instant Web me-2.0 coder, with this condensed, self-paced course. Set your Javascript to on, let your plugins float freely in the TCP/IP stream, and away we go.

Know your version number

The first, most basic, skill: be able to distinguish the different versions of the web.

Web versions, 1.0 to 2.0
Version Characteristics
Web 1.0 Programming model equivalent to that of a slightly up-market 3270 terminal. Forms are filled in with the sequence: tab tab tab tab tab tab bonk.
Web 1.00001 The beginning of the rich web experience: the first ever, primitive Javascript code fragment is written. It generates an unwanted popup, and snaffles your credit card details.
Web 1.1 No visible difference from Web 1.0, apart from IE showing the text 'Javascript error' in its status bar.
Web 1.2 Standard buttons are upgraded with smart 3D-looking GIFs. These react to mouseover events by bobbing up and down politely over their drop shadows. Remember when we were excited by this sort of scriptery? (None of your CSS cleverness then.) It seems so quaint now. It makes me want to cry, thinking about the good old days of ugly web pages loading slowly.
Web 1.3 When you get to the home page of a V1.2 site with FireFox, it displays badly. When you go to a V1.3 website such as www.fdms.com with FireFox, it tells you to eff off and get IE. (These traditionalists in fact would seem to prefer it if you used IE4.) The age of 'you aren't good enough for our website' has begun, reaching full fruition at Web 1.5, see below.
Web 1.4 Basic client-side validation added. Forms are filled in with the sequence: tab tab tab tab tab What do you mean 'invalid post code' you bloody thing? The dread phrase 'next generation of 3d smileys' is encountered for the very first time.
Web 1.5 Home page preceded by Flash animation designed by the man who thought (wrongly) he should have been asked to do the title sequence for the next Bond movie. In practice, this means the user stares at an animated 'Please wait' sign for half a minute, then goes somewhere else.
Web 1.6 Date fields come with a little popup calendar to help you enter a valid date. Because of the differences in the box model as implemented by IE4, the Ok button is position beyond the edge of calendar's window, and it is impossible to use it to enter a date.
Web 1.7 The presence of extra code interferes with the standard function of browser controls. Clicking the back button, instead of taking you back to the previous phase on the corporate workflow site so that you could point out the bug to your team leader, abruptly dumps you on the money-shot page of the gentleman's entertainment website that Porno Pete from accounts was showing you earlier on. You say.
Web 1.8 Web pages at this level cannot be made to run on Windows Server 2003, no matter how many 'trusted zones' you add them to, nor how much you attempt to override Internet Explorer's Enhanced Security Configuration.
Web 1.9 You stumble upon Desktop Tower Defense one lunchtime, and are surprised when you look up from the screen with tired, gummy eyes to notice that it has suddenly become tomorrow. But at least you have got your world ranking up to 912,417.
Web 2.0 At last! You can get a fully fledged mail client in your browser. Now, wherever you are in the world, whatever time of day, without the need for your own PC, you are no more than a few minutes away from a screen that reads "Oops, something has gone wrong; we're sorry, try again in a few minutes".


Evolution of the programming model

The programming model, especially the handling of the user interface, has come a long way since the outbreak of the web. Although it goes against going against my established practice, let me draw you some pictures.

First, let's consider how things were before we had compulsory web applications, when I was free to bang out little applications in my environment of choice: Delphi/Win32. The programming model looked something like this:

Diagram describing delightful simplicity of Delphi Win32 program

Diagram describing delightful simplicity of Delphi Win32 program

As you can see, things are fairly straightforward. The UI construction is confined in one place; everything can be done - editing, compiling, debugging and testing - using a single tool. The user gets a responsive and sophisticated interface to his new application. Verily this is Rapid Application Development as it should be.

Now let's see what happens when we upgrade this to a Web 1.0 experience.

Block diagram showing Web 1.0 program architecture

Block diagram showing Web 1.0 program architecture

The programming side of things remains more or less under control, although the tools available to do it are less satisfactory. However, at least the interface generation is straightforward. The user experience has become rubbish, however.

Finally, the Web 2.0 situation:

Architecture diagram illustrating the confusion inherent in Web 2.0 applications

Architecture diagram illustrating the confusion inherent in Web 2.0 applications

In Web 2.0, we are able to create a Rich Internet Application, and give the user the experience he deserves. Careful observers may notice, however, that the programming model has lost some of its former coherence.

If you understood the point that I have made, and the implications it has for coding up apps with client-side bells coordinated with server-side whistles, please could you come round and explain it to my boss R? He thinks I am making a fuss about nothing.

What does the P in LAMP stand for?

The best way to go about any small-to-medium scale web 2.0 development is to use LAMP. Others may advocate Microsoft's tools and platforms if they wish, but I have been terminally put off by the remarks of one insider.

This leads on to the question: what does the 'P' stand for? For me, it must always mean PHP. Perl is just too bizarre-looking, and carries more than a whiff of 1996. I was put off Python by an early Bayesian spam filter that ran dog slow and had the habit of irreparably corrupting its database every few weeks. PHP is easy, sensible and quick.

By the way, while we are here, I am baffled by Coding Horror's suggestion that PHP sucks because it has a lot of standard library functions beginning with 'A'.

Huh? 'Lots of functions' is surely good. It means we can call them, instead recoding them again already. That's how it is with the library thing. Would he really think it better if it only had three functions - say add() for addition, arcsin() for a bit of token trig, and aaaaargh() for throwing an error? I'd genuinely like to know.

Despite Mr Atwood, the PHP library continues to grow apace, and think it is a good thing. I believe the pester_victim_with_stupid_emails() function was added only last month, to help out everybody writing Facebook applications.

We should pause to consider Ruby on Rails




Ok, done that.

AJAX for a cleaner kitchen

Finally, having established that PHP is what you need on the server, you may be wondering what tools I recommend for client side use. That is, after all, why we are here. The following table should make my position clear.

Tools for Web 2.0 coding
Tool What is it? Pros Cons Verdict
Delphi for PHP 2.0 A PHP-generating IDE that lets you drop Javascript widgets on a form. It's better than Delphi for PHP 1.0. It's mad. It mixes PHP and Javascript event handlers in the same source code file. Something else for Embarcadero to look into.
Dojo A framework library of AJAX Javascript classes, including widgets. It has various competitors, but is a reasonable candidate for the best of the bunch. Open source, surprisingly good docs. Widgets are uniformly designed and reasonably handsome.  Hard to use. You have to build up your screen layouts by hand, one dreary <div> at a time. Get a tag or attribute wrong, and the whole thing goes spectacularly yet nearly untraceably pear-shaped. Perhaps come back in a year, if they make a design environment to go with.
GWT ie Google Web Kit AJAX and Java libraries plus a Javascript-to-Java translating tool. It's from Google. They practically invented Web 2.0. A Java-to-Javascript translator? Icky! Icky! Icky! Euuggh! What were they thinking?
Flash and Flex Adobe's ubiquitous web enricher, based on a superior flavour of Javascript. Flex is the cheaper, techie-oriented IDE. Flash programmers are often from a designer background, are easily impressed by code expertise such as knowing how to write a sort. Or indeed a loop. It's Flash. The application arrives as a big ugly lump of proprietary gunk. And have you seen how much wonga they want for the Flash development environment? No way. If I use this, the Open Source Erics will lynch me.
Java applets You remember. The status bar. 'Applet loading…' Supported by Netscape 2. If I write the word 'crapplet', does that make this article NSFW? I bet Sun hopes that everybody had forgotten.
OpenLaszlo Open source alternative to Flash that practically nobody has heard of. Sounds like a good idea. Can either use the Flash runtime, or DHTML. When I looked at the OpenLaszlo site with Firefox, the basic layout came out all wrong - a major turn off in the circs. It's one thing to go out on a limb, but this feels like going out on a twig.
Silverlight Microsoft's 'Flash killer', about to go into a new version. Version 1.0 was reputedly a weedy effort; it is said that the inclusion of .NET languages will improve version 2.0 It's Microsoft, for heaven's sake. They of the terrible websites. Apart from everything else, at time of writing it's a beta.

There, I trust that has sorted out your Web 2.0 toolchain for you. If you want more information, I found a useful-if-naturally-biased comparison on the Dojo site, and several good Wikipedia pages. But I am getting dangerously close to supplying useful information, so I had better stop. Best of British. ®