Spry framework makes Ajax approachable for web designers

by Julie Campagna

You've read the blogs, and you've heard the news. More and more developers are using Ajax to build rich user interfaces. But what about web designers and HTML producers, the people who design websites and code HTML day in and day out? While the web developer community has passionately embraced Ajax, web designers — the ones who could contribute and benefit the most — seem slow to adopt the Ajax approach.

In fact, the Adobe Dreamweaver team recently returned from a six-month tour during which they observed and talked with Dreamweaver customers, most of whom focus on HTML production. They interviewed and observed customers to understand better how they use Dreamweaver — and, ultimately, to get a better idea of what to include in Dreamweaver 9. During interviews and observations, the team checked in with users about Ajax.

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

"A lot of our users had heard about Ajax but didn't know how it related to them. So when we were pitching Ajax-type features, it didn't resonate very well with customers. Only when we started to show them examples of what you could do with Ajax did they become interested — the whole idea of the single-page experience and behind-the-scenes data refresh — they were definitely interested in creating those types of experiences," explained Jorge Taylor, engineering manager for the Spry framework.

Ajax is a concept for how web designers and developers can use various techniques to update web pages without requiring visible page refreshes and without the need for browser add-on technologies.

"Ultimately Ajax is about building better user experiences. But, ironically, Ajax had only been embraced by the programmers and developers in the community. The designers — the folks who can make the most impact with Ajax — hadn't been empowered yet to use this technology. That's where we saw a real disconnect," said Taylor.

As a result of these observations, the Dreamweaver engineering team returned from their travels and quickly embarked on creating the Spry framework. Not just another Ajax framework, Spry is lightweight and easy to install, and focuses on the specific needs of the design community.

"We wanted to put forth an Ajax approach that is very HTML-centric to help web designers and producers add basic interactivity to page designs. We deliberately avoided inventing a whole new tag set or imposing a full programming model because we believe doing so would result in a much steeper learning curve for web designers," said Paul Gubbay, director of engineering for Dreamweaver.

With Spry, you create "dynamic regions" in your page by adding special attributes to your existing HTML. Think of these regions as miniature HTML templates that contain placeholders for dynamic data. The regions are bound to a "dataset" that can be reloaded "behind the scenes." When the data is reloaded, that region of the page is automatically updated.

Taylor encourages designers to look at the Spry demos on Adobe Labs. "You can really see what we mean by a 'better user experience.' And then look at the source code because you'll be surprised at how lightweight the framework really is, and how little it takes to enable that type of experience."

Available for free on Adobe Labs, Spry is a client-side framework in the form of JavaScript libraries that you can easily add to your new and existing web pages. Spry is server- and tool-agnostic. You can use it with any HTML editor.

The first release of the Spry framework is a preview of the data capabilities that enable designers to incorporate XML data into their HTML documents using HTML, CSS, and a minimal amount of JavaScript.

According to Gubbay, "If you know HTML and have a basic understanding of XML, CSS, and JavaScript, you should be able to jump in and be productive right away."

Part of the Adobe Developer Relations team, Julie Campagna is managing editor of the Adobe Edge newsletter, and is heavily involved with developing and producing feature articles for Adobe publications.