Update 12th July:
Actually people are able to get around 60fps speed on Apple and Android devices using AIR framework. Which means that AIR based apps are as fast as Native apps
ref: http://www.flashrealtime.com/circ-game/

Currently, Mobile Application development is one of the hottest areas in software development.
Industry is looking for tools which can deliver on single code base and rapid development for multiple mobile platforms. iPhone and Android being the most important of those platforms.

If you or your team is thinking of Native vs. HTML5, this is not the post you want to read. Michael Mahernoff has written a wonderful article about that subject here.

I am going to share in this post my experience with developing cross platform native mobile apps using Adobe AIR and HTML5 with PhoneGap.

I have developed and submitted three mobile applications so far

Here are my learnings

For a simple mobile app like Desi which has just one screen and has a very simple interface, Adobe AIR is an over kill and should not be used.

Ragalahari is an application which has decent amount of screens and some of those screens need rich UI like navigating through galleries, music, and videos. This app gets its feeds from webservice calls and caches data locally for each launch.

I developed Ragalahari using Adobe AIR but, building it using HTML5 and JQuery Mobile or Sencha Touch would have taken a little more time because even though there are tools like DreamWeaver and Ripple which help in HTML5 development for mobile, Adobe’s Flash Builder 4.5 is much more mature and easy to use.

On the other hand, if I had used HTML5 to develop Ragalahari. It would be time taking but, easy to port this app to other platforms like BlackBerry, Symbian, WindowsPhone7 and Palm. Going forward, it is in the best interest of each mobile platform to improve their browser where as no one except Adobe has a big gain in supporting AIR/Flash on all mobile platforms.

ColorPuzzle is a simple number slider like puzzle/game, user will tap on little colored tiles to move them around in order to complete the puzzle. I would not recommend using HTML5 to develop games/apps like this one, may be in future when the mobile browser is as capable as desktop web browser, Sure.

Reason is, if I use Canvas specification of HTML5 to draw the puzzle, it will work efficiently in all mobile browsers but, I cannot attach tap events to each tile since canvas elements are not DOM objects.
So, if we need to use canvas for interactive elements, we need to capture the x and y of user’s tap and figure out on which element user tapped (in my case to figure out which tile user tapped on).

In normal web world we use SVGs to develop this kind of interactivity in browser but, for mobile, Android’s browser does not support SVG yet. Also animation and drawing is very slow on mobile browsers. The speed we get with the AIR on both Android and iPhone is around 20 fps (frames per second) which is sufficient for this app.

Watch this video to understand the low performance of Mobile Browsers when it comes to animation and drawing
http://www.youtube.com/watch?v=DUWo19BcC7s

Also, here is a good place (apart from Adobe’s articles) to start understanding how to develop optimum Adobe AIR code for Android and iPhone
http://www.roguish.com/blog/?p=214

So, my analysis is, if your Mobile App has significant drawing and animation which needs to have interaction with users,  HTML5 is not the way to go.
However, if your app is mostly text based content with CSS based simple animations and effects, AIR or Flash based solutions are an overkill.

In developer world there is this misconception in some minds that if HTML5 gets adopted widely, Adobe will lose big time.

I do not agree with that, because Flash and Adobe tools for Flash development are just a small part of Adobe.

Adobe is bigger than Flash, they make most of their money by selling tools to designers and developers. Their bread and butter is CS5, of which flash professional and flash builder are a small part.

Also for HTML5, Adobe is selling the best tools. Their latest version of DreamWeaver has JQuery Mobile and Phonegap integrated, which makes life so much easier for people creating HTML5 based mobile apps and websites. Among all the HTML5 IDE’s, I feel that DreamWeaver is the most mature, capable and easy to use.

Where as JQTouch, Sencha Touch and now JQuery Mobile are DOM frameworks which let you make cool UIs, nice animations, cross domain AJAX calls etc

As I predicted in my last post, JQuery mobile is here and it is pretty cool.
http://jquerymobile.com/
http://jquerymobile.com/demos/1.0a1/

Now, I think all the JQuery gurus will start using their skills to ship out cool looking Mobile Web Sites and Mobile apps using Phonegap and other similar Mobile App Development (MAD ?) Frameworks

Interestingly, in one of JQuery Mobile’s pages Phonegap is listed with browsers http://jquerymobile.com/gbs/ makes sense right.

Which one is the best? what should I use? should I be a master of all of them?
It is so confusing correct, let us explore why this is happening, then may be it will make more sense.

First of all, why do we need to come up with another mobile AJAX frame work, didn’t we go through all this for desktop browsers? can’t we use what we already know like JQuery or ExternalJS or whatever we prefer and are comfortable with?

The answer is NO because, we do not want all that extra code which will make the code work in any browser because it will make it slow on the tiny device which does not yet have the power of your computer (except for a couple of super smart phones). Also mobile browser is not a full browser yet in all platforms.

And therefore, we have a problem. No it is an opportunity, or a challenge. It is that challenge every programmer loves, how to make his code work insanely fast and visually pleasing on a device which has very little processing power and tiny hard drive.

Why do these many libraries come into existence?

Why cannot we developers play along and just pick one and go with it? we cannot, and that is good. We as developers enjoy pushing the envelope, that is one reason for so many libraries and frameworks.

Second reason is more of a cost benefit analysis. I started using PhoneGap.js and their tools to build my mobile apps, after a couple of apps, I realized that I did not really use much of anything that smart people at Nitobi have created for me to use.

Reason being that it was easier for me to write my own methods than learn PhoneGap’s or Brian Leorex’s cool XUI implementation. Because of this one reason, what will happen is after I create say 10 apps. In order to re-use my code, I will create a library and since I want to show off my skills I will release it out to public. Two or more of my friends will see it and  start using it and adding to it and before we realize, we create Another Cross Platform Mobile AJAX Framework.

So, where will this end? My take is that there is a huge number of hungry JQuery masters out there who right now do not have time to focus on mobile. But once a cool and complete implementation of JQuery for mobile comes out and more importantly once all mobile platforms start giving out real browsers, that is when the real fun begins. It is always the law of numbers in my view, more developers on your side, the more possibility of success for your libraries and tool sets.

It is the browser war all over again….

It may be iPhone vs Android or AT&T vs Verizon, or something else right now but, in future it will be a Mobile browser war. If and when the HTML5 standards are implemented and all browser come to a common ground with regards to implementing standards, then it will be which one is faster and which one is cleaner.

Now I do hope that all browsers will be as fast as Chrome and as standards compliant as Firefox and etc and etc…but, I know and you know it is not realistic to hope one browser will be ruling whichever browser you might like for whatever reason.

Apple will try to showcase Safari as having a leg up by telling the world that they have the most compliant and fastest browser, and as proof, will create a bunch of samples which has code that they will call “The Standards”. Microsoft will create a bunch of samples which will do amazingly cool stuff in IE mobile browser and other companies will follow.

It will be very similar to the AJAX library wars which started a while back when I first got excited about AJAX.

I truly hope to see the browser war end faster and in a better way than the last time and I do believe that the equation is well balanced this time around.

Let me know your thoughts and correct me if I am wrong in my analysis.

Happy Weekend

By reading and listening to human behavior researchers, I now strongly believe that Carrot and Stick approach not only does not work but also has a negative effect on your work force when it comes to Heuristic/Innovative Tasks.

Inherently all human beings and even monkeys for that matter are very curious animals. We want to learn new things, experiment and do the same old thing in newer better ways. So, where is the problem? why isn’t every one having fun innovating and making work more exciting?

The problem is with our perception, once we start seeing “If I do this, Then I get that”, our perception of fun task changes to “work” and we start focusing on the reward rather than focusing on innovatively solving the puzzle we have at hand and hence we loose the pleasure.

Also, when you are employing these techniques on kids to foster more learning, keep in mind that your actions are actually killing the intrinsic curiosity of the kid to playfully poke around, experiment and learn.

I would suggest to all parents, managers, would-be and wanna-be parents and managers to read Daniel Pink’s DRiVE

