Columns

Product Review: Flex your UI

• July 1, 2004

Flex is a Web UI Builder (or RIA, Rich Internet Application builder) from Macromedia that runs as a presentation server in several Java servers, including Tomcat 4 and 5, Macromedia’s JRun 4, IBM WebSphere and BEA’s WebLogic Server, among others. Because it is a presentation server, one would expect Flex to be in the thin-client mold of, say, ASP, JSP, PHP or the new Java Server Faces (JSF). But Flex is one of the new breed of RIAs that is in a race to improve and polish the Web interface.

But why improve the Web interface? It has won a dominant position in system design because the Web UI’s thin clients considerably simplify the process of maintaining applications -- there is no need to download and maintain upgrades on thousands of PCs as is the case with fat client systems. Also, Web UIs are easy to operate and reuse, and they run cross-platform on a browser. And it is even starting to reach down to PDAs, tablets and other mobile devices.

However, the classic HTML-based interface is beginning to show its age. The form controls are just being updated with XForms and SVG capabilities. There is also growing demand for rich media like audio, animation and video to be integrated tightly with the Web UI. But perhaps the most serious problem with the Web UI is that many Web apps require so many page refreshes that response degrades, users become frustrated, security/reliability may be endangered and ever larger bandwidth loads are put on server-based systems.

Enter Flex and its RIA cohorts (Altio- Live, Droplets, DreamFactory, Isomorphics, Laszlo and Nexaweb, among others). These presentation servers each use some legerdemain to get a plug-in downloaded onto the client, which acts as a base for providing more standalone operations. Flex uses the popular Flash plugin+XML+ActionScript as the programming smarts for its thicker client. Other RIAs use Java+XML, JavaScript+XML and XML straight up. However, there are some distinct payoffs with using the Flash Player.

The Flash Player advantage
Macromedia’s Flash Player is available on 98% of browsers (50% and growing fast for Flash Player 7, which is required for Flex; it is a fast and easy upgrade). The variety of form controls and components available in the Flash Player is enormous. But most important of all, Macromedia knows how to programmatically integrate those controls and components with audio, animations, video and other rich media.

Flex and the Flash Player not only bring more form components and rich media to a developer building a Web UI, but also more local programmatic control in the form of ActionScript, which means fewer bandwidth-hogging page refreshes. Most importantly, ActionScript runs uniformly across all browsers and on all popular OSs, including Windows (all versions except Win 3.x), Mac, Linux, Symbian OS and Palm OS, among others.

XML: Key Flex ingredient
Few RIA vendors can agree on what technology to use to display components on the client (Flash in the case of Flex). But everyone uses XML for the UI component descriptors and for the data bindings of UI components to back-end data sources. Unfortunately, the XML UI descriptors are proprietary.

On the formatting side, it is good to see that Flex did not re-invent the wheel but used CSS in a mostly standard way. On the data binding side, standards are in mixed metaphor mode. The internal data binding MXML in Flex is non-standard, but the XML Web Services and use of DTDs and other XML data access methods largely returns to standards. Flex has three ways of accessing data and they all use XML.

Finally, XML means that everything is extensible and customizable. Likewise on the UI side, it is trivial to customize and create your own specialized components because MXML is easily extended -- almost like subroutines/ functions in programming languages.

Development in Flex will probably follow one of three approaches: The Visual Notepad method, because ActionScript, MXML and XML are easily handled in a standard editor; the Extreme Programming approach, with pair development and short test cycles (as noted, splitting MXML into small test apps is trivial); or Brady, the code name for the Flex IDE.

The Flex IDE
A Flex extension to Dreamweaver should be introduced by early summer. An Eclipse plug-in is due in the fall. Flex works well in the Dreamweaver environ. Dreamweaver handles XML and CSS, so Flex’s MXML files are a natural.

The Flex package comes with about 24 components plus 20 UI containers. Flex has also added 11 effects (transitions for any control that can be triggered by startup or other user-selected events -- think fade and zoom); eight validators that validate data entry for proper phone number, credit card, zip code and the like; and five formatters that provide extensive options for things like date/time, phone and credit cards.

If you get the impression that Macromedia has delivered a very rich client development tool on the first try, you are right. With just a couple of tutorials under my belt I was able to develop some Web interfaces that would have taken at least triple the effort in DHTML or ASP/JSP/PHP.

Now for the fly in the soup. The Brady IDE is still beta code, while the Flex server is final code. Also, when I used a 600 MHz P3 laptop with 256 MB of memory and 5 GB left of 25 GB disk space, I experienced response times of eight to 14 seconds on about 40% of all development operations. Developers should use a 512 MB Pentium at 1.4 GHz or better and defragmented disk space of less than 75% full. When I switched to such a machine, response time improved notably but still showed long delays about 20% of the time.

Likewise, tests of the Flex server showed that even on a lightly loaded 728 MB Win2000 server with plenty of surplus disk space and 10 Mbs Ethernet, startup time for Flex apps ranged from three seconds to 20 seconds, depending on the load and size of the Flex app.

Flex makes a very good case for RIAs that use a thicker client. The operational trade-off will be much richer clients plus good, near-standalone performance vs. slower startup time and, in the short term, upgrades to Version 7 of the Flash Player. The development trade-off will be faster development time vs. the complexity of three-tier development, including the learning curve of yet another XML dialect.

Also, Flex does not provide a complete thick-client solution. For example, online/offline switchability is currently not in the Flex cards (well, it is theoretically, but it is definitely non-trivial). And although we are seeing the presence of Flash Players in the mobile, PDA and tablet spaces growing, we are well short of a universal distribution. Nonetheless, n-tier distributed processing is sufficiently complex in its trade-offs that despite Microsoft’s pronouncement that thick is to be preferred to thin, organizations will find more than just one best way. They will, in fact, have to incorporate both thick and thin solutions as requirements dictate for the foreseeable future.

Fortunately, on the thick side, RIA tools like Flex incorporate a number of standards (XML, CSS and ActionScript/JavaScript) and are linked fairly tightly to back-end services through XML, Web services and direct connections. These virtues, plus a very helpful Flex IDE, mean that Macromedia has delivered a very auspicious first entry into the RIA space.

Macromedia Flex Macromedia Inc.
San Francisco, Calif.
415-252-2000
www.macromedia.com
Rating: 4 out of 5

Bottom Line: Flex delivers a very rich client dev tool on the first try. This tool and cross-platform RIA will only get better.

Pricing and Availability: Flex pricing starts at $12,000 for two CPUs, including annual maintenance.

Pros: 

• Developers can quickly create very rich client interfaces. 
• Flex apps are nearly standalone, breaking out of the time-consuming Web refresh cycle. 
• Flex apps run in any browser and on all flavors of Windows, Mac, Unix and Linux. 
• Flex developer runs on Mac and Windows in Dreamweaver.

Cons:  

• Back-end connections are still evolving. 
• Flex developer requires fast PC/Mac with 512MB of memory. 
• App start-up times vary widely. 
• Uneven coverage of PDA, mobiles and special devices.

Jacques Surveyer is a consultant and Web developer. See his take on RIA at www.theopensourcery.com.