Raible Designs

Lessons learned building a 130+KLOC JavaScript application by Scott Dietzen, CTO of Zimbra

Scott Dietzen is the former CTO of BEA. Apparently he was one of the original founders of WebLogic, before it was bought by BEA. Scott's hope tonight is to share his experiences from developing Zimbra. Why does Zimbra use JavaScript and Ajax?

• Richly interactive UI
• Rich client/server communications
• Zero-cost administration
• Web security
• Web look and feel (back button and bookmarks)
• Multi-browser "standard"

All of the above features where things the Zimbra team expected. They also got lucky in a number of areas.

• SAO/Mash-ups and Ajax authoring
• RIA winner? Big sites voting with their feet: Google, Microsoft, Yahoo, Amazon, etc.
• It really works

They started building Zimbra 2.5 years ago, long before Ajax was possible. Scott actually tried to talk his team out of using JavaScript when they first started architecting the application.

Zimbra's tools are good for Java programmers. If you're not familiar with OO concepts, it might be a bit difficult to understand. Now Scott is showing some demos, basically grids and trees - all built using the "Zimbra toolkit", whatever that is. Now he's moved on to demoing the Zimbra application itself. I used Zimbra as my primary e-mail client for a couple weeks and it's by far the best web application I've ever used. Not only does it look awesome, but everything works just as it would in a desktop application. The unfortunate thing about Zimbra is it has two licenses: an open source one and a pay-for version that has all the features you really want.

Zimbra = "Pure" Ajax. All UI behavior specified in JavaScript. The *entire* UI is written in JavaScript, no HTML. It's more like a typical GUI application from a programming perspective (think JavaScript SWT). Result is "husky" client 3-tier architecture. All UI on client, server-side Java code for UI operations. This is very different from HTML "design center" where you start with an HTML page and augmenting with Ajax. The Zimbra toolkit actually doesn't fit very well into most applications, where folks enhance HTML pages. It's more designed for programmers who want to write their entire application in JavaScript.

Ajax is finally giving us a clear partition between client logic and server logic. The dividing line is up to the developer, that's the challenge for web developers today. It's basically a user-defined SOA Endpoint. Before Ajax, in the Java world, JSPs and Servlets were considered the client-side, even though they were really more server-oriented.

Ajax applications are cheaper on the server/network than Web 1.0/HTML apps. Modulo the initial download (gzip is essential). Ajax is much more expensive on the client CPU. Tend to be finder grained in their client/server interactions. They tend to be more stateful. Rule #1: Pick your service bindings well! For modularity and re-use/mashups.

"There's a special place in heaven for whoever had the patience to get all of that JavaScript right." - Paul Ambrose, WebLogic Founder on Zimbra

Ajax Challenges: Browsers and Toolkits. Browsers render the same HTML differently, they have different event models, different levels of DOM supported, they have different APIs that do the same thing, as well as many issues. As far as toolkits for Ajax, there's too many rather than too few. Consolidation would definitely be a good thing.

Zimbra's Ajax Tookit (AjaxTK), Apache Kabuki* is modeled after SWT. It's a JavaScript OO class library and open source (Mozilla or Apache licensed).

Another big challenge is lack of integrated tooling. There's lot of technologies to deal with concurrently: HTML, CSS, JavaScript, etc. The initial stab at a solution is the Open Ajax Initiative. This is largely a set of technologies from Eclipse, Mozilla and Apache. There's 30-odd companies involved with the initiative, including: IBM, Zimbra, Eclipse, Firefox, Apache, Google, Yahoo, Oracle and Red Hat (or at least that's the logos Scott has on his slides).

The proprietary Ajax Landscape consists of MS Visual Studio (Tooling) and MS Atlas (Toolkit). On the open source side, there's Eclipse+Mozilla for tooling and all kinds of frameworks for toolkits (i.e. Zimbra/Kabuki, Dojo, Scriptaculous). Scott's opinion is there's really no room for any proprietary vendors to provide solutions outside of Microsoft.

Now Scott is doing a demo of mash-ups in Zimbra. He's showing how you can mouse-over many things in an e-mail message to get the information you're looking for w/o switching to a new page/context. Mash-ups he showed include: real-time flight information, displaying schedule for a particular day, dragging a message to an SMS sender, viewing a map by mousing over an address. The latest thing they're working on is dragging an appointment from a calendar to a "travel agent" that books your flight.

Zimbra also includes a WYSIWYG authoring environment for documents. It allows you to do HTML editing (in design view) as well as embedding spreadsheets within pages.

Zimlets: extensible mash-ups for e-mail, calendaring, IM, etc. They're a merge of "pull" and "push". There's zero-client install and they're secure because they're managed by the server administrator. To create a Zimlet, you develop a declarative XML template (Regex, ActionURL, XSLT, CSS, Menu). JavaScript can be used to override Zimbra client-based classes. JSPs can be used on the server-side for customization. Ajax Linking and Embedding (ALE) is Ajax components that are embeddable in editable HTML (simple docs, spreadsheets, etc.). Views are read-only HTML and WYSIWYG Ajax authoring (Ajax cod is the "authoring" application).

Practical Tips for Ajax:

• Use an Ajax toolkit
• CSS is your friend
• Use JSON (as well as XML)
• Use asynchronous network programming
• MVC paradigm worked for us
• Tooling better, but rough edges remain
• _all.js -> jsmin (saves ~ 1/4X)
• _all.js, _all.css -> gzip (saves ~ 3-4X)
• Mercury's QuickTest-Pro (QTP) [IE + FF*]
• Pick your fights - not all applications need to be Ajax enabled
• No such thing as secure client-side business logic in Ajax
• Dedicate some top UI OO talent (or wait for tech to catch up)

Ajax Sweet Spots:

• Richly interactive UI desirable (HTML simplicity is ideal for many applications - for example, you'd rather use Amazon's one-click than drag a book to a shopping cart)
• Combine with web look and feel and deployment
• No client-side data/resources (but is changing, stay tuned)
• Perfect for on-demand services

Recipe for Ajax Success: Ajax is not a business model, compelling and appropriate innovation is essential.

Next Ajax Steps: In open source land, try the OSS toolkits, Eclipse ATF and participate in Ajax communities (Apache/Zimbra, Eclipse, Mozilla, Dojo, Scriptaculous). Scott moved to fast for me to catch his recommendations for Microsoft developers. He did have positive things to say about Microsoft though.

Hardest Ajax problem of all? Recruiting. According to Scott, it's incredibly hard to recruit people that know Ajax.

Update: Additional coverage of this talk is available at Ajaxian.com.

Yahoo's Grids CSS

When I first saw Mike Stenhouse's CSS Framework, I was very impressed. It's hard to believe it's been a year since I first saw it, and only now am I integrating it into AppFuse. It figures that the week I'm implementing it, Yahoo comes up with something better: Grids CSS. Thanks to Jacob Hookom for e-mailing me the link.

The features of Grids CSS include:

• Full A-grade browser support
• More than 100 page layouts with a single CSS file at just 1.82KB
• Flexible scaling with user font-size adjustments
• Min-width enforcement, regardless of font or viewport size (except IE; helper JS under consideration)
• Abundant DOM hooks for CSS and scripting flexibility
• Source-order independence, allowing you to place your most important body content first in your HTML document
• Self-clearing footer (no matter which column is longer, the footer stays at the bottom)
• Centering within the viewport by default
• Forward-compatibility as standard page structure evolves to claim more screen real estate
• Accommodation for IAB Advertising Units

This is obviously a better solution than the CSS Framework, especially since it seems to be well-documented and allows source-order independence. However, it suffers from a similar problem: there's a lack of good-looking designer-styled templates that showcase how cool this library is. There is hope though, Andreas Viklund (a well-known open source template designer) is talking about a Modular CSS Template. The question is: will he re-use Yahoo's Grids CSS or invent his own?

[Yahoo's Grids CSS] is almost exactly what I was working on - but much smaller and probably better than I would have done it. The main difference is that I added a few extra layers to the cake: Make-up (layout-wide styling for typography, forms, headers, links and so on), Colorscheme (just what it sounds like) and Backdrops (background images). Designers can add each layer separately. If you have a site based on the template and you want to change the styling - add a new Make-up. It is a matter of cutting and pasting blocks of code into the CSS, even a beginner with no CSS design skill can do that. If you want to use different colorschemes for different pages - just add more colorschemes and call it from the colorscheme class of each page. One line of code to change, and the effect is very obvious?

It's cool to see there's lots of work going on in this space. While AppFuse 1.9.2 will include the CSS Framework, there's nothing stopping us from using a different solution for 2.0. I'm leaning towards moving to Yahoo's solution, but it's likely I'll be heavily influenced by Andreas' work in this space. Of course, since Yahoo's library is open source, it might make sense for Andreas to simply contribute to this project and improve what they've already done.

Roller Comments

The default comment form in Roller is pretty ugly. Not only does it use a <table> to layout the form, but it has invalid XHTML and JavaScript as well. With the new theme on this site, I re-worked much of the comments.vm macro and created a much prettier form. I was hoping to contribute a variation of this theme to Roller for 2.3, but it looks like it'll have to wait until 2.4. Rather than adding new macros for this theme, I'll be fixing all the themes to have a prettier comment form. You can track my progress on this issue using ROL-1131.

As far as this theme, I've named it "andreas08" after its designer. I hope to contribute something similar to what's on virtuastravels.com as part of 2.4. If you'd like to use this theme in your own Roller installation (before 2.4), let me know and I'll try to package up a download.

CSS Framework Design Contest Winner and Runoff

I've tallied the votes as posted to the mailing list. Here's the results:

• puzzlewithstyle: 6
• andreas01: 4
• deliciouslyblue: 4
• madeyourcss: 4
• fuseapp001: 4
• simplicity: 4

Congratulations to Mattias Fjellström for his winning Puzzle with style entry! The themes not listed here received 2 votes or less.

Based on these results, it looks like we need to have a runoff vote (for 2nd and 3rd place) between andreas01, deliciouslyblue, madeyourcss, fuseapp001 and simplicity. To place your vote, send an e-mail to [email protected] with "My favorite runoff theme is XXX" in the body. Voting will end at midnight (MDT, GMT-6) tomorrow night.

NOTE: "madeyourcss" had 6 votes sent to the mailing list, but 3 were from the same person. It might have been 4 that were sent from the same person, but since there's a runoff, I decided to add it to the mix.

New Colors (again)

I've just completed another round of re-working the colors and header images on this site. If you click on the different category headings (i.e. Java, Mac OS X or Open Source), you can see the other color schemes. If you like one of the category theme's better than the default one, let me know.

I also did some tweaks to get everything working in IE. What a pain in the ass that browser is. For some reason, if anything in the "main" part of the website (where the blog entries are) is too wide - IE shoves everything down the page, including the top nav bar and the right sidebar. It's so bad that a simple paragraph with "margin-left: 10px" doesn't work. With Firefox and Safari, it moves over properly and overlays the sidebar if that's what it takes. Because of this, there's a potential that wide posts in this site will make the sidebar drop to the bottom of the page. For the nav bar, I changed it to be absolutely positioned, so it should always be present.

Other IE issues include: 1) the calendar icon is a transparent .png (I'll probably have to change it to a .gif) and 2) the nav bar's "selected" items are up a pixel or two and contain a bottom border. While these are minor issues, I would like to figure out how to make IE more tolerant of item width's in the #main section. Let me know if you have any tips or tricks.

AppFuse plans for the week

Like most Java open source projects, I hope to release a new version of AppFuse this week before JavaOne. There's a couple reasons for this: 1) so I have the latest and greatest to demo during talks and 2) so the article I'm writing is up-to-date. Unfortunately, with both AppFuse and Equinox it's a bit difficult to make sure I'm using the latest and greatest for everything. This is because they're both very thin layers on top of their underlying dependencies.

I'm willing to bet that a few of these dependencies will have new releases this week, as developers scramble to get a bunch of stuff done before JavaOne. Here's my release predictions for this week:

• Acegi Security 1.0
• DWR 2.0
• Hibernate 3.2
• Spring 2.0

My current plan is to fix outstanding issues for 1.9.2 and then hold off to do the release until this weekend. Hopefully that gives each project enough time to pump out a release. If you happen to be involved with any of the projects that AppFuse depends on - and you're not planning on releasing before JavaOne, please let me know.

The 1.9.2 release of AppFuse will (hopefully) be the last one in the 1.x series. Work on 2.0 will begin towards the end of this month. See the roadmap for the cool stuff coming in 2.0.

As far as the CSS Design Contest, I'll announce the winners tomorrow. I also plan to fix this site in IE tonight and take another stab at making the header images and colors easier on the eyes.

Studio7Designs

Andreas Viklund is the original designer of this site's layout. Last night he pointed out a cool new site that showcases another set of open source web design templates.

Aran and Pat, also known as open source template designers Nautica and snop, have launched a new and extremely pretty website: Studio7Designs.com. The site is announced as a "network of professional designers", and it will show off both open source website templates and stock photography. Pat is one of the designers whose work I truly admire (see the Lazy Days template to understand why) and Aran's Nautica-templates are great examples of the simple design style that I like, so the site is well worth a visit.

Like Andreas, I think their Lazy Days template is truly awesome. I wonder how hard it would be to port it to the CSS Framework?

CSS Design Contest: Time to Vote

It's time to vote for the CSS Framework Design Contest! Counting votes and making sure everyone only votes once is always a challenge in these types of contests. I think the best way to ensure honesty is to have people send an e-mail to a mailing list. So here's how to vote:

• Pick your favorite design from the entries.
• Post an e-mail to [email protected] with subject of "My CSS Design Contest Vote".
• Vote for your favorite theme by putting "My favorite theme is XXX" in your e-mail.

Let the voting begin!

Rebooted

As you can hopefully see, I've rebooted the HTML version of this site. I apologize to anyone using IE - I haven't even looked at the site using IE. Everytime I startup Parallels on my MacBook Pro, it locks up the system and I have to reboot. Installing this new theme was pretty painful, mostly because I had to do it with a 20K connection through my cell phone. I'm staying at The New Yorker Hotel in NYC, and even though they advertise "free wireless", it doesn't work for me.

I hope you like the new theme - clicking on the different categories will give you different variations of it. Clicking the "Roller" category will allow you to see version I'll be contributing back to the Roller project. If you see any issues at all, please let me know. Most of them should be fixable with a bit of CSS. The only thing I still need to do is figure out how to get Roller to use the last entry's title in the <title> tag. Google loves good titles.

Update: OK, so most people don't like the reboot - including folks on the CSS Reboot site. Personally, I like the new layout, but agree that the default colors need work. I do like some of the alternative colors, like The Web category's. I'm open to suggestions - what would you like this site to look like?

Update 2: The colors might suck, but my Sitescore results have gone up significantly. The funny thing is the main thing I'm lacking is different titles on each page.

Update 3: I solved the title problem. You can do this in your Roller templates too if you like.

#set( $xmap = $pageModel.getRecentWeblogEntries(1,'nil') )
#foreach( $day in $xmap.keySet() )
   #set( $recentEntries = $xmap.get($day) )
   #foreach ($var in $recentEntries)
       #set ($title = $var.title)
   #end
#end
    <title>#showWebsiteTitle() | #if ($page.Name == "Weblog") $title #else $page.Name #end</title>

Upgraded to Roller 2.2

I spent some time this afternoon and upgraded this site to the soon-to-be-released Roller 2.2 (release notes). Please let me know if you see any issues.

Upgrading Roller is the first step in preparing for tomorrow's CSS Reboot. I don't know if I'll have time to create a new theme and use it on this site, but I hope to give it a try. I'm on the plane for 4 hours tomorrow, so I should be get something done.

As part of the upgrade, I fixed search for this site. The problem was caused by using $dateFormatter when viewing search results. My guess is that variable is not in Velocity's context after searching.