timandkathy.co.uk

Stuart Langridge: DOM Scripting & Ajax

  • Ajax makes for better, more usable, more interactive UIs
  • Interaction can be designed
  • JavaScript is a bit of a dirty word for many people, because of the useless fluff (and required code forking) of old-school JS
  • However - CSS & valid HTML are a whole new world
  • JS is a tool - not for evil. It’s not DHTML, with all the browser-specificity that implies.
  • Make the web work better
  • CSS - separation of structure & presentation. Not until the CSS Zen Garden was the concept properly articulated
  • Different design - unchanging base. This is incredibly powerful. Sites (should) still work without CSS - and this concept is mostly taken for granted now (or is it? there are loads of rubbish presentationally-marked-up sites out there still). Is the message getting through.
  • E.g. S5 - just plain HTML, plus a layer of CSS (presentation), plus DOM Scripting (behaviour/interactivity). The result: PowerPoint (!).
  • The behaviour layer: control users' interactions. No longer limited by the way browser makers have made browsers work.
  • No page refreshes - no more long waits for servers to return the same page with a bit of an update
  • Fade in/out notes to alert users of changes (Yellow Fade Technique)
  • Buy a book! Jeremy Keith’s or Stuart’s (got this one already).

Scripting: should be unobtrusive.

  • Layer the interactivity over a solid base. If the base is solid and well-structured, then the data can be used in ways other than the site’s own UI.
  • Gmail is a good example of what not to do: the Ajax and plain HTML versions are separate, rather than one being an enhancement of the other. It does have an open API though.
  • Amazon recommendations page is better: it works without scripting, but you get extra whizzy stuff (rating of products) if you have scripting turned on. This is a feature that wouldn’t be practical or usable without Ajax.
  • The little touches turn the good into the great: this is as true of interaction design as of visual design.
  • Design how you want the web to work
  • The universality of the web got the web off the ground in 95 onwards. Jakob alert you can do things that are outside what’s “normal”…
  • Build your scripts unobstrusively. Don’t mix script and HTML. No inline event handlers etc etc, certainly no href=“javascript:” !!
  • CSS is easier - the browser hooks the style to the page for you
  • Scripting is harder - you have to do the hooking yourself.
  • JS is event-driven
  • Need to register your actions with an event
  • Good scripting is unobtrusive
  • What can we do? Anything you can inagine in HTML!
  • Rewrite the HTML as you see fit.
  • DOM+Ajax - no more waiting!
  • In a survey, people thought that the web=“click a button, wait 10 seconds”
  • It doesn’t have to be this way

Use other people’s code

  • E.g. sortable table column headers - this is something the client can do, and should do. You already have the data, you’re only changing its presentation.
  • E.g. Real-time comment previews on blogs. (commenting on articles!). Saves the submit/wait.
  • Disable submit buttons on click - saves double submissions.
  • These are good, useful enhancements, not fluff! The small things that turn the good into the great…
  • “You don’t have to write GMail” :)

Evolution, not Revolution

  • Make the existing web better
  • Don’t rewrite everything from scratch
  • The web’s best days are ahead, not behind
  • Go and make a difference - we’re at the forefront
  • “Change the web, change the world”.

Audience question

  • Inline scripting still necessary on image-heavy pages if you want to do stuff before all the images have loaded. DOMContentLoaded event is in Gecko, not in IE, but Dean Edward’s IE7 code may implement this.