Jan 24, 2007

AJAX, javascript libraries and ideas

Last months I use JavaScript very intensively and found a very convenient and efficient approache that I did not read about.

You can see many Javascript libraries around, at least 3 of them are well-established and popular:
Prototype (with script.aculo.us), Yahoo! User Interface Library and a Google Web Toolkit.

I personally don't like to watch a progress bar while those bells&whistles of a web 2.0 site are loading. The only way to save visitors of your site from a tedious waiting is to count the size of your web applications and place efforts to minimize it.

Here are my ideas on how to achieve great effects on the site, save bandwidth and development time.

* One idea I found to be very efficient is that one library is not enough.
Good results can be achieved when using Prototype as a base helper library and the DOM Tooltip to draw menus.

Developer can combine best parts of different libraries to achieve better resulsts.
For example, I like YahooUI for it's great ready-made animation effects.
But for AJAX, DOM, Events and general DHTML development I prefer Prototype 1.4
Yes, Yahoo library has means to process AJAX and events, and script.aculo.us has many great features, but I like them less them.

* Second idea - JavaScript can be optimized before publishing.
Consider processing your .js files with a tool like JSMIN before uploading to the production server.

The first advantage - file size is reduced by 15-30%, and prototype 1.4 becomes 35 Kb instead of initial 47 Kb.
Second advantage - you can format your code, write full detailed comments, and not suffer from filesize penalty.

Unfortunately, not all javascript code keeps working after being optimized by JSMIN, so check first.

* Third idea is to take HTTP into account.
Developer can foresee and utilize caching abilities of the browsers.
One can also try to foresee the utilization of the keep-alive connections.

If you place a relative URL to the library - there is a chance it will be loaded in the same keep-alive connection with another HTTP request.
If you have subdomnains, you can use an absolute URL and the cached pre-loaded library will be immediately available on the pages of the subdomains.

To be continued! There is so much to write about AJAX :)

No comments: