[[innerindex]]

Despite the fact that AJAX is making significant inroads within the Web 2.0 community, many enterprise applications still remain either traditional web or desktop applications. However, by effectively using AJAX, enterprises can develop compelling, innovative, and useful web based applications that increase employee productivity while retaining the manageability enjoyed by traditional web applications. This session will focus on the challenges of developing enterprise AJAX applications with an emphasis on overcoming the common hurdles and problems encountered along the way.

Presenter: Conrad Damon – Zimbra

Conrad’s discussion began with an re-iteration of what Web 2.0 is and how things have changed since Web 1.0. Old news, but the re-iteration was brief.

Choosing an RIA solution

Next Conrad explained his team’s decision process on choosing Ajax as the solution for creating their Rich Internet Application, Zimbra.

Flash?
The Zimbra team turned this down early on as they didn’t want to be tied to a proprietary solution… A decision I can respect :) I’m not too keen on the use of Flash as a front end for full-blown RIAs in most cases.

Ajax Worries
There were some hesitations regarding the use of Ajax as a solution:

• Complexity – Lets face it, adding Ajax into the mix causes the applications complexity to increase.
• Performance – there’s a lot going on with an Ajax app client-side that can cause client performance to degrade. (mixed with the chattiness server-side)
• Some cross-browser issues.

Ajax: The Chosen One
Overall, Zimbra’s team decided on Ajax as the pros outweighed the cons:

• Enhanced User Experience
• Desktop application-like feel.
• Deployment is trivial. – No installation…the application is accessible via the web.
• The power of mashups is where its at. Its all about SOA (Service Oriented Architecture).

Ajax Points

Conrad noted a few key points regarding Ajax, however:

• Ajax is cheaper on the server/network
• Ajax applications are more memory expensive client-side
• Ajax applications are not a business model
• Ajax applications are the means not an end

Ajax Tips

Based on the Zimbra team’s experience, Conrad gave some tips:

• Use an Ajax Toolkit – They simplify things. What you choose is up to you, but the time saved by toolkit use is well worth it.
• CSS is your friend – bend it to your will
• Use JSON, not XML – Zimbra has almost fully converted all passing of XML to JSON
  • JSON is easy
  • JSON is fast. Eval’ing JSON is faster than parsing XML by a magnitude of 10!
• Use Asynchronous XHR (XMLHttpRequest) calls
• Combine, Compress, and Cache
• Automate Testing – Zimbra uses QuickTest Pro from mercury to test the Zimbra client.
• OO, MVC
• TLS (Transport Layer Security…SSL) – Make sure you use it!
• KISS (Keep it simple, stupid) – this applies to both code and the UI!
• No browser lock-in – don’t program for a specific browser…keep it open to at least the A-Grade browsers
• Test, test, test

Browser Gotchas & Tips

Next came some helpful browser-specific tips and gotchas:

• Firefox
  • Missing Cursor – workarounds exist (surrounding the input with a div…yadda yadda)
  • Event capture – effects DnD effects
  • design mode – lets you turn the Browser into an editor…buggy
  • xmlHttpRequest – bug that pained the CPU when making synchronous calls
  • opacity (linux) – hangs browser (relationship between X11 and opacity)!!!!!!!!!!!!!!
  • scrollbar bleed (mac) – scrollbar does not respect z-index
• IE 6
  • string concat with +… – SLOW, use Array joins instead
  • image caching is poor – hard to convince to cache image in browser…workaround: have a hidden div and load the images there first
  • JS engine can be slow
  • Memory leaks – circular reference issue. workaround: give things numeric ids and a lookup table
  • XHR ActiveX object – some memory leaking issues
  • DOM attribute access is slow
• IE 7
  • ActiveX opt-in
  • CSS fixes
  • Native XHR
  • memory leaks appear to be fixed
• Safari
  • No design mode
  • DOM API not fully implemented
  • Debugging difficult (not entirely true)

The 3 C’s

By far the most useful section of Conrad’s presentation was on Zimbra’s 3 C’s; Combine, Compress, and Cache.

Combine
Zimbra uses this technique to minimize the sheer amount of files downloaded by the client which speeds up load time! Conrad suggests:

• Concatenate your JS files and CSS files – Order matters (remember)! Zimbra uses the “Jammer” ANT task to do this dirty work.
• Merge Images – Images are expensive! If your application uses a large number of icons, try merging them into a single image and use background-positioning on elements for the display of icons. For disabled icons, use opacity at 20-50% rather than creating a whole new icon.

Compress
Compression makes things smaller in size…smaller “things” are quicker to download!

• Strip comments and whitespace – use JSMin or ShrinkSafe
• GZIP your Javascript! – All of the A-Grade browsers support gzipping which reduces file size!

Caching
Set proper headers for appropriate browser caching. Avoid redundant downloads. Period.

Conclusion

I respect the Zimbra team and their decisions; their application is solid, functional, and quite sexy. All in all, this was a pretty solid presentation with a nice amount of data. As I mentioned earlier, the 3C’s were the most valuable tid-bits of information for me…although there were a few browser gotchas that I wasn’t aware of.