How Flex can transform the user experience on the web

Now that the industry has turned its attention to the client-side and the user experience, the quality of web user interfaces can be expected to improve at a very fast pace after ten years of virtual hibernation.

In that context, Flex offers a series of unique features that can profoundly transform the way people interact with web applications. These features include:

• Expressiveness (vector graphics)
• Performance (JIT compiler)
• Real time (binary sockets and pub/sub messaging)
• Rich media (video and audio streaming)
• Offline support (local storage and desktop client)

None of these features is unique in itself. What is unique is that all of them are available together in a ubiquitous and extremely lightweight runtime environment (the Flash virtual machine) that is available today in all major browsers across all major operating systems.

Expressiveness

One feature that sets Flex apart in terms of expressiveness is the availability of vector graphics. Using vector graphics, lines, shapes and images can be represented using geometrical formulas instead of bitmaps. Using Flex, you have full access to the vector graphics API, but most of the time you simply use the components in the Flex framework which already leverage vector graphics extensively.

For example, if you need to draw a red, semi-transparent panel with rounded corners, all you need to code is:

Although nice and concise, this first example is not revolutionary: You could get the same result by slicing images. Vector graphics, however, can have a more transformative impact on user interfaces: they allow you to stretch, shrink, rotate, flip, or change the shape of objects in any possible way. In other words, they allow you to make user interface objects behave like real life objects.

A simple example of an application leveraging vector graphics to make a user interface element look like a real life object is the Flickr roulette built by Ely Greenfield:

http://bridge.quietlyscheming.com/flickr/ajax

This is a proof-of-concept, but it shows the potential. Vector graphics are helpful in a wide variety of applications. For example, in a visual dashboard, they allow charting components to be redrawn and animated at the client-side, helping the end-user to better understand data trends and transitions. Check out a simple example here:

http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html

Imagine the user experience if every click or drill-down required the charting components to be regenerated at the server-side and then brought back to the client.
Vector graphics make these smooth and animated transitions possible. But again, you don’t have to deal with a low level drawing API: these behaviors are encapsulated in the charting components.

Performance

Poor performance and the lack of a just-in-time compiler are often pointed to as major shortcomings of the browser. This is another area where Flex and the Flash Virtual machine can make a difference. Flex applications are delivered to the client as bytecode, which is executed by the Flash Virtual Machine with the help of a JIT compiler. This can make a significant difference in code execution and enable “desktop applications”-like performance on the web.

Performance is critical for both consumer and business applications. In a consumer application, it helps produce a fluid user experience. In business applications, it can for example help process large amounts of data with “desktop applications”-like responsiveness while preserving the benefits of the web deployment model.

Real Time

The browser’s request/response model is not great at listening for events initiated by server processes or by other clients. The Flash Player supports binary sockets, enabling real time bi-directional communication with any socket server.

The Flex Message Service builds on top of this infrastructure and provides a complete publish/subscribe messaging solution, allowing messages to be exchanged, in real time, between thin clients and servers. The Flex Message Service also integrates with existing Enterprise solutions systems such as JMS-based systems.

The messaging and real time infrastructure available in Flex enables collaboration and data push applications to be built in a scalable and reliable manner while preserving the lightweight web deployment model.

Rich Media

Video and audio are fast becoming key components of many business and consumer applications. Video on the web is not new. However the user experience is often far from optimal: wrong version of the media player installed, disruptive multi-megabytes download to install the right version, limited options to interact with the video (beyond the traditional VCR buttons), limited interactions between the video and the rest of the application.

The Flash Player includes media playing and streaming capabilities. Because it is available on about 98% of computers connected to the Internet, it is in fact (and by far) the most ubiquitous media player on the web, which is why it is being adopted by the major video sites such as Google Video and YouTube.

Using Flex, video can be a lot more than the passive streaming experience we are often exposed to on the web… it can be tightly integrated with the rest of the application. The video can trigger events during playback, and drive the behavior of other components of the user interface. These capabilities enable a broad range of new innovative and highly interactive applications (interactive video tutorials, interactive “ask-the-expert” series, media portals, in-context videoconferencing/videochat, etc.)

Local Storage and Offline Support

Flex applications can store data at the client-side in a local data store (known as local shared object). The application can access (read/write) the local data store while disconnected from the network.

The lightweight desktop player currently under development (and code named Apollo) will also allow you to run Flex applications outside the browser. (You can find more information about Apollo here.)

Transforming the developer experience

There is one more aspect of Flex that deserves to be talked about. This one is not about transforming the user experience, but transforming the developer experience… Developing applications including the innovative capabilities listed above is actually easy. The Flex programming model is both powerful and elegant: a combination of an XML declarative language to layout the user interface of the application, and ActionScript, an ECMAScript-compliant programming language. The Flex programming model also includes a class library of 100+ components.

It’s hard to describe the productivity of a programming model with words, so here are a few examples:

You need to invoke a method in a Java object deployed in the middle tier and display the result in a DataGrid?

You need to generate a line chart using data retrieved from a Web service?

You need to stream video?

You need to parse an XML document and grab the value of the zip node in the 6th employee node? Simply use the following E4X (ECMAScript for XML) expression:

employees.employee[5].address.zip

You need to create an panel that can be expanded (using an animation)? Simply create a panel with multiple states:

You need to subscribe to a JMS topic and execute a method every time a message is published?

Summary

There are many other and more granular reasons to use Flex for building rich internet applications (Richard Ziade has a good list here), but at a high level, I think of expressiveness, performance, rich media, real time, and offline as the Flex features that can profoundly transform the user experience on the web.