Here is a very useful flow chart from the book which will help you motivate your team and yourself to be more innovative and have fun doing everything you have to do.

Scanned from Daniel H. Pink's DRiVE

Now, some of you might be thinking that for boring cookie cutter jobs, Carrot and Stick is still the best approach for motivating people. I would like to respectfully disagree with you.

Let me narrate an experience I had as a kid in my high school to demonstrate that Autonomy works much better than Carrot and Stick when it comes to boring, routine tasks.

I was 15 years old then and my school was getting ready for the annual sports meet which was a huge deal.
Our school band was performing a show for which we needed to create about a 100  pom poms with glossy colored paper cut like thin strips and rolled on the edge of a stick.

We, a bunch of 10 students aged 10 to 15 were taken into a room of supplies by our arts teacher. She showed us an already done pom pom, and said I need 100 of these, I don’t care how you do it, just get them done.

Then I do not remember whose idea it was but we broke into 3 teams, created 3 different work flows for the same thing and went at it, we had so much fun doing it, I still remember the work flow I came up with and the one that my best friend at the time came up with. I still believe mine is better, and my memory says that I won the competition by producing better looking pom poms in shorter time than other two teams (but, I do understand that I cannot totally trust my memory after reading Daniel Gilbert’s Stumbling on Happiness).

At the end of all this, when we delivered the product, our arts teacher was so happy that she actually hugged us and gave us all one gulab jamun each that she had brought from home.

It was a boring job to begin with, we did not have to do it and the younger kids definitely could have done some thing better with their game hour. But the work turned out to be one of the best experience we all shared and I still remember it to brag about in this blog. By the way, I do believe that if our teacher told us that we would be getting a gulab jamun each if we did the job, we would not have had that great an experience.

Thank you to Mrs. Saxena, our art teacher who has taught me this important lesson.

So, the next time you need to assign a boring, mind numbing job to your team or to your kid, make it interesting like a game.

Have Fun

And here are my learnings and comments about another cool tool/set of tools which would enable me to build platform independent mobile applications cheaply www.phonegap.com

What is PhoneGap:

• PhoneGap will help developers create native apps for 6 platforms
  (Android, iPhone, Palm, Symbian, BlackBerry and Windows)
• These native apps will launch a chrome-less native browser on the device, the app development from there is simple HTML, CSS and  locally stored JavaScript
• PhoneGap also ships with some JS files for each platform which will allow developers to use platform specific features in a generic fashion so, PhoneGap will act as a gateway for developers to code in a simple and unified form in order to reach  different platforms

How rich and advanced can these apps be:
The apps can be as good as the native browser that comes with the mobile OS and the native capabilities a device offers. PhoneGap will not stop developers from using the native device capabilities, PhoneGap libraries and practices facilitate that very well.

Pain Points:

• Dev environment setup is a pain, for each operating system there needs to be a setup and dev and testing cycles it is just like developing for different browsers but in different code bases because you have limited resources to handle your JS
• Based on the device OS (or browser) version, rigorous testing needs to occur
• It is not a tool or lib set that will allow you to “code once and deploy to all” devices and OSs (Primarily because of the differences in browsers across platforms)
• All the issues that developers have with AJAX applications (deployment, maintenance, debugging, etc)

Why is it good to invest in PhoneGap?

• Use HTML, CSS, JS people to develop Mobile apps, cheap development
• In future it is in their best interest for every Mobile OS to improve their native browser
• When and If HTML5 features are available on all mobile platforms, PhoneGap and other similar alternative process adopters will be at a huge advantage
• PhoneGap / Other similar alternatives work best for  Android, iPhone and Palm devices. Windows 7 also will join this bunch because it has a newer and fuller version of IE
• Blackberry will also join because they hired a bunch of WebOS (Palm) developers and their new webkit based browser is very promising

Platforms that PhoneGap currently supports: http://rubyurl.com/jtNs

Best Process (my view and best practices as suggested by PhoneGap)

• Start different projects for all your target OS versions
• Create a base version which will meet basic requirements in all targets and then start adding cool features for particular devices and OSs
• Use QUnit for testing, try and follow test driven development
• Use command line tools and automate as much as possible for different code trees when ever possible as opposed to using and building with IDEs
• Use alternate approaches whenever possible
• Start with a mobile website as base and then branch out to native apps if it makes sense
• Check out more tips here http://planet.nitobi.com/

Resources for developers:

• http://wiki.phonegap.com/
• http://twitter.com/phonegap/
• http://groups.google.com/group/phonegap

Code Repositories:

• http://code.google.com/p/phonegap/
• http://github.com/phonegap/

Development Environment Setup:

• http://phonegap.pbworks.com/Getting-Started-with-PhoneGap-Palm
• http://phonegap.pbworks.com/Getting+Started+with+PhoneGap+(iPhone)
• http://wiki.phonegap.com/Getting-started-with-Android-PhoneGap-in-Eclipse
• http://phonegap.pbworks.com/Getting-Started-with-PhoneGap-(WiMo)
• http://phonegap.pbworks.com/Getting-Started-with-Phonegap-Nokia-WRT
• http://phonegap.pbworks.com/Getting+Started+with+PhoneGap+(BlackBerry)

Alternate approaches:
Flash Platform; JQtouch ; JQuery Mobile [lazy eval technique];  Dojo Build system ;
Emile for CSS based mobile animations;
Use Dashcode for iPhone to do JS and CSS animations

An Alternate UI framework
http://github.com/brianleroux/xui
http://xuijs.com/

Alternate to using SQLLite:
Create JSon docs and store locally
http://brianleroux.github.com/lawnchair/

Then, at Adobe Max 2009, there was a session about “Flex for Mobile Devices” I got very excited seeing that session because I realized after the release of Flash 10.1, I would become a Platform Independent Mobile Application Developer (yes, I came up with that loooong title ).

I have been telling everyone who would listen that Flash 10.1 is going to be a game changer and how I would develop once and deploy on all mobile operating systems (Windows Mobile platform, iPhone, Android, Symbion, Blackberry etc etc.)

Adobe did not deliver !

After all my marketing efforts, Adobe did not deliver they keep on pushing the release date for Flash 10.1 and the really hurting news pieces started coming in the past few weeks.

1. Flash 10.1 will only run on latest processors (Cortex A8 and up link)
2. Existing Windows Mobile 6.5 will not have Flash 10.1 (link)

People who are thinking I am missing the iPhone and iPad not allowing Flash 10.1 , that is not a big problem (see here) also I am not blaming Adobe for that move.

Open Plug was my Savior

Because marketing works, my colleague asked me if I can develop a simple application which will go on multiple platforms.
I quickly thought of  this French company which also presented in the Adobe Max 2009 (watch video here) . I said I will give it a try.

I set out to create a simple customizable RSS reader app which would work on multiple platforms, in 1 week.

With help of a graphics wizard at work, I was able to create the app for four platforms listed below in 1 week.

1. Windows Mobile
2. Android
3. iPhone
4. Symbion S60

If you want me to give a one liner about what is this Open Plug? here is what I would say
Open Plug is an Eclipse based plugin which would allow you to build in Flex and generate native code for multiple mobile operating systems.

The software is currently in Beta 3, they are supporting a small but powerful sub-set of Flex classes. Considerfing the amount of platforms/devices they are supporting, their excellent support to the developer community and the speed they are giving to traditional mobile application developers, I say they are doing a Kick-Ass job.

Keep up the great work  people or should I say awesome personnes, merci!

Now we can develop wp plugins for Android.

” Posted from my Android phone “

I have learned about it here, and so can you.

Also, before you can start building cool wave gadgets you have to do the following

1. Request and get the google sandbox account here (It takes about 10 days)
2. Download and add to libs the SWC from here
3. Go through the examples and start building cool gadgets in Flex

If you haven’t yet experienced the Google Wave, let me know, I have some invites left that I can share with you.

Let me know if you come up with a gadget, and I will do the same

Meet Ali Reza Manouchehri, CEO of MetroStar Systems

Come in here and learn more about the diverse bunch that I have the opportunity of learning with.