Free framework looks to simplify Ajax development

The number of freely available frameworks for Web development is a bit overwhelming, and it can be hard to keep up with all of them. TechRepublic member araalie mentioned Adobe Spry in a comment about my article on Dojo, and I decided to check out the framework.

Given Adobe’s size and Web development products, I am intrigued by the Spry framework for Ajax. Though it is still in a prerelease stage, this article examines the Spry framework and explores what it brings to the table.

Adobe Labs

Like most large companies, Adobe has a substantial research and development department. The Adobe Labs group is part of it. Adobe Labs is the source for early looks at emerging products and technologies from Adobe. There are a variety of downloads available on the Adobe Labs site, including the Spry framework for Ajax.

What is it?

Spry is a client-side framework in the form of JavaScript libraries that you can use to enhance Web pages with Ajax-based functionality. Its main goal is to demystify Ajax for developers and designers with basic HTML/CSS skills. While it has been developed by Adobe, it is tool agnostic, so you can easily use it with your favorite editor as well as Dreamweaver. The crux of the Spry framework is XML, so a little XML knowledge goes a long way in using its features.

Target audience

Adobe is focusing on less-technical persons, while many libraries like jQuery focus on Web developers to utilize and extend their library code. Adobe states that the Spry framework for Ajax is meant primarily for users who are Web design professionals or advanced nonprofessional Web designers. It is not intended as a full Web application framework for enterprise-level Web development. With that said, here’s a look at getting and using it.

It is free

The Spry framework is currently at a prerelease version of 1.5. It is freely available from the Adobe Labs site; it does require registration with a valid e-mail address to complete the download. You download it in a single, compressed file. And, you can extract and install it to a directory on a Web server to be up and running in minutes.

As an example, I downloaded and installed it on a local development machine running Microsoft Internet Information Server (IIS) in the following directory:

c:inetpubwwwrootspry_p1_5_051707

Using this directory, the samples included with the download are easily accessed via the following local URL on the machine:

http://localhost/samples/index.html

Three easy pieces

Spry is made available for use in your applications via the BSD License. The framework includes three main sections of functionality: Data, Widgets, and Effects.

• Data: The Data API includes various functions for working with XML-based data. Spry creates datasets by making calls to the XML data sources URLs. Datasets can be tied together in a master/detail relationship, as well as easily displayed by tying them to regions of a page.
• Widgets: The Widget API allows you to tie together HTML, CSS, and JavaScript code for user interaction. The HTML defines its structure, CSS defines its presentation, and JavaScript defines its behavior, such as responding to user actions.
• Effects: The Effects API provides the ability to easily apply visual enhancements to almost any element on an HTML page. The current iteration of the framework includes the following effects: fade, highlight, blind up/down, slide up/down, grow, shake, and squish. Spry uses the script.aculo.us library for some effects.

The APIs are available in the JavaScript library files installed with the framework. They are located in the includes subdirectory of the Spry installation.

Drawbacks

One of the most frustrating aspects of Web development is ensuring an application works in various browsers. This involves ensuring the application degrades gracefully to work in browsers with minimal capabilities, including a lack of JavaScript support. With JavaScript being a central player in the AJAX acronym, a lack of it means it just won’t work.

This is where the application should be designed to work without Ajax, and the Spry framework has not been designed to gracefully degrade. In fact, it does not work if JavaScript is disabled in the browser; you must keep this in mind if you use Spry. The onus of graceful degradation rests with the developer. A good source of information on implementing such support in an application is available in the recently reviewed book entitled Simply JavaScript.

Another concern with the Spry framework is the use of nonstandard attributes for HTML elements like the DIV tag. This type of design can cause pages using such code to not function in certain browsers. Adobe says the current version of Spry has been tested with Firefox 1.5, Internet Explorer 6, Safari 2.0.3, and Netscape 7.2. You can find more details on this point and other issues in the Spry framework FAQ.

My impressions

I find the Spry library a bit more complex than expected given its target audience of the less-than-JavaScript-savvy Web designer community. While it is easy to create data sources based upon XML, using these data sources relied upon my JavaScript knowledge. I did like the various features of the toolkit, but it makes me wonder how much a person with limited JavaScript knowledge will able to accomplish with Spry.

Spry gives you another option

Once upon a time it was hard to locate JavaScript libraries that simplified incorporating Ajax functionality in a Web application, but now the number of freely available libraries is a bit overwhelming. The niche aspect of the Spry framework for Ajax is that Adobe is targeting Web designers who are less technical. The framework does provide cool and usable features via its data support, as well as widgets and effects.

Have you worked with the Adobe Spry framework or any other freely available JavaScript libraries? Share your experience and preferences with the Web development community.