Top 10 Mistakes when building Flex Applications

An article which Jon Rose and I wrote called “Top 10 Mistakes when building Flex Applications” was recently published on InfoQ.com. Let us know what you think!

Flex 3 Skin Transitions with Degrafa and AnimateColor

It is always fun when you discover new product features that you never knew existed. This happened to me last week as I was looking into Flex 3 skinning. It turns out that not only can you use a single class with states to define component skin states (like “up”, “down”, and “over” on a Button) but transitions also work with these skins! This feature has been noticed by others as well. But I figured I’d blog about it anyways - because it’s so cool!

Here is a quick demo:

I used Darron Schall’s “AnimateColor” effect to transition between colors. And I used Degrafa to draw the shapes inside the skin.

It’s super easy to add these types of transitions to your application! Right-click on the application to see the source code.

Have fun making your Flex apps even sexier!

Video: Building Turbulent AIR Applications on Linux

Adobe recently released an alpha version of Adobe AIR for Linux and a updated alpha 3 version of Flex Builder for Linux. I wanted to show everyone how easy it is to build and run desktop RIAs with Flex and Adobe AIR so I recorded a quick video. In the video I use Papervision3D and a component I created called “TurbulentApplication” to turn an ordinary AIR Application into an application which pitches and rolls in response to the accelerometer values on my Ubuntu laptop. While most AIR applications work on Windows, Mac, and Linux, this one only works on Linux because as far as I know Windows and Mac don’t have a way to read the accelerometer values from a file, like Linux. If you have Linux (and an accelerometer) and want to run the application you can download it here. If you want to download the source code for the TurbulentApplication component, you can get it here.

Check out the video (and let me know what you think!):

Bursting Bubbles

Bubblemark is a popular benchmark for some of the RIA technologies including Flex, Adobe AIR, Ajax (DHTML), Java Swing, Java FX, Silverlight, etc. I’ve been trying for a while to create a new Flex version of Bubblemark to show just how fast Flash Player and Adobe AIR are. But I’ve come to a few realizations… First, you can make benchmarks say whatever you want them to say.

When trying to optimize Bubblemark I found a few interesting things. First was that IE (and some versions of Firefox) limit the frame rate of Flash Player (and possibly other plugins). This means that while the Flash Player VM might be able to actually achieve 200+ frames per second the actual visual result might be only 60 fps. And maybe this is for good reason. Why do you need a visual frame rate faster than the refresh rate on a monitor? You don’t. And especially not for RIAs.

Graphic rendering performance is certainly relevant for RIAs but that is only one factor which affects overall application performance. As Chet Haase points out, Bubblemark lumps a number of different factors - calculation speed, rendering performance, and timer resolution - into a single “frames per second” metric. That leads to my second realization.

The frame rate of bouncing bubbles isn’t very relevant to RIAs. As Josh Marinacci of Sun says - “there aren’t any real benchmarks yet for rich internet applications.” I think that my Census RIA benchmark is more pertinent to RIAs than bouncing bubbles. Census benchmarks how quickly an application can get data from a server, parse that data, and render the data in a datagrid. Sorting and filtering are also important benchmarks that I’m working on integrating into Census. Today the Census app has various Flex and Ajax tests but I’m also currently working on adding a Silverlight test, an Ext JS test, and an updated Dojo test. I’d love it if someone would create a Java FX version as well.

Just for kicks let’s go back to Bubblemark and see what I was able to come up with (with help from Chet Haase). I created two versions of the new Flex Bubblemark application. You can run each version in the browser (Flash Player) or on the desktop (Adobe AIR). The results will vary between the web and desktop versions due to the browser throttling. The first application will only move the bubbles once per frame. This is similar to the original Flex Bubblemark application. If the browser is only letting Flash Player run at 60 fps then the maximum fps will be 60. Adobe AIR seems to limit the fps to 250 but I haven’t yet confirmed that. With both of these versions CPU utilization should be pretty low since they are being artificially throttled. The second set of applications moves the bubbles as many times as possible per frame. The appearance of these might be choppy since the bubbles only get rendered after being moved potentially hundreds of times. The second set of benchmarks is more real world if you are interested in VM processing speed as opposed to resolution of the timing mechanism. However a third set of tests which is probably the most useful and that I haven’t yet written would calculate how many bubbles can be moved once per frame and maintain 60 fps. That kind of metric is probably relevant to RIAs that need to do a lot on every frame. But most RIAs I’ve seen are more concerned with the speed of data processing. Here are the new Flex Bubblemark applications:

Single Move Per Frame: Web | Desktop (requires Adobe AIR 1.0)
Many Moves Per Frame: Web | Desktop (requires Adobe AIR 1.0)

(Flex Bubblemark Source Code)

