Using Adobe AIR to reach multiple devices: Conqu

About three or four months ago I wrote a blogpost about Conqu – an AIR application for managing tasks. Since then, Conqu has been one of the best demos I have at hand when talking about mobile development with the Flash Platform. Most people couldn’t believe that Conqu was built using Adobe AIR and Flex.

Back then, it was available only for Android tablets. But today, Conqu is available in:

  1. Android Market
  2. iTunes App Store
  3. BlackBerry App World
  4. Amazon Appstore for Android
  5. Nook Color

Running on an iPad:

Running on an Android Tablet:

Conqu is running today on three different OSes: Android (including Nook Color), BlackBerry Tablet OS, and iOS. And this is not all. They are working on making it available on Android phones, iPod Touch/iPhone, and desktop computers.

I tried the app myself on Samsung Galaxy Tab, iPad 2, and PlayBook. On each device it worked just great and looked beautiful at the same time.

I think that, with all modesty, this is a proof that the Flash Platform does deliver on multiple devices and OSes. Because the Conqu team used Adobe AIR and Flex, and applied the same tools and workflows for each version it was much easier to distribute their app across so many devices.

If you want to learn about mobile development with the Flash Platform make sure you show up at one of the events that the evangelism team is participating in all over the world. And of course take a look at the Adobe Developer Center page.

Nahuel Foronda of the Conqu team was kind enough to answer some questions I had. So here is a short interview with the team behind Conqu:

Me: What is Conqu?
Nahuel Foronda: Conqu is an easy to use yet powerful task management tool designed to help you conquer your inbox and get things done. With Conqu, you can organize the tasks by criteria that makes sense to you and then find the right task to do at the right time and place. Whether you are a GTD pro or you just need a simple to-do list, Conqu will provide you with all the tools you need.

Me: What is your business model for this app because you offer the application for free?
Nahuel Foronda: Conqu is free because we want to reach as much as people as we can. By removing the monetary barrier we believe that more people will try it out. From those that try it, some will use it once in a while but others will use it daily. People that find value on it are our real customers. They are the ones that appreciate other features like cloud synchronization between devices or the ability to interact with other APIs. Our business model is based on the synchronization service, which is a monthly subscription.

Me: Did you use the Flex framework or pure ActionScript?
Nahuel Foronda: We used the Flex Framework. It was a simple decision for us because we were already working with Flex in all of our previous projects. We really wanted to use a CSS system powerful enough to make the look and feel of our app as close to our Photoshop mockups as possible. Flex gives us that flexibility and it also has the advantage of being a great layout framework.

Me: Conqu doesn’t look like a Flex app. How did you do it?
Nahuel Foronda: We used Flex as the foundation but we created a lot of custom components. We used the List, TextInput, TextArea, Flex layouts and containers but the rest is all custom. All of the components (including those included in the framework) are highly skinned with ActionScript skins and graphics. The look and feel was very important for us, so that’s why you don’t find out-of-box Flex skins or regular Flex components in our app.

Me: The app not only looks great but performs greatly on all devices I tested. How did you do it?
Nahuel Foronda: The key for us was to use a very lightweight class as base for our components: SpriteVisualElement. That allowed our components to be very responsive. All the Flex layouts work great with this class, so we are able to include our lightweight components in any view. For the animations, we created our own layouts and use the Tweener library.
Another important optimization we did was to make all our skins in ActionScript as opposed to use MXML. In 95% of the cases we used bitmap graphics for things like backgrounds or icons instead of vectors to avoid runtime calculations.

Me: Your first supported device was Android tablet. How hard was to deliver the app for PlayBook?
Nahuel Foronda: It was not that bad, but it could have been great if we didn’t have to monkey-patch the Flex Framework to make the app that was running in AIR 2.6 run on the Playbook, which supported only AIR 2.5. I want to clarify that right now it is simple because both run the same version (2.7). At that moment, however, it took me some time to make it work. That’s what happens when you are working with a device that is not even out yet and is under development :)

Me: What about the iPad version?
Nahuel Foronda: That was perfect, very easy to make it work. We only had a couple things here and there but overall, it worked amazingly.

Me: Did you think about going native for Conqu? What made you change your mind?
Nahuel Foronda: Not really. We thought at some point about making an iOS-only version, but never three different versions. I don’t like the idea of developing an app three times for three different markets. We don’t really have the resources to do that. We also don’t have the time to develop and maintain three different platforms.

AIR allows you to focus on one code base with maybe a few differences in the layout, but still one code. What made me believe it was possible was the schedule app developed for MAX last year. That app was working very well on the small devices and because tablets would have more memory and CPU, if you built something for them, it would run even better. Now, a year later, the phones are faster too, so I believe we made a good choice.

Me: I know you have in the works versions for phones, Android and iPhone. How did you solve the problem of multiple resolutions/screen densities?
Nahuel Foronda: I’m working with the CSS queries that the Flex Framework provides. They give us the ability to use different bitmaps for the different resolutions and it is working very well for us because it keeps our code clean. Only the CSS has a reference to all the different resolutions.

Me: What about the team who build the app? I mean what experience did they have with the Flash Platform and mobile development and how large is the team?
Nahuel Foronda: We are three people on the team: a designer (Mark) that created all the mocks in Photoshop, a server side developer and Flex developer (Laura), and myself. Laura has great experience in ColdFusion and she takes care of all that plus half the Flex side (using Mate Framework). For example, she is in charge of all the model and most of the business logic in Flex. I’m complementing the team doing the optimization and all the ActionScript code such as custom component and skin development

Me: Do you have any other killer app in your pipeline?
Nahuel Foronda: We have a lot of ideas! But we are trying to focus on this one until we have released the desktop and phone versions.

Me: Is there anything you want to add?
Nahuel Foronda: Thank you so much for the interview and if your readers want to know more about the whole development process I have a very detailed post that I did not long ago.
http://www.asfusion.com/blog/entry/design-first-and-the-process-behind

2 thoughts on “Using Adobe AIR to reach multiple devices: Conqu

  1. Great article on the merits of mobile dev in Flex and the techniques used. I’d love to see mobile benchmarks between using vector/fxg and bitmap graphics/css queries. At the rate mobile hardware is accelerating, when does using vector graphics become more advantageous for maintenance and compatibility and less of an optimization issue(gaming aside)… Especially in an app like Conqu?

  2. Pingback: Conqu – Multiplatform Task Management App – Made with Flash Platform Tools | test

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>