I picked up a couple of books from Barnes & Noble last week:
- jQuery Cookbook – This is a solutions-oriented book, as most cookbooks are, with very specific examples on how to accomplish common programming tasks. It’s precisely what I need.
What Should Happen
To keep things simple, I’ll define the task as follows:
- Request the list of current objects from the server
- Draw the objects into the browser
- Handle events as they come through for the UI
- Write changes back to the server
This is pretty standard MVC-style organization. The next step is to start writing the skeleton of this code. I like to use placeholder functions that print out what they are supposed to be doing, then going back and filling them in with working code. It helps reinforce my understanding of the code and the flow of interactive program execution, like a “living outline” of the program.
Where do functions live?
So…where does it make sense to handle step 1? Probably on jQuery.ready(), which fires before the web page has been rendered but after the DOM is completely read.
On the server side, I have a skeleton application class called
Where is the execution loop?
I create an object that holds a list of scripts (line 12). When the page’s DOM has been loaded but not-yet rendered, the list of scripts is asynchronously loaded via jquery.getScript(). Every time a script is loaded and parsed, the ScriptLoadSuccess() callback is triggered, which compares the number of calls to the number of scripts in line 12. When the number of success callbacks matches the number of scripts,
So this gives me some flexibility in defining an arbitrary number of scripts to load and execute. This will allow me to put each main object (e.g. models, controller, database connector) in its own file, which will help me keep development cleaner. If I need to speed things up, I can combine it all into a single script later.
The next steps are about writing code to:
- load object list from the server into an internal data structure
- create browser objects from the data structure
- hook event handlers into the objects
- render the data to the browser
Finally, we are into the meat of application development!