Monday, December 18, 2006

"Ajax: Flash Killer?" - Jeremy Keith

Jeremy Keith preparing for Ajax: Flash Killer?

Over to the Pavilion for Jeremy Keiths Ajax session...


  • Short version - Is Ajax a Flash Killer - NO!

  • Long version...

  • Ajax was coined by Jesse James Garret to describe existing technologies

  • Buzzword

    • Sounds cool

    • Myth based

    • Has the letter x in it

    • Gets associated with web 2.0 along with rss etc (Note: he refused to say "web 2.0" - only inferred it)

  • What is it?

    • XML is not necessarily intrinsic to it

    • Javascript is integral

    • Asynchronous is the key

      • Server sends bits to you as you're interacting with the page on browser

      • Result is an apparent increase in speed

    • If traditional web was letter writing, Ajax is instance messaging - Didn't catch who he was quoting here.

    • His def: Ajax is a way of communicating with the server without refreshing the page

  • XMLHttpRequest - not snappy enough for buzzword

    • Been around since IE5

    • Invented by Microsoft

    • Mozilla, Opera and Safari eventually took it on

    • W3C is turning it into a standard

    • Samples

  • Diagram of a line. The far left end of the line represents basic, HTML documents. The far right of the line represents full-blown web applications

    • Ajax is useful at the left of the slider, less useful at the right

    • Flash is opposite

  • Principle of Progressive enhancements

    • Positive spin on degrading gracefully

  • Workflow

    • 1. Start with content which is semantically structured (HTML)

    • 2. Add presentation layer (CSS)

    • 3. Add behaviour (AJAX)

    • Take away any layer and it still degrades down to the last layer and works/content is viewable

  • New term - Hijax

    • Termed by Jeremy Keith

    • Workflow

      • Build your application old-fashioned way

      • Get completely working with conventional calls

      • Then use JavaScript to hijack calls and replace with XMLHttpRequest

    • So when something goes wrong - app still works

    • Not many people doing it this way

    • If you can't apply progressive enhancement then you've crossed the line - Ajax is no good - use Flash

  • Pattern recognition

    • Do small stuff with Ajax

      • Logon feedback

      • Add to cart

      • Rate this

      • Add a comment

  • The alternative to progressive enhancement is the Plugin

    • If you're going to cross a technological boundary (i.e. user must have JavaScript) then go for a boundary which is a rich experience (Flash)

    • When?

      • Widgets (i.e. sliders)

      • Audio/video

      • Image manipulation

    • Choose best tool for the job - ask: "Why am I doing this?"

  • Design challenges

    • Not letting technology get out of control

    • Keeping the user at the core

    • This is something Flash devs have been doing for years

  • Beyond the Browser

    • Ajax screws back button and bookmark

    • Something that Flash has had to deal with for years

    • If bookmark of back button doesn't work and needs to, then you're changing too much of the page!!!

    • User feedback for clicks - need to tell user what is happening (i.e. load bar)

    • What happened feedback for user

      • Let people know what changed

      • Conventions

        • Yellow fade (37Signal.com)

        • Visual effects

  • What is good design?

    • "Being able to justify every pixel" lookup author

    • Why does it do that?

    • User testing!!

  • Accessibility - Ajax has really bad accessibility

    • Ajax can't pick up if a screenreader (SR) is present

    • Myth that SRs don't do JavaScript

    • They do part of JavaScript

    • So instead of locking out all JavaScript func and dropping down to presentation layer - it tries to do it and screws up

  • Answer? Flash + Ajax

    • Use a Flash movie (1px) to detect if a screenreader is present and then tell the Ajax via a JavaScript method

    • Analogy was Flash Gordon movie: together Flash and Ajax (Gordon's spaceship) combined to kill Ming the Merciless ;)Ming the Merciless impaled on the spike of Flash Gordon's spaceship

  • His DOM Scripting book looks really good

  • Numbers for Ajax enabled browsers is hard as different factors

    • JavaScript enabled

    • XMLHttpRequest in IE5/6 is activeX control so activeX needs to be enabled

No comments: