The DOM and Javascript Toolkits
This is a presentation. If you'd like to view all the slides like a normal web page, you can.
The Document Object Model
- Represent XML Documents as Objects
- Set up as a tree of parents, children and attributes
- Allows you to change elements, attributes and style information in a document.
A Definition from the W3C
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web.
--
W3C DOM Homepage
It's a Standard!
- Previously maintained by the CSS WG, now turned over to the Web API WG.
- Been around forever.
Not Just Javascript
- Just because it's mostly used in browsers with javascript...
- There are DOM implementations for almost every programming language.
Common Usage
- It all starts with the
document.
- Here's how you'd get an element with the id "content":
var elm=document.getElementById("content");
Getting All The Lists
- Let's say you wanted to get all the "ul" elements in a document:
var lists=document.getElementsByTagName("ul");
Getting Inside an Element
- Once you have a list, let's say you want to see what its class is:
var cls=list.getAttribute("class");
Setting Attributes
- And if you want to change the class to something else...
list.setAttribute("class","closed");
Creating Elements
- Let's create a list item with some text in it:
var li=document.createElement("li");
li.appendChild(document.createTextNode("This is the text of the li"));
Appending Elements
- And then add it to our list:
list.appendChild(li)
That's the DOM
- Pretty straight-forward
- But there are problems!
Problem Number One: Performance
- Even modern browsers have performance issues with straight DOM scripting
- Implementations aren't quite right or compatible (IE, thank you very much)
- There are a lot of things that should be in the DOM that aren't.
Problem Number Two: Wordy
- If you do straight DOM scripting to create elements, you can end up with a lot of code to something that should be relatively simple
- Lots of code is hard to maintain
Solutions
- Javascript toolkits
- Finding a happy balance between using the DOM and "cheats" like innerHTML
Toolkits
- There are lots of them
- Most are open source
- Do everything from WebDAV support to effects to XPath, etc.
How to Evaluate Them
- What do you need it for?
- Is it well-maintained and have an active developer community?
- Is the license compatible with your needs?
- Is there decent documentation?
Our Problem Statement
- We had to build a very complex, very app-like product in not a lot of time.
- We didn't have time to build our own library.
- We needed help with everything: effects, DOM, AJAX, etc.
- We had a lot of developers and needed decent documentation.
Best Practices for Any Toolkit
- If you're going to use it, use it.
- If you adopt a large toolkit like Dojo, adopt the style
- Make sure you use it whereever possible. You'll write less code and if your product is complex, you'll make up the file size for using the toolkit in the first place.
- Really get to know it.
- Explore your options
- Licenses are a big deal
- Experiment with performance
- Contribute back!
Why We Chose Dojo
- It takes the best from other toolkits and folds them into Dojo (it already includes most of MochiKit)
- Best license
- Packaging system and easy to create custom builds
- Great support
- It does everything, but doesn't make you download all of it at once.
- Extensibility through packages and widgets
- IO package and DOM tools
Dojo Packages
- Allow you to download a "base" set of features, and add when you need to.
- For example, if you use the HTML and DOM packages everywhere, that's in your base build. If you need the FX package on one page, you include it just on that page, like this:
dojo.require("dojo.fx.*")
Package Benefits
- Can keep things fairly light to begin with, then add as you need to.
- Allow you to write your own packages and include them the same way.
The Awesome DOM
- Dojo provides a wicked package of tools for navigating the DOM and HTML documents
Events Are Awesome
- No more mangling your markup.
- Allows for good progressive enhancement practices.
- Easy to stack up events on single objects.
- "Topics" allow you to create your own event stacks.
Doin' It With Style (the Package)
Ground Effects
- Poorly documented, but lots of cool effects stuff.
- Drag and Drop
- Slide
- Fade
- Wipe
Widgets
- I haven't done much with them, but they are cool...
- Date pickers
- Rich text editors
- Tree viewer
- Color pickers
- More showing up all the time...
Dojo's Not Perfect
- Some issues with backwards compatibility between versions (to be expected)
- Some performance problems with 0.2.2 (should be fixed with 0.3.1)
- Documentation could be better
- Initial performance hit can be fairly large (getting better)
Things to Keep in Mind: Upgrading
- There was a big jump between 0.2.2 and 0.3.1. The jump between 0.3.1 and 0.4 will probably be as steep.
- Test very carefully, especially if you have a lot of external developers.
Things to Keep in Mind: Performance
- We found a lot of fun edge cases, mostly our fault though, not Dojo's.
- Be very careful about IE's "issues", especially memory leaks and creating too many XmlHttpRequest objects
- Use compression!
- Be careful of doing a lot of straight DOM scripting. It's slow, even in Firefox. Dojo leans towards performance over "correctness", which is the right approach.