What You Need to Know about Adobe Flex (Part 1 of 2)

As an architect that works in a development house we get in new designers from time to time and the first question that they ask is “What is Flex?”

As a developer the answer is easy: Flex is an AS3 framework that is created by Adobe to help build Rich Internet Applications. (RIA)

As a designer the answer is a bit more difficult because for the most part you don't care - and shouldn't care - how a developer puts together your masterpiece into an RIA. It is very important though how an application looks and how the user interacts with the application - and that you get the project done on time - this is where Flex steps in. Flex helps you build wonderful RIAs by providing excellent and customizable building blocks tailored to making RIAs. Flex also provides in other ways...

• Flex is an Open-Source framework built on top of the Flash Platform
• Flex is Flash - runs on the Flash Player, specifically Flash Player 9 and up
• Flex includes a nice XML based markup language (MXML), easy to read and write
• Flex is Free*
• Flex can easily integrate into your current website or as your website
• There are no special requirements to deploying a Flex application or licensing costs, just run the SWF file
• Code Once - Deploy Everywhere!*

Flex is Free*

If you are enterprising you can build your Flex application completely from a command line tool. This can be tricky if you aren't comfortable with command line tools and you lose the benefits of working with an Integrated Development Environment (IDE). This is one of the reasons why Adobe build Flash Builder. It is an IDE that helps you build Flex applications, provides code completion and a wysiwyg, debugs applications, and gives you compiler warnings and errors on your code.

There is even a getting started in Flex guide provided with the IDE. Once you go through the getting started course you will be amazed at what you can do with Flex.

If you want to play with this IDE there is a 90 day trial of Flash Builder available from Adobe

Code Once - Deploy Everywhere!*

This is entirely due to the strength of the Flash Player but no matter the crazy layout you make or other odd visual effects you decide to dream up, the Flash Player will render it and render it consistently across browsers, desktops, and even mobile phones.

I would hope that you don't use the same layout for a desktop app to a mobile phone app but it is possible.

This should save COUNTLESS hours of cross browsers testing and worry as new browsers are released and upgrades are made. The Flash Player has been a consistant gem in a World of changing browsers.

Is Flex Flash?

The short answer is yes. Flex is an Actionscript library that runs on the Flash Player. When a Flex developer deploys their application it looks just like an other Flash Player (SWF) file. However most Flex developers don't sit and open Flash Professional to do their Flex development. Rather than a .fla file you will see a Flex developer using a whole host of .as files and .mxml files. Most likely you will see them use a program like Flash Builder or Eclipse for their development environment.

Wait! Isn't Flash only for Banner Ads and Video?

While there are an infinite list of banner ads and video players on the web relying on the Flash Player there is more to the Flash Player than video players and banner ads. Heck, many people are speculating how HTML5 will take over banner ads and video players. My response to that? Go for it!

Due to Flex and the capabilities of the Flash Player if every banner and video player were to move to HTML5 I would still have a job that is seeing huge growth due to it's dominance of the RIA market.

FYI As a Flex/Flash developer I have yet in my career to make a single Banner Ad or Video Player - I make applications.

The Flash Player is just a delivery software for your visual components - and very effective at it's job. These days the Flash Player runs content on desktops, web browsers, and mobile phones. What it is you decide to create is entirely up to you.

Flex Strengths

Flex has two very strong facets that make it perfect for your RIA needs - strong design centric architecture and heavy data lifting facilities. This marriage is perfect for you because with very little effort you can create some truly amazing experiences.

You may be wondering if it is so easy, then why does it take a developer at all? With Flex it is really easy to take the parts you have and put them together. The difficulty is in the creation of custom components, architecting large enterprise applications, and handling massive data manipulations. This requires specialized coding and an understanding of Object-Oriented Programming (OOP).

As you are learning Flex you may join the other designers that feel that learning OOP is the next logical step and continue to grow your development abilities.

Why Familiarize Yourself With The Flex UI

If you are getting into Flex by yourself and you aren’t comfortable building custom components or if you are a developer or are working with a developer and you are planning on building a library full of custom components – it is still highly important to familiarize yourself with the Flex UI provided by Adobe. The reason is simple – why rebuild the wheel?

If a button is already provided why go built your own?
If a slider is already provided why go build your own?
If a complex list is already provided why go build your own?

The simple answer is you shouldn’t, just understand what Flex UI components and capabilities are built into the Flex framework. By doing this you will save yourself and your developer vast amounts of time refraining from doing unnecessary custom work. This is one of the key strengths behind the Flex framework, reusable well made components that you can quickly integrate into your own projects.

Many times when working with designers I find myself educating them as to the capabilities and limitations of the Flex framework. After being given a composition I may tell the designer “I COULD do this and it would take me 10 hours OR we could make this one little change and it would take me 10 minutes.”

Sometimes it is the smallest change that saves the most amount of time.

By familiarizing yourself in the Flex framework you can understand the limitations when building your composition and also come up with additional capabilities that you may not have known were possible. Again, the more you know the better you are to the entire team.

flex designer Job Trends

Flex Designer jobs

By understanding the component set built into Flex you can “see” applications the way that developers see applications and this will only help improve communication (and timelines) between you and the developers out there. Also you can now add “Flex designer” to your resume.

Some Applications Made With Flex

The Flex ecosystem is continuously growing and to see even the smallest snapshot of currently available Flex applications I would point you to the showcase at Flex.org.

What you are seeing in the showcase is without question just the tip of the iceberg. I would say with no uncertainty that a major of the Flex applications in development are behind firewalls and internal to small companies and large corporations. Sadly that means some of the coolest applications out there I am unable to show you – but that also means that this is a growing market with huge growth potential requiring a variety of skill sets. Below are some great Flex based examples I can show.

A Few Noteworthy Public Applications:

GrooveShark

Sliderocket

TweetDeck

Kuler

Times Reader

Spatial Key

Acrobat.com

Flex Weaknesses

First let me say that nothing is perfect and Flex is no different – but things are getting better every day.

Styling
In the past styling Flex applications was difficult. Now with Flex skinning the process has become much easier, however not all Flex components can be skinned. This is definitely a pain point in the current version of Flex and something that Adobe is actively working on.

Memory
Whenever working with the Flex framework the initial download of your SWF is going to be roughly 500kb. Adobe has provided some facilities to bring down the download size of the initial SWF - but the Flex framework is still large. If you are working with a small widget you may not want to have the user download 500kb each time the widget is accessed. For large enterprise applications this download size is still just a drop in the bucket.

What about the iPad/iPhone/iWhatever?
As you may know, Steve Jobs has a real issue with the Flash Player. All rumors aside Steve has vowed that no Flash Player based applications will be allowed in the App Store and that Flash Player won't be coming to Safari on the iPhone.

As this issue is currently on it's way to a court based decision things may change but for now there are only a few ways to get your Flash based application running on the iPhone and iPad. Such options as the iPhone Packager and Frash are the only way to get your Flex application on the iDevices.

Right now you can get Flash Player on your Android devices if they are running Android 2.2 - also known as Froyo. Adobe is also actively pursuing running Air on the Android again focused on Android 2.2. The project called Air for Android is in public beta.

This completes the first part of a two part series on Adobe Flex.

Read Part 2 of what you need to know about Flex.