Kevin Henrikson

I’ve been playing with the Firebug 1.0 private beta for the last few days and it’s quite a tool. v0.4 the last release of Firebug had already combined the most popular features Venkman, Console2, and the DOM inspector. 1.0 adds a entire new set of features. JS profiling and Net request tracing similar to Tamper Data are IMHO the most powerful. Joe has been hard at work and been fising issues as quick as we find them. Firebug now has enough functionality that it could implement and examine all the tips included in my entire presentation at OSCON.

The new website Get Firebug gives you a glimpse of what is coming shortly:

• Inspect and edit HTML
• Tweak CSS to perfection
• Visualize CSS metrics
• Monitor network activity
• Debug and profile JavaScript
• Quickly find errors
• Explode the DOM
• Execute JavaScript on the fly
• Logging for JavaScript

I’ve written about Firefox Plugins before, but since then I’ve made a few more discoveries.

• Firebug (author) – Joe Hewitt author the great DOM inspector wrote what has become the #1 must have for any AJAX dev. Firebug combines the best of Console2, Venkman, and the DOM inspector into a single extension. The console also adds the ability to trace the request/response of each XHR request on the page. Set break points with a simple debugger; statement.
  

  FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, error console, command line, and a variety of fun inspectors.

• Tamper Data – Just like Firebug has replaced Venkman, Console2, and the DOM inspector; Tamper Data is the new LiveHTTPHeaders. It provides a similar ability as the Live HTTP Headers extension but adds a much better UI for viewing each browser request. It also adds the ability to graph over time the requests made be each page you inspect. Finally it adds the ability to *tamper* with the requests/responses that it inspects. This is handy when seeing how a new web service or server reacts went sent a slightly different request.
  

  Use tamperdata to view and modify HTTP/HTTPS headers and post parameters.

  Trace and time http response/requests.

  Security test web applications by modifying POST parameters.

Dean Edwards has posted a demo with a cross browser way of super quick DOM queries.

Limitations

* As described earlier, speed improvements only apply on page load for IE. Further DOM queries will use the original getElementsBySelector function
* the speed of CSS2 queries (attribute selectors) are not improved for IE5/6
* because of the nature of the CSS hack, you can only apply one behavior per element :-(

Conclusion

* DOM queries on Firefox seem pretty quick
* XPath is about 150% faster than DOM queries on a Mozilla platform
* XPath is about 1000% faster than DOM queries on an Opera platform
* the expression hack is about 200-400% faster on an IE platform
* Behaviour leaks like a sieve

JSONRequest has been proposed by Douglas Crockford as a new native method for web browsers to exchange data with servers. The biggest notable difference with XMLHttpRequest is that it doesn’t prevent requests to multiple domains. JSONRequest can make requests to any server, not just the origin server like the current XMLHttpRequest. Web applications today that need to make cross-domain requests must use a proxy or a dynamic script tag to make requests to non-origin domains.

JSONRequest also has provisions for long lasting server initiated, live push of data. Crockford calls this “Duplex”.

“JSONRequest is designed to support duplex connections. This permits applications in which the server can asynchronously initiate transmissions. This is done by using two simultaneous requests: one to send and the other to receive. By using the timeout parameter, a POST request can be left pending until the server determines that it has timely data to send.

Duplex connections can be used in real time notification applications such as process management and finance. It can also be used in collaborative applications such as instant messaging, instant email, chat, games, presentation, and shared applications. “

Alex Russell calls this same server-push technique Comet. I actually like Comet a bit more than Duplex. Duplex is a bit overloaded with a few other uses in tech. Like the half or full duplex with configuring network cards or terminal echo. Not as if I have a vote(just like AJAX sotra stuck), but let’s hope Comet wins.

Douglas Crockford knows a thing or two about compressing JavaScript. He wrote JSMin which IMHO is the simplest and fastest JavaScript minifer out there today. Coupled with his lint checker JSLint you’ve got two really good tools to write good solid code. I used JSMin to optimize digg.com’s homepage a few weeks back. As more and more AJAX apps start to take advantage of JavaScript the size and footprint grows dramatically. Even more so when folks import the various AJAX toolkits as a starting point. This means that tools like JSMin become a required part of the build/deploy process for those that are serious about optimizing end-user experience. There are other excellent minifer tools out there including Alex’s ShrinkSafe which is based on Rhino. ShrinkSafe takes an aggressive approach to not modifying the API’s as it uses a real JavaScript compiler/run-time to shrink the code. This is important when you don’t want your public API to change as is true for any JavaScript toolkit developer. Crockford makes the point that obfuscation is really just a small hurdle and any serious programmer, given time can extract the useful bits. This is especially true for JavaScript where no matter how much mangling of the code is done before it’s sent to the browser it’s still sent in plain text. So it’s trivial to attach a debugger like Venkman and walk through each line of code. Glad to see Douglas putting focus back on JavaScript as noted by his many recent updates to JSLint and now his first blog entry on the Y! UI blog. I’d also guess that Yahoo’s focus on JSON for their REST api’s is in part due to Doug joining them.

ref: Minification v Obfuscation » Yahoo! User Interface Blog