Bleeding edge Javascript techniques from the creators of jQuery, Prototype, Dojo and YUI (liveblogged from #sxsw)

Here are my quick notes from SXSW talk "More Secrets of Javascript LIbraries"

Bundling/dynamic loading (Nate Koechley, YUI)
Javascript files for modern websites really have gotten huge. So it makes a difference how you load them. Some cool tools mentioned:


Meta language libraries (Andrew Dupont, Prototype)

  • GWT turns Java into Javascript
  • Pyjamas turns Python in to Javascript
  • Cappuccino by 280 North turns Objective-J into Javascript
  • Google Caja turns Javascript into safer Javascript.

Google Caja sounds like a fascinating way to allow rich JS embeds on-page, perhaps solving the XSS dangers of embedding 3rd party JS. Definitely going to check that out later.

Dupont points to Resig's blog post about JavaScript Language Abstractions that a lot of these meta-language libs actually divorce you from being able to harness the full power of Javascript because you never actually learn how to write it.

"Thicker abstractions have more hassle, but offer greater rewards." --Andrew Dupont

At the end of the day, I think you use the tools that work best for you. I love what the guys are doing at 280 North, but a site like Posterous probably wouldn't use it because we're more of a native web experience. And in talking to them, they're not meant as a replacement for Prototype, etc. Cappuccino is really for extra-rich internet apps where you might use Flash/Air, instead of classic native websites. So different strokes for different folks!


Accessibility (Becky Gibson, IBM / Dojo)

ARIA = Accessible Rich Internet Applications. New standard for supporting screen readers, magnfiiers, etc. Lets us JS developers create tree controls, tabs, and rich JS functionality but still have it work great for those needing assistive tech.

Biggest issues with accessibilty and rich JS content:
  • Adding dynamic controls that you create to the tab order -- by default only links and form controls are added, so if you add onClick listeners to direct divs, etc -- screen readers often can't even see these things.
  • AJAX'ed content that gets inserted into the div sometimes doesn't get picked up because assistive technologies don't get notifications of page updates.

Pretty cool stuff coming -- hopefully browser support comes sooner rather than later, since that determines when we'll be viably able to use these new standards. Might have to switch to jQuery to take advantage of this on Posterous.


Performance and Testing (John Resig, jQuery)

Cool jQuery profiler plugin for Firefox tells you what's happening during load time.

"The very act of measuring it is causing the problems." --Resig. Timer resolution is only 15ms on Windows, for instance -- error rate 50 to 750% using your own JS timers.

Also cool: Firefox, Safari 4 and IE8 all have built-in JS profilers too.

Testing using FireUnit. You can actually add profiling data as part of tests, so if certain tasks take too slow in a given browser you can build that into your JS test suites. Cool.

John Resig is a badass. He just busted out Big-O notation on analyzing JS DOM manipulation.

The jQuery team runs 6 test suites in 11 different browsers (not even including multiple platforms) that must be run on every commit. But luckily they created TestSwarm so you can automate browser JS unit tests. Also awesome -- can script manual testing cross-browser too. Brand new project John Resig is working on now, but he says you can sign up on the site to hear about when it's up.