I know it, you’re an AJAX geek. Just like me. You think it’s the next Win32, or GTK, or .NET, .ABC, .DEF, or .whatever. There’s one problem, though: Web 2.0 sites are not just about AJAX. They are about JavaScript and client-side code, as much as they are about client-server interaction.
Look at Google Analytics. Their sexiness comes from their gorgeous client-side Flash, not because they get stuff asynchronously from the server. Look at Google Maps, the original Ajax app. You may say “#$ @%, what are you talking about: Google Maps are all about the async stuff!”. No, Google Maps are about drag-and-drop. If you needed to click the stupid “left arrow” button to get the map of what’s to the west, you wouldn’t care that only a part of the screen is being refreshed.
One of my friends frequently makes me repeat the following phrase: “Ajax is not a silver bullet”. He’s so damn right.
What is the silver bullet? Beautiful user models. Intuitive interactions. Visual effects on-par with rich client applications (fade in/out, cinematic expand/collapse, sexy highlight, animated movements). And if you want to get those in your Web 2.0 app, you need to do some major JavaScript work.
Yes, there are platforms out there that will help. I won’t talk about those here. Instead, I’ll focus on two categories of tools that I found to be really helpful in my JavaScript development efforts lately; these two aren’t talked about much, to my sadness.
JavaScript Validation
JavaScript is a beautiful language, too bad it’s abused too often. An inexperienced developer can write something (== vs ===, or “var vs no var”), not even know what the difference is, and have it work most of the time. And that’s the problem. JS is a language without a standard compiler, without type checking, without normal IDE’s. This means that JS developers have to be really careful; but humans make mistakes, and they need tools.
I found one great tool to do JS validation; I use it to do automatic code review of my JavaScript files before I check in. The tool is called JSLint; here’s the DOS batch file snippet I use:
echo Verifying Javascript files using JSLint:
FOR %%f IN (*.js) DO (
echo Processing %%f..
cscript //B //E:jscript ../tools/jslint.js < %%f
)
If something’s wrong with any of your js files, JSLint will complain, pointing out the exact line and type of issue, for example:
Lint at line 298 character 23: Use ‘!==’ to compare with ‘null’.
if(el.currentStyle != null)
JavaScript Compression
When you have lots of JavaScript (and man do I do), you need some way to compress it. The less bytes each client has to download, the snappier the load performance is; this also helps to scale your server to more users.
There are a few ways to compress your JS: the easiest one involves removing all comments and whitespaces (browsers don’t usually execute those :-)). More complex ones involve renaming variables and methods to shorter names: this helps if you’re like me, who loves using really descriptive variable names, even in JS. Others do obfuscation, which compresses the JS further, and prohibits humans from easily parsing your client-side code.
I’ve used several tools in the last few months: one is called JSMin; I believe it’s written by the same person who wrote JSLint. This tool does everything except obfuscation. I’ve had good experience with it, but have come to use a different tool as it turned out to be a tad more powerful: a tool called Packer from http://dean.edwards.name/packer/.
Here’s the way I use it:
1) I have many .js files, a few of which were written by third parties (those are in separate .js files to keep me sane). Before compression, I append all of these files together into a single temp.js file to achieve higher compression ratio.
2) Compress the temp.js file using Packer.
Here’s a snippet from my build script (DOS batch file):
echo Merging all javascript files into one…
SET MERGED_FILE_NAME=”compressed\core.js”
SET TEMP_FILE_NAME=”temp.txt”IF EXIST %TEMP_FILE_NAME% del %TEMP_FILE_NAME%
FOR %%f IN (*.js) DO (
echo. >> %TEMP_FILE_NAME%
type %%f >> %TEMP_FILE_NAME%
echo. >> %TEMP_FILE_NAME%
)echo Compressing Javascript files using Packer..
IF EXIST %MERGED_FILE_NAME% del %MERGED_FILE_NAME%CScript /nologo ..\devtools\packer\pack.wsf %TEMP_FILE_NAME% >> %MERGED_FILE_NAME%
del %TEMP_FILE_NAME%
Some stats for your mathematical pleasures: uncompressed JavaScript for the cocktail builder takes up 91.1KB. Compressed, it’s 33.2KB. I’m sure you can calculate the square root of the rate of change of flow of these kilobytes, if transmission is happening on the equator at the top of a 1500ft mountain.
Whatever. Enjoy your JavaScript 🙂
cb