rapid dom/ajax development

It took me a while to decide which panel to go to — I was very tempted by the social sharing session — but I decided I needed something really nerdy to kick it off.

I was going to try to do some work on a couple of side projects this afternoon, but I’m not working in my familiar computing environment, so I don’t think it’ll happen. 🙁 I suppose that’s more polite to the speakers, tho. 😉

Whoa, it’s crowded! As in, asking people to make room. I hope that bodes well.

Too much noise out in the hall…Nick Finck is doing a kinda dull intro.

Kewl, now the mic is on. I can hear him. Going to cover: his experience. Slides to be available afterwards.

What is DOM Scripting/AJAX? Quick definitions. I like that he uses Jeremy Keith’s term. they’re both just javascript. shouldn’t it be rapid javascript? has to keep up buzzword quotient.

people underestimate what’s possible. functional programming language: can pass functions to functions, and get functions as result of function. [okay, why?]

anonymous functions. function() { } vs function loadImages() { } — I missed why they’re good.

useful for callbacks, etc.

closures. means that we have access to internal scope variables. (I thought that was a bad thing?) example.

keys to rapid development: maintainability. finding bugs, managing the work of others. extensibility. flexibility. tieing to specific JS libraries, page class names.

using a coding style. no such thing as a real constant in JS, but by using syntax, tell self or others in the future that it shouldn’t be changed.

namespace. a variable that contains all of your particular scripts. weird.

underscores for internal methods. which methods to use or not.

he talks too fast…or maybe just fast AND vague.

singleton, design pattern which means there is only one of that item. use either object notation or the New keyword. can no longer create more versions of that object. event management is a good use of singletons. I feel like I’m missing something. also good for animations, use of timing. (C found a singleton beetle during an insect survey at Evergreen, years ago!)

object notation syntax. (what all this means, in short, is that between JS & PHP, I finally need to learn OOP)

use debug tools. excellent tool is firebug for firefox.

trace http calls — live http headers firefox extension — for AJAX more particularly. to see what’s happening.

on extensibility….

callback: Call this function when I’ve done something.

override. uses s5 as an example; this is the first thing that I can start to see concretely. the problem I have is that I think concretely, in examples, and these examples, for the most part, are very symbolic.

on flexibility….

don’t use predefined class names or element names. okay, here’s another good example, not tying to a library.

separation of behavior from presentation from content. don’t change styles directly, change the class name instead. element.className = ‘error’ vs. element.style.color = ‘red’

attach to elements. scope issue. I sorta get that.

libraries to avoid reinventing the wheel. (have we actually invented the wheel yet?)

reduce the mundane (document.getElementById() vs. $()) and/or create effects (primarily to reduce the gruntwork of cross-browserness)

more examples, mostly from Prototype. add/remove class names, particularly in situations where an element may already have a class. (I remember that example from the DOM Scripting book.) also example from JQuery. (have I seen jquery?)

click-to-expand FAQ. hey, neato!

chainable methods — receive object, perform action and so on, all in one line.

“sizzle” — fading sliding etc etc.

good libraries help, and fulfill his 3 requirements for good rapid development. “play well with others”

“which library should I use?” default answer: it depends; what are you trying to accomplish? avoid overkill. ooooh, comparison chart! name, size & compressed vs. uncompressed. Yahoo library is ginormous, but alacart: only pull in what you need. Dojo is similar.

and then there’s AJAX. nowadays anything with JS seems to get called AJAX. ways to improve connections to server. JSON. parsers exist for many serverside langs, incl. PHP. JSON Transformations? XSLT syntax. (yipes! run for the hills!)

two ways to call a json value — dot syntax vs. square bracket. (so, for java people vs. php people?) a way to do dynamic select lists.

use innerHTML. (isn’t this one of those religious debates.)

premade html shells — populate with data as ready, faster than innerHTML.

again: use a library.

where to from here: usability (dexterity example re: drag-drop shopping cart), accessibility. test, test, test!

what kind of compression? removed carriage returns, comments. could make smaller using gzip on server.

common pitfall for new developers: not testing enough. assuming that stuff will just work.