The typical web developer switches from a text editor to a terminal application to an FTP program every few minutes. The folks at Panic, Inc. imagined a better way to build websites and created Coda to give developers a unified interface to create, view, and upload their web sites. Their efforts were so successful they won the award for Best Mac OS X User Experience at the Apple Design Awards 2007.

Built in Xcode, using Cocoa, Mac-only Coda includes six programs: a text-based file editor, a Safari-like web browser (using WebKit), a CSS editor, a terminal emulator, an FTP program with support for SFTP and several other transfer variants, plus an ebook reader, and comes with four programming reference manuals. Each of Coda’s independent applications excels on its own, but as a group they hang together well, comprising a cohesive package that's an easy-to-use application for serious web developers.

A complex program like Coda is challenging for two reasons: It implements a lot of features, and those features need to work together in a sensible fashion. Steven Frank, who co-founded Panic with Cabel Sasser, says a wide range of Mac OS X technologies went into producing the company’s latest award-winner.

“Coda's written with Xcode, using Cocoa almost exclusively,” says Steven. “We use a ton of Apple frameworks, including WebKit, QTKit, Security, Quartz, and OpenGL. Because Mac OS X also supports UNIX libraries, we use them where it makes sense to do so. All of the engineers have Mac Pros, and Xcode's distributed build system allows us to compile extremely quickly. ”

Using Existing Frameworks to Your Advantage

Panic’s extensive use of Mac OS X frameworks let the development team focus its attention on Coda’s user interface.

“We use WebKit to generate previews of the pages that the user is working on,” Frank explains. “Being able to take advantage of the full Safari engine is a huge boon. Obviously, writing your own web browser would be no small undertaking. And in the case of a development tool for web authors, the result would be nearly useless unless it rendered exactly like Safari or one of the other major browsers. We also used WebKit to generate thumbnails of the site and to implement the DOM (Document Object Model) Inspector so you can see what code is rendering which part of the page.”

WebKit is perhaps an extreme example of framework reliance, as comparatively little original code had to be added to make Coda's Preview program. Frank points to two other Apple frameworks that sped development in ways that were subtler, but still essential. First, Panic used QTKit to play images, audio, and movies within the application, giving developers a more realistic view of their work; second, he praised the Security framework's ability to pull passwords from users’ Keychains while keeping them encrypted and secure. The Security framework's real payoff, he says, is in end-user satisfaction.

“The great thing about the Security framework is that users don't need to re-enter their [site] passwords, in most cases,” Frank notes. “Remembering passwords is a pain, and it's great that Mac OS X provides centralized storage for them that any application can tap into.”

The Security, WebKit, and QTKit frameworks are all familiar to Apple developers; their effects are found in practically every web application. But the Panic team also used third-party and home-grown frameworks that “supplement Apple's nicely,” says Frank, enhancing these technologies in specific ways.

Steven says, “OgreKit is a Cocoa wrapper around the Oniguruma regular expression library that allows you to process pretty much all of the common regular expression dialects, Sparkle provides an elegant mechanism for Coda to check for, download, and install updates. HDCrashReporter sends us user crash logs so they can go into our custom-built bug tracker for analysis. And Neon is a third-party library for WebDAV support. We also have an internally developed framework that handles all the network protocols.”

None of this source diversity is evident to end users. All they experience is a flexible, multifunction tool that's as compact and intuitive as a Swiss Army knife. But “easy is hard," as the saying goes.

Designing for Simplicity

Getting all these parts to work as one wasn't easy, even though the Panic team had the user interface in mind from the very beginning.

“Coda was a real UI challenge because it has windows, tabs, and modal splits within tabs, as well as a file browser,” says Frank. “We had a rough idea how we wanted everything to work, but it was very difficult translating that to an interface that worked well, even during the initial pencil sketches. We sketched a lot of ideas and threw away a great many of them.”

Frank advises patience to developers who face such a challenge, along with cooperation between the design and engineering sides of the house.

“Getting it to work as well as it does required many design and engineering iterations,” he notes. “There was some frustration because once the code got to a point where we could actually use the application, we would realize that certain behaviors would have to change, and engineering had to throw out some code they'd already written and partially start over. But ultimately I think it was worth the pain.”

Above all, he cautions designers to simplify, simplify, simplify. For Coda, that sometimes meant playing with existing paradigms to discover ways functions could be combined and streamlined.

“With a product like this that does so many things,” Frank explains, “it would have been all too easy to just slap a hundred buttons everywhere and call it a day. We faced some UI design problems that I'm not sure have ever been tackled before, and came up with some really nifty solutions. Examples that come to mind are the Find banner and the custom color well control in the CSS editor, which allows a 'no color' state.”

Quartz and OpenGL Make it Easy

Although the architecture was difficult from a conceptual point of view, Frank says that the implementation was greatly simplified by Mac OS X's Quartz foundation.

“Quartz gets used all over the place in Coda,” Frank says. “We have quite a few custom controls, and Quartz lets us implement things like gradients and vector-based drawing incredibly simply. Adding a perfect drop shadow is a no-brainer, and we easily used a Core Image filter to render thumbnails with a shaded page curl. It's a tiny little touch, but it looks great. The reason Mac applications look as good as they do is that Apple makes it really easy for us to use this stuff.”

He also praised Apple's implementation of the OpenGL standard, in particular for helping the Coda team provide visual cues that would have been difficult otherwise.

“OpenGL powers, among other things, the 'page flip' effect when you edit or open a site in Coda,” Frank explains. “The small site thumbnail flips over, and scales up to fill the window. We didn't just do this for eye candy, either. It's an important but subtle psychological signal to the user that 'you have activated this item' and 'this item has now become your workspace.' That was a lot less clear to beta testers before we added the flip animation. It's important not to overdo it with animations, but used judiciously such effects can make a huge difference in the user's comprehension.”

Taking from the Past, Looking Toward the Future

In addition to the frameworks provided by Apple and third-party developers, Panic relied on experience (and code) gained from producing two earlier Internet applications, both of which won Apple Design Awards. Its Usenet news reader Unison put an elegant user interface on a mostly text-centered program, winning the 2004 Award for Best Mac OS X User Experience, and its much-acclaimed FTP program, Transmit, won the 2005 Award for Best Use of Mac OS X Tiger Technologies. Transmit in particular gave Coda a big headstart.

“Having the Transmit code available was a big impetus for even starting the Coda project in the first place,” Frank says. “It would have been even more daunting than it was if we'd had to write all that file transfer code as well. But with Coda, we had the opportunity to tune some things about the architecture for better performance, memory usage, and so forth. So we started by extracting the Transmit code into its own library (internally known as FTPKit) and diverged a bit from there. In some ways, Coda's version of the Transmit code is now better than Transmit's code! For the next major update to Transmit, we'll be merging that code so they'll share the same exact engine.”

Frank knows it's not enough to rest on one's laurels and eagerly adopts emerging Mac OS X technologies as they're released. For example, he knows that higher-resolution screens will arrive eventually and is grateful to Apple for laying the groundwork that will make developers' applications look good for years to come. Frank described how he expects this proactive stance to benefit him in the future.

“We're looking forward to being able to add such upcoming WebKit features as the JavaScript Debugger, which will be a gigantic win for developers,” he says. “And we're already building all of our graphics to be resolution-independent. We might not need this feature for years to come, but it's a big 'behind-the-scenes' feature of Leopard that Apple is encouraging all developers to get behind. It basically means that all of the graphical assets are done in a very large format and thus don't appear tiny on extremely high DPI screens. Apple's emphasis on resolution independence definitely gives us the impression that something interesting is in the works.”

Ultimately, Frank believes that much of Panic's success is due to fulfilling needs in the here and now. For him, that means being aware of his own itches, then bringing together resources from diverse providers to scratch them.

“Almost all of our projects get started because one of us finds ourselves desperately wanting a particular piece of software and not finding anything pre-existing that fits the bill. In particular, I was looking for a web IDE, but couldn't find anything that tied everything together in a way that made sense to me, while also looking like a first-class Mac OS X application. I think we succeeded.”

For more information about Coda, see the Panic Coda website.