Demos and slides

You’ll walk away with

• Enought code to be dangerous

Damn. I thought I was already dangerous. Crap.

Demo Life in a text area
Interesting – autosave in a textarea – much like autosave in a text editor or something like MS Word.

What is ajax

• still being defined – good portion still up to you
• No page refreshes – Don’t make me blink
• don’t make users and developers learn new idioms.
• Technology should not slow you down – ajax does not fundamentally change what you have been doing.
• Better interfaces without redesigning from ground up.

Should turn browser into a client for your protocol/api

Good, Bad, Ugly

• Good – more responsive, more intuitive interfaces
• Bad – Inaccessible by default (google web accellerator)
• ugly – debugging takes a village

When is ajax the answer

• give advantages of desktop apps in a web browser.
• when you need to do things that traditional request/refresh can not accomplish
• when the competition does it (you gotta do it too)
• when it makes the users experience better, not worse

Ajax basically manipulates the DOM. Everything is a node.

It’s moving a little slow at the moment. Talking about the javascript api for manipulating the dom and about how not everything is a node (text for example)

Easiest thing to make code portable is use getDocumentById() call

The speaker is sick! a big chunk of custom javascript for moving around paragraphs on a page. Glad there are toolkits for this. It would sound like a turrets party if I had to do it.

Did not know this – can set style propery of any node and can access css styles using CamelCase names.

Mozilla and MSDN have good dhtml references and speaker thinks MSDN has the best.

Limitations can’t request resources which are not on the same domain (XMLHttpRequests). you could proxy if needed

~4k is the usual typical upper and lower limit of what you can store in client cache (cookies) on a per domain level

Browser incompatibilities – write to the spec and use http://quirksmode.org as a reference for cross platform incompatibilities.

IE has conditional comments – block of code is commented out, but runs in appropriate browser. For example would only run in IE5 or IE5.5, or IE6, etc. Conditional Comments are not used very often, but very useful for determining which one of the many xmlhttprequest objects to load.

.innerHtml is a read/write attribute which modifies the dom. Should uses sparingly but is very useful.

.innerHTML example
precode
var fooNode = document.getElementById(“foo”);
var parentContents = node.innerHTML; // where innerHTML = ‘div id=’foo’/’
node.innerHTML = parentContents;
// fooNode is no longer a valid reference here
/code/pre
Point is if your program depends on a node being there, like an onclick handler, it may be going if you do not use innerHTML judiciously.

What to return

• html
  • easy to insert into document (fast)
  • can return a string – easy to debug
  • difficult to make portable
  • implies replacement, not updates

• xml
  • usually supported, MUST use “text/xml” document type
  • doesn’t tie your server to your rendering
  • you’ll need to buildUI on the client
  • xml is typically not fast b/c you have to traverse the document (usually w dom)
• Plain text
• javascript
  • fastest for large data sets
    • eval() is the fastest parser available
  • native language of you scripting environment
  • skips the xml-to-data structure step
  • app more likely to speak xml or html
  • JSON helps (standard proposed by ?? – a lightweight subset of what can be descript in javascript literal)

You could send back javascript for large data sets where the javascript you send back would have something like a large dataset in an array. Smaller in size and faster to render than xml/html.

Engineering for ajax

• Server-side design principals
  • ajax-style UIs should call the REST APIs you apps already expose – example Flickr
  • multiple points of entry
  • Single request, single action
  • more requests, smaller requests
• When retro-fitting existing apps, wrap at the module level, don’t write new code

Back from break – talking about autosaving

• xmlhttp for moving data back and forth. Use HTTP POST verb, idempotence matters.
• serInterval() for occasional execution
• event handlers wired to Nodes, IDs
• brittle – hard to maintain or reuse

XMLHTTP Basics

• synchronous or async communications (most calls will be asynchronous)
• simple callback scheme for status
• some verbs problematic (Safari KHTML)
  • HEAD
  • PUT
• File upload not available cross-browser
  • can be handled with iframes and form hacks

Now covering different ajax toolkits

Prototype by Sams Stevenson Ajax framework baked into Rails http://prototype.conio.net/

Dojo Ajax framework written by speaker, Alex Russell http://dojoframework.org

The toolkits (showing Dojo) have built-in graphics for UI display, example a progress indicator or spinner.

Whoa…. Dojo is pretty impressive. As I understand it, it’s sorta like tapestry but for ajax. you create widgets for say an autosaving text area. You can drop a widget on any part of your app and override default values by providing a dojo widget html fragment (div with some specific elements). Not tied to dom id, node, etc.

Debugging Tools

• Mozilla JS console
• Safari JS console
• Opera JS console
• IE Script Debugger
• Rhino or WSH – command line JS

Rhino command line example
java -jar js.jar

brings you into a javascript shell (like irb or python shell) poor interactive command line

example.js
precode
function foo() { print(“BAR”) };
/code/pre

java -jar js.jar example.js
precode
js foo()
BAR
js
/code/pre

Advanced Tools

• LiveHTTPHeaders – Mozilla/FF – Mozilla extension
• Venkman – Mozilla/FF JS debugger
• Squarefree JS Console bookmarklet
• MSE JS debugger for IE
• Konqueror
• VirtualPC/VMWare (for testing different browsers)
• Ethereal (w00t!)
• your tenaciousness

The talk was pretty good. Did not find myself getting bored through alot of it. I’m just glad someone else develops the JS libraries so I don’t have to.

Update Did not get to finish blogging while in the class b/c the server where I host netinlet.com went down (pretty much until the end of the conference that day). Was able to save all the content offline though and updated that. This is the repost of original + additional content.