Flex-ible Programming With Adobe Flex

If, like most of us, you can remember going off to make a cup of tea while you waited for your favourite web page to load it’s hard to believe where we’ve got to. But more unbelievable still are the next generation of website applications that are starting to come out in response to the increasing take-up of broadband.

Adobe (better known for their PDF format) have launched Flex, which promises to revolutionise the way websites are built. This is a bit of a techy article, so buckle up!

What is Adobe Flex?

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems.

Flex allows us developers to build and create intuitive, interactive, visual applications for the web and desktop. Exciting applications in Flex give the end user a more satisfying experience while browsing the site and also the owner of the site hopefully more profit.

Applications built with Flex run using Adobe Flash Player and can also be built to run on the desktop using Adobe AIR. This allows Flex applications to run consistently in all the major browsers and operating systems. With 98% of internet connected computers having Flash Player 9 installed, this creates a massive audience for these applications to be run.

What are RIAs?

Rich Internet applications (RIAs) are applications built for the web that have the features and functionality of traditional desktop applications. Users can sometimes get overwhlemed and confused when websites do not perform in the same way as the desktop applications they are so used to. RIAs allow users to use sites in this way, a more intuitive way that they are already used to.

Benefits of using RIAs and Flex

• Cross browser compatibility is one of the main benefits of using Flex. It means that the application will look the same in all major browsers without the hassle of making small changes that hinder the functionality and appeal of the site just to suit a certain browser (no names mentioned IE6!).
• It is capable of handling the most demanding, data-intensive applications while performing at desktop application speeds. So no more pages hanging leaving to you wonder if the order you placed has gone through!
• The installation footprint is smaller.
• Updates/upgrades to new versions can be automatic or transparent to the end user.
• Most RIA techologies allow the user experience to be consistent, regardless of what operating system the client uses.
• Users can use the application from any computer with an internet connection.
• The applications are richer allowing things like drag and drop functionality and sliders to update search options.
• The range of functionality is great. From small components such as stylish and impressive image viewers that can be plugged into existing websites to full-scale e-commerce sites solely built in Flex.
• More sophisticated and well designed RIAs will maintain the same look and feel as desktop applications which the user is already used to.
• Asynchronous communication. The client engine can interact with the server without waiting for the user to perform an interface action such as clicking on a button or link. This allows the user to view and interact with the page asynchronously from the client engine’s communication with the server. This option allows RIA designers to move data between the client and the server without making the user wait. Perhaps the most common application of this is pre-fetching data, in which an application anticipates a future need for certain data and downloads it to the client before the user requests it, thereby speeding up a subsequent response. Google maps uses this technique to load adjacent map segments to the client before the user scrolls them into view.
• Bandwidth can be reduced a great deal as these applications are more intelligent than standard websites. This means that requests by the user can be sped up creating a slicker and more productive web experience.

Integration with Adobe Air for Offline Applications

The Adobe Air client allows rich internet applications to be run on your desktop, in the same way that applications like Microsoft Word and Excel do. This creates more opportunity for creating exciting and useful offline or online applications.

Imagine having a personalised website editor specific to your website where you can resize and crop images for your site or edit content for its pages whilst on the train on your laptop on the way to work. Then once you get to work and have the laptop hooked up to the net, you can submit the changes and the website will be updated.

Will it take off?

I think that this technology is the way the internet should move. I can already see sites built in Flex cropping up all over the place. They are often the sites that I step back and think ’this is a really great site’ and where you find yourself staying on the site for an extended period just to see certain functionality occur. What will it do next if I do this? What happens if I drag this here? Things like that. They encourage you to try things out that you expect to happen on desktop applications but not websites.

The benefits to using these RIAs are massive and can easily increase user experience and profit for the owner if implemented in the right way.

It is an area that I am personally taking time to learn as I believe it can prove useful to many of 9XB’s current and future clients.

Sites and Example Applications Built in Flex:

http://millionclouds.com/ - One of my favourite sites, very visually impressive, while being really simple and intuitive to use.

http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html - An example from Adobe to showcase the possiblilites of Flex. If you go to Products at the top and then start using the filter on the left the phones will start moving around the place. The compare functionality is a useful tool too.

http://examples.adobe.com/flex3/devnet/configurator/Configurator.html#app=76d2&38ae-selectedIndex=0 - Another example from Adobe to show how you can use Flex to allow users to personalise and preview products online.

http://examples.adobe.com/flex3/devnet/dashboard/main.html - This is an example of how data can be laid out and displayed. Dragging the windows around and minimising/maximising them just as in a desktop application. All of the charts and graphs used are inbuilt components available in Flex.

http://www.wiiinston.com/ - A site I built for a friend, shows simple but effective transitions available in Flex.