Web DevCenter    
 Published on Web DevCenter (http://www.oreillynet.com/javascript/)
 See this if you're having trouble printing code examples

A Pet Market with Flash

by Dean Wampler

Editor's Note: J2EE and .NET are big-time enterprise architectures competing for the attention of today's developers. Both camps have reference applications to demonstrate how their architectures work. The "standard" for evaluation is the sample pet store (a remnant from the dot-com heydays) that is used to compare apples to apples, or maybe more appropriately, Milk Bones to Milk Bones. Recently, a third pet store demonstrating Flash and ColdFusion capabilities has entered the scene. In this article Dean Wampler provides you with an overview to Macromedia's approach to enterprise architecture, Pet Market, plus plenty of links to continue the exploration on your own.

Online pet stores were among the most spectacular failures of the dot-com boom-and-bust cycle, but their spirit lives on in the form of dueling reference applications for the major enterprise architectures. The J2EE and .NET worlds recently squabbled over the relative merits of their platforms using "native" implementations of a sample Pet Store application. I analyzed the merits of some of the arguments in a recent article for ONJava.com called, Cat Fight in a Pet Store: J2EE versus .NET.

Macromedia has just announced its own "Pet Market" demonstration application using Macromedia Flash MX for the user interface and ColdFusion MX, or optionally .NET or J2EE, for the server back end. Should developers even care? I think there are reasons they should.

About Macromedia Flash and ColdFusion

Flash is "the de facto standard for animation and vector graphics, giving a platform-independent, low-bandwidth, cosmetically pleasing solution." (See Why Flash is Significant.) With the latest release, Macromedia Flash extends its capabilities to support even more expressive sites with enhancements for video, application components, and accessibility. Just as the Web has evolved into an interactive communications medium, Flash has also evolved to support interactive features and server connectivity.

As the article SWF Is Not Flash points out, there are really several components commonly lumped together under the "Flash" label: (A) The SWF vector graphics file format, (B) the application or plug-in that plays the SWF content, and (C) the authoring environment.

SWF is not an open standard, but Macromedia has made it publicly available. Similarly, while Macromedia provides most of the players used in the world, in the form of small, downloadable plug-ins, the public SWF specification has allowed third-party players to exist. Finally, the authoring tool and its project file format are proprietary to Macromedia. (Other tools that generate SWF use their own project file format.)

Another Macromedia technology, ColdFusion, was one of the first complete development and run-time environments for Web sites. It anticipated many of the ideas that are now commonplace, such as custom-tag libraries that provide convenient Web page access to back-end business-tier and database servers.

While ColdFusion is now a mature and full-featured product, it is not as broad a platform or as widely used as J2EE and .NET. Nor does it really try to be. In fact, the recently introduced ColdFusion MX is built on the J2EE 1.3 platform and includes the ability to run on top of most J2EE application servers. ColdFusion MX also integrates with Microsoft's COM and .NET technologies.

The Internet's UI Revolution

Related Reading

ActionScript: The Definitive Guide
Mastering Flash Programming
By Colin Moock

Remember the days before the Internet explosion? Graphical UI's were pretty mundane. They mostly stuck to the tried-and-true "WIMP" metaphor (Window, Icon, Menu, Pointing device) pioneered in the late 1970s by Xerox PARC, popularized by the Macintosh, and imitated by everyone else. Then came the Internet's "Cambrian Explosion".

The real Cambrian Explosion occurred 500-540 million years ago (even before my time). The variety of life exploded, with new and bizarre forms never before seen on Earth. Nature was experimenting. Most of those forms died out, but the tried-and-true survivors became the foundation of all life today. Similarly, the Internet boom was one giant experiment in new ideas; new UI techniques, new ways of communicating, and new delusional business models.

Most of the UI ideas were clearly bad and didn't last. The best ideas included departures from WIMP constraints, primarily the introduction of vibrant, live interfaces that take full advantage of multimedia technologies. I use the word live to mean appropriate, but restrained uses of animation effects that teach and guide the user in ways that resemble how the world around us is "live". Nothing happens instantaneously in the real world. Why should our user interfaces be any different?

Flash is one of the best technologies to emerge from the Internet era, because the SWF file format provides the features necessary to enable engaging interfaces. Yet SWF files are compact and efficient enough to work well within the bandwidth constraints of the Internet. Plus, Macromedia's authoring tools have always made it relatively easy to create engaging interfaces. As a result, Flash has become extremely popular with designers, who have used it to create award-winning animations for entertainment, games, ads, training, and business-to-consumer Web sites. (Of course, bad designers have also used Flash to create annoying "intro" animations.)

Macromedia uses the term Rich Internet Applications to refer to client-server systems with sophisticated and engaging user interfaces. These systems span the range from entertainment to business applications. Business applications have been slower to adopt technologies like Flash, but I expect this pattern to change as more of them improve their user interfaces in order to enhance the user experience, thereby improving their competitive advantage.

Why Flash Succeeds

Flash wasn't the only multimedia technology to emerge during the Internet boom, but it has many qualities that put it on top of the pile.

Flash Is Ubiquitous

Surveys indicate that over 95 percent of all deployed browsers have a Flash Player plug-in, of one version or another. Therefore, Flash is sufficiently ubiquitous that Web designers know that most of their site's visitors will be able to view Flash content.

Flash Is Extremely Lightweight

Even users without a recent Flash Player plug-in can download a small player quickly over almost any bandwidth connection. Furthermore, when the Player runs, its resource requirements are modest.

Flash Is What Applets Should Have Been

The first major technology for nontrivial, interactive Web interfaces was, of course, Java. However, Java Applets never really caught on for several reasons:

Why Pet Market Works

The Flash-based Pet Market has a live, engaging interface with an appropriate level of animation effects that aren't gratuitous or burdened with "visual noise". Rather, they guide the user through transitions from one "page" or task to another. It is focused and utilitarian, yet attractive and inviting. The credit for much of the design goes to the award-winning design firm Popular Front, which designed Pet Market with Macromedia.

The J2EE and .NET pet-store interfaces are more pedestrian in nature. To be fair, they weren't designed to highlight user interface design, yet a comparison is appropriate. The JSP and ASP technologies are really rooted in the old WIMP paradigm. While they are functional, are they as likely to attract and keep users?

Fortunately for designers of high-traffic Web sites and enterprise applications, a Flash front end can be used with J2EE, .NET, or Web service back ends, too. Macromedia has done a good job of integrating Flash with ColdFusion, but they haven't forgotten shops that are committed to J2EE or .NET.

Picking the Right Tools for the Job

Consider the Importance of a Rich UI -- An early myth of the Web was the belief that Web sites are a cheap way to do business. Then it was discovered that the hard and expensive part is attracting and keeping site visitors. Many otherwise useful Web sites failed to keep their visitors because of poor usability or simple boredom. A lively, vibrant user interface encourages users to come back.

Developers of "enterprise" applications need to understand this point, too. The same principles of successful Web interfaces can make enterprise applications more productive and engaging for their users. We've all seen enterprise applications where the interface was an afterthought. How many of us use those applications reluctantly? Are we as productive as we could be when we use them?

A major problem of Web-based interfaces is the inconsistent behavior of DHTML and Java across platforms, browser versions, and so on. Because Flash behaves consistently and predictably across platforms, your development and testing costs may be significantly reduced, despite the cost of the authoring tools and the learning curve.

Using a Flash user interface can help overcome many of these challenges.

Flash Developer Tools

As I mentioned before, SWF applications can be constructed with third-party tools, some of which are open source (see SWF Is Not Flash), but the premier authoring tool is Macromedia's own.

Designers get an excellent authoring environment that also minimizes the "pocket protector" expertise required to build interactive applications. For example, ActionScript, the scripting language for Flash, is easier for designers to use than many alternatives.

Software developers may misinterpret ActionScript as too "lightweight" for "real" application development, but it's easy to be misled when you're accustomed to working with difficult and obscure tools.

Flash doesn't eliminate all problems. No tool can magically enable a bad designer (or a good software developer!) to produce elegant, yet functional interfaces. There will always be a need for experienced designers who possess good esthetic sensibilities and a solid grounding in usability. They need to know how to design for the intended audience and they need to keep restraints on the visual pizzazz. Of course, good designers are needed no matter what user interface toolkit you use.

Finally, any powerful tool presents a learning barrier. Macromedia has lowered the bar about as far as it can reasonably go. However, if you already know DHTML, JSP, or ASP, you'll have to decide if you should go with what you already know, limitations and all, or learn a potentially "better way". Of course, Flash collaborates well with these technologies, so you can mix and match as appropriate.

What About ColdFusion?

While I'm focusing primarily on the enhanced usability enabled by Flash in this article, it's worth mentioning that enterprise-class J2EE and .NET application servers are overkill for some applications. A lighter-weight and mature application framework like ColdFusion is appropriate for many mid-size needs.

ColdFusion is well integrated with Flash and ActionScript. It has a rich tag library to integrate the front and back ends of your application and to simplify development. ColdFusion was one of the first environments to extend basic HTML to simplify the construction of interactive Web pages that work with back-end systems. Its example was followed by ASP and JSP. ColdFusion is a mature, full-featured, and well-regarded product that can complement or replace J2EE and .NET. However, it may be harder to find experts in ColdFusion since J2EE and .NET are more in vogue.

Fortunately, Macromedia's strategy of integrating J2EE and .NET with ColdFusion gives the developer the option of "upgrading" applications to a top-tier J2EE server or integrating the applications as Web services with .NET applications, thereby protecting the investment.



Pet Market Application Development Center (Macromedia)
Cat Fight in a Pet Store: J2EE vs. .NET
SWF Is Not Flash (and Other Vectored Thoughts)
Why Flash is Significant
Macromedia's Home Page for ColdFusion
Macromedia's Home Page for Flash
Macromedia White Paper on Rich Internet Applications

You could dismiss Pet Market as a "hey, don't forget about me" application, but it reminds us of one of the very best lessons of the Internet era, the value of a visually rich, yet functional user interface.

Flash is an excellent tool for building these interfaces. It is now ubiquitous and quite rich in its support for sophisticated client-server applications, whether you use Macromedia's ColdFusion as the back end, or J2EE, .NET, or another Web service platform.

Developers of web sites and enterprise applications should consider crafting their user interfaces with Flash.

Dean Wampler is a Software Engineer with DRW Trading. He was formerly a Consultant, Trainer, and Mentor with Object Mentor, Inc.

Return to the Web Development DevCenter.

Copyright © 2009 O'Reilly Media, Inc.