On Apr 1, 1:39 pm, JMan <jbeck...@gmail.com> wrote:
> One thing I have been struggling with is AJAX applications is managing
> the js code that powers them.
>
> For example if you have a page that loads content from an AJAX call to
> the server and that content also has js code associated with it in
> order to function how do I manage that code? If I have 20 pages that
> get loaded from the server via AJAX at one point or another I do not
> want to have one huge js file with a bunch of code for each page in
> it.
JMan,
Consider letting your server side framework manage your scripts for
you. Instead of using $.getScript to include required scripts on the
fly on the client side, I push them into a list as needed on the
server side, and then a process combines all of the individual scripts
into one large one, runs it through YUI Compressor, writes it to disk,
and inserts a link to it in the final assembled HTML. Everything gets
cached, too, so that process is only repeated when a script is added,
modified, or removed in the mix for a particular request.
This lets me manage all of my scripts which are specific to single
screens/pages in their own organized, easy to find, external
little .js files, but still take advantage of the performance gains
provided from externalizing the scripts, reducing the total number of
HTTP requests, and using compression and minification. It works for
CSS files, too!
I've been using some variation of this system for a couple of years
now on various sites, and have been very pleased with the performance
and productivity gains. It's written in Lasso, but the concepts are
straightforward enough that it should be easy to implement in other
languages.
The gist of it is this: There's an "asset_manager" class that you
initialize up front. It grabs whatever items you deem "global" (i.e.,
the base jQuery library, a CSS reset, etc.) automatically. Then, as
the rest of the request is processed, you can add additional scripts
and styles either implicitly or explicitly. The implicit method
replaces a normal server side 'include' with one that checks for the
existence of matching .js and .css files, so instead of this:
include('/path/to/include.inc')
...I do this:
asset_manager->load('/path/to/include.inc')
...and if these files exist on disk:
/path/to/include.js
/path/to/include.css
...they are automatically included. If there are additional plugins,
etc. that I need to add for a particular include, I add them
explicitly within the include like so:
asset_manager->add('/path/to/plugins/jquery.plugin.js')
I presented the system as part of a talk on client-side optimization
last year at the Lasso Developer Conference in Chicago. It covers the
13 original rules from the Yahoo! Exceptional Performance Team that
became the basis of the tests used by the YSlow plugin for Firebug,
and then explains how this system automates adherence to many of those
rules. The paper, slides, and sample code that I presented are
available here:
http://devblog.jasonhuck.com/2008/09/23/an-asset-management-system-for-lasso-powered-sites/
- jason