Benchmarks are only useful when you apply them to your scenario. Is the performance good enough for what you need? Are your users able to run what you build? There are thousands of RIAs which run in Flash Player and now hundreds of Adobe AIR applications. For the millions of users of these applications the frame rate is fast enough and the VM performance is superb. For the developers of these applications the Flex tooling enabled them to efficiently build these applications. Not only do the runtimes and the tools work on Windows, Mac, and Linux - the runtimes and core development tools are free. There is more to choosing a platform than the speed at which a runtime can bounce objects around the screen. Sorry if I’ve burst any bubbles.

Around the World with Flex and Adobe AIR

Over the next few months I’ll be going around the world (literally) speaking about Flex and Adobe AIR. Here’s a quick rundown on where I’ll be:

Wednesday March 25 in Las Vegas: TheServerSide Java Symposium - Co-presenting with Eddie O’Neil from BEA

Thursday March 26 in Philadelphia: Emerging Technologies for the Enterprise - Porting from Web 1.0 to RIA in the Enterprise

Thursday April 3 in Bangalore, India: Adobe RIA Architect Summit 2008 - Best Practices for Building Flex/AIR applications

Tuesday April 15 in Atlanta: BEA Dev2Dev TechDays - Developing a Rich UI with Flex in Eclipse & Connecting a Flex UI to the back-end SOA (The Dev2Dev Tour is also going around the world with many other great Adobe speakers.)

Wednesday April 16 in New York: Salesforce.com’s Tour de Force (Also going around the world with other Adobe speakers.)

Friday April 18 in New York: Flex Camp Wall Street - Offline Reporting in Rich Internet Applications & From Tags to Riches with Shashank Tiwari

May 5 in San Francisco: CommunityOne - Hanging out with my Redmonk friends and possibly a session

May 6 - 9 in San Francisco: JavaOne - On Wednesday Chet Haase and I will be doing a late afternoon session at the Metreon followed by drinks and pool at Julian’s. Also you won’t want to miss Stephan Janssen’s presentation “Parleys.com: An Adobe Flex/AIR and JavaFX™ Case Study

June 25 in Zurich, Switzerland: Jazoon 08 - Rich Internet Applications with Flex and Java

There are also a number of other great events going on that other Adobe people will be speaking at, but unfortunately I couldn’t fit into my schedule:

onAIR Europe Tour

360|Flex Europe April 7-9, 2008 in Milan, Italy

And others…

I hope to see you somewhere along the way!

Video: Flex 3 / Adobe AIR 1.0 Pre-release Tour

In case you missed the Flex 3 / Adobe AIR 1.0 Pre-release Tour that went on around the world in January you can watch a recording of the session Serge Jespers and I did in Amsterdam. It starts out in Dutch but soon switches to English. You can skip ahead by clicking on a topic on the bottom left, then clicking the “Bekijk deze sessie”. Let me know what you think.

New Flex Screencast and VideoCoverFlow Component

For the Flex 2 product pages on adobe.com I recorded a screencast of a Flex app being built in 11 minutes. For Flex 3 I recorded a new version of that screencast. In the new version I used Doug McCune’s CoverFlow component but extended it to easily support playing videos. Check out a demo of the VideoCoverFlow component and right-click to download the source code. For those trying to use the VideoCoverFlow component - the implementation has changed slightly since I recorded the screencast so check out the myTube application for an example of how to use it.

Thanks Doug for the CoverFlow component.

3… 2… 1… LIFT OFF!

Today Adobe launched Flex 3 and Adobe AIR 1.0 – the most mature and comprehensive platform for Rich Internet Applications in existence.

The news of the launch is everywhere but I wanted to point out a few of the most exciting things related to this launch.

The Flex SDK and BlazeDS are now officially open source.

InfoQ has published an interview with me on the Flex 3 launch. They have also posted an interview with Kevin Hoyt on the AIR 1.0 launch as well as an overview of today’s announcements.

Salesforce.com and Adobe have launched the Force.com Toolkit for Adobe AIR and Flex.

Not really related to the launch but also very exciting – Chet Haase, Java Swing guru and co-author of Filthy Rich Clients has joined the Flex engineering team.

This launch is the biggest RIA launch ever! I can’t wait to see what you build with these awesome technologies!

Announcing the Force.com Toolkit for Adobe AIR and Flex

Almost a year ago I began working with Ron Hess and Dave Carroll from Salesforce on the Flex Toolkit for Apex - a port of the JavaScript libraries for Salesforce.com’s web services. Since that time the toolkit has matured and been used in numerous production applications. Today I am pleased to announce the new Force.com Toolkit for Adobe AIR and Flex. This new toolkit build on the Flex Toolkit for Apex and adds additional functionality for the new Adobe AIR runtime for desktop RIAs.

For more information on the new toolkit check out a tutorial I wrote on how to use it. Also visit the new Salesforce page on the Adobe Developer Connection.

It was very impressive seeing all of the amazing applications that were built with the original toolkit. I can’t wait to see what you build with this new toolkit. Let us know how it goes!