Which Way Now? Web Development in the iPad Era.

Flash? No Thanks!

So it turns out Steve Jobs does not like Flash, and won’t be allowing it onto the iPad in the foreseeable future. This creates the first dent in the Flash player’s ubiquity for many years and leaves a more complex set of web development choices ahead of us.

Rather than get into the debate over whether Flash is good or evil, I would like to discuss what options are available for delivering rich interactive experiences on the web today. Most developers don’t have a philosophical preference over which tools they use, they simply want the technology that can provide the best experience while reaching the most users. With that in mind, let’s look at some numbers.

How Big is the iPad?

The iPad is selling phenomenally well and may be the herald of a new era in computing. That said, if we look at the web usage numbers for the iPad’s progenitors, we see that the usage numbers do not equate to the amount of media buzz these devices get.

In the last 12 months, mobile web usage accounted for 1.48% of total web usage, versus desktop usage at 98.52%.

Of that number 32% came from iDevices (iPhone + iPod Touch). That gives iDevices a whopping 0.45% of total web usage. Lets be generous and say the iPad doubles this usage in the coming year. That will give iDevices around 1% of total web usage in the coming year. Admittedly, mobile usage is about to explode and iDevices will be part of that, but I think it’s important to keep some perspective on the current state of the market.

What About HTML5?

Steve Jobs has suggested that we should drop Flash for HTML5. HTML5 holds a great deal of promise, however it is currently unsupported on the great majority of web browsers.

For example, based on current browser usage, 71% of web users cannot view the HTML5 video tag. This means that that building a website solely in HTML5 is not currently an option. Since IE9 will support HTML5, the IE9 adoption rates will be the deciding factor as to when we can start targeting HTML5

Where Does this Leave Web Developers Now?

So what should we recommend to our clients who want a brand experience or RIA today? It depends :)

  • If you can simplify the requirements enough, build it in plain HTML with a few jQuery animations thrown in. This will work in many situations. The truth is that many sites that are currently in Flash do not need to be. Most sites can get by with plain HTML, images and simple javascript animations.
  • If you need complex animations, interactivity, games, video, audio, web cam support, etc – build it in Flash. Your content will be viewable by the vast majority of web users. In addition, build a simplified HTML version for non-Flash devices. This is typically what we have been doing since the first web accessible mobile devices came around.

Looking Forward

Personally I find it hard to believe that Apple can single-handedly kill Flash when it is so ubiquitous on the web and has such a huge and loyal developer community. I still hold out hope that Flash will eventually come to the iPad in the same way that multitasking came to the iPhone. In the short-term, iPad users will be locked out from a lot of great content. Only when HTML5 browser support and tooling is broadly available can we start looking at developing RIAs with it.

[Credit to Noel Billing for pointing me to the StatCounter global data.]

Fix for Flash Builder Content Assist 'did not complete normally'

One of the best features in Flash Builder is the content assist. Start typing a class name and hit Control+Space for the IDE to suggest a list of valid class names. As a bonus it will automatically import the specified class into your file. Unfortunately in Flash Builder Beta 2 this functionality is broken in some cases. Often you will get an error like this:

“Content Assist” did not complete normally. Please see the log for more information. java.lang.NullPointerException

I found a solution that worked for me here:

1) Quit FB
2) Delete this folder: .metadata\.plugins\com.adobe.flexbuilder.codemodel [in the top level of your workspace folder]
3) Restart FB

[UPDATE - this fix seems to be only temporary. Once I imported some new assets from an assets SWC into my project, the error re-appeared. Anyone got a long term fix?]

[UPDATE 2 - The quickest fix is to close and re-open the FB Project.]

SimpleViewer 2.0 Released!

Big news over at SimpleViewer.net – SimpleViewer, the free customizable Flash image gallery has been upgraded to version 2.0. Check out a run-down of the new features here and grab yourself a copy here.

Welcoming Our New Google Overlords (or Why I Chose Android Over the iPhone)

With the new Motorola Droid announced today, the web is a-twitter with smartphone opinions. This is a topic that people care about, since picking a smartphone is essentially choosing which mobile computer platform you will be using 24/7 for the next few years. Last year, like many tech nerds, I was plagued with the choice of which new phone to get. For me it was a toss up between the iPhone and the G1 (the only Android phone available at the time). In the end I went with the G1. Here are the factors that were important to me and why Android won:

Aesthetics

There’s no doubt about it – the iPhone is one of the sexiest pieces of hardware ever built. It’s a beautiful object straight from the future. The UI is slick, elegant, simple and miles ahead of the competition.

In comparison the G1 is a utilitarian, brick-like lump. It’s a bit like comparing a 1980′s Land Rover to a brand new Audi TT. Which you prefer comes down to personal taste. For the record, no one cares how cool your phone looks. Anyone buying an iPhone to improve their chances of getting laid has a sad series of disappointments ahead of them.

Speed

Although TechCrunch routinely bashes the G1′s speed, I’ve never had a problem with either the OS responsiveness or the web download speed. it. In my completely unscientific testing, the web download speed on the G1 consistently beats my friend’s iPhones.

Especially in nerd-friendly cities like San Francisco, AT&T’s 3G network is completely saturated with all the other iPhone users uploading videos of their cat. In comparison, T-Mobile’s 3G network is a traffic-free 6 lane highway.

Development Platform

Even ignoring Apple’s bafflingly opaque app approval process, developing for the iPhone is a pain. The iPhone’s arcane development process involves mastering pointers and memory management in Objective-C. AFAIK these skills are not transferable to any other platform. Developing for Android requires Java on Eclipse which seems much more reasonable. Also, the iPhone app store is already completely saturated. With Android usage about to explode, now is probably a good time to get into Android dev.

Openness

If you use are using an iPhone with Apple’s MobileMe, your personal data (email, contacts and calendar) is only transferable to another iPhone. Android seamlessly syncs with gMail, gCalender and Google’s contact list. If you use these tools it is trivial to switch between Android phones, or for that matter any device that can access the web.

A good example of the two company’s different attitudes toward data portability is Google’s Picasa versus Apple’s iPhoto. Both are great personal photo management applications. The difference is iPhoto locks you photos into a single monolithic proprietary file whereas Picasa works with your existing photo file structure. iPhoto does not allow you to share your library with anything except for other iPhoto instances.

Since Apple make money off hardware sales they are keen to lock you into their proprietary systems. Google are platform agnostic and have a proven commitment to keeping data sharable. The Data Liberation Front initiative is a good example of this.

Monetization Strategy

There is a big difference in how Apple and Google make money, and this has a profound effect on the nature of their phone OSs.

Apple make money on the iPhone by selling the hardware and by taxing you every time you use the app store. The app store offers no trials and no refunds. Apple takes 30% of every purchase. Apple want you to buy as many apps as possible. They are re-using the iTunes model that has been so successful in generating revenue for them.

Steve Ballmer touches on this in his much ridiculed quote:

“The Internet is not designed for the iPhone. That’s why they’ve got 75,000 applications — they’re all trying to make the Internet look decent on the iPhone.”

There is actually some truth to this quote. If I have a fast and full-featured web browser why do I need a Yelp app? I can just go to yelp.com. Why do I need a dictionary app when I can go to dictionary.com? Why do I need to buy a bunch of crappy games when I can find millions for free on the web? God knows how much some iPhone devotees have invested in their iPhone in terms of app purchases alone. I prefer to buy the hardware once, then get the content for free. That’s the beauty of the internet.

Related to this is the fact that Apple won’t allow Flash on the iPhone. They have a very good reason – if Flash ran well on the iPhone, half of the apps in the app store would become redundant. In contrast Google just signed up for the Open Screen Project and are committed to making Flash run well on Android. For better or worse, Flash is tightly ingrained into the web and any device that doesn’t support it is half-cocked.

Google’s monetization scheme is a lot more vague, long term and possibly nefarious. They can afford to give away Android for free in exchange for the potential to make money from mobile searches. In general, Google’s plan is to become so useful and ubiquitous that they become an indispensable part of all of our lives. After that, who knows? Since they have a virtual gold mine in AdWords revenue they can afford to put their efforts into long term world domination. (As an aside, does anyone understand how Google makes so much money from text ads that nobody ever clicks?)

Reliability

The iPhone hardware is beautiful, but if it fails at the same rate that my iPods have failed then I would be buying a new one every 6 months. The G1 is built by HTC who have a reputation for building solid, reliable products.

In terms of data reliability, it’s not controversial to say that Google’s engineering team are second to none. By contrast, MobileMe had an inauspicious start and has been up and down regularly since. Cloud based data management is just not Apple’s strength.

So for me it ultimately came down to who do I trust my personal data with: Apple or Google? I decided to embrace our new Google overlords and have since shunted all my data to their servers. If and when Google turns evil please don’t say I told you so.

YouTube Overload

youtube demo

What’s better than a YouTube video? Sixteen YouTube videos – in 3D! :)

This is a for-fun, proof-of-concept demo loading in multiple instances of the new YouTube chromeless player and displaying them with Flash 10′s native 3D . Warning – this demo will probably run at a crawl and may crash your browser.

Flash Developer Toolbox Essentials

Toolbox
Image by Robert S. Donovan.

When working with other Flash developers, I am sometimes surprised when they are not aware of some dev tools that I consider essential. I thought it would be useful to list out the tools that I use everyday as a Flash Developer. All of these tools are free and cross-platform unless otherwise stated. None of this will be news to the seasoned Flash devs, but some will find it useful. Let me know in the comments if I’ve missed anything.

Applications

Desktop apps and browser plugins.

  • Firebug. This firefox plugin lets you view a HTML page’s elements load in realtime, among other things. Great for debugging dynamic data loading into a SWF. Essential for any web developer.
  • Flash Tracer. Firefox plugin to view your SWF traces in the browser. Invaluable.
  • MAMP (Mac) and WAMP (PC). MAMP is a one-click install personal webserver for the Mac. WAMP is the same for Windows. Useful for debugging load timing issues on your own box, especially when combined with a web-proxy throttler.
  • Charles and ServiceCapture. These web-proxies allow you to view your SWF’s dynamic data loads in realtime. They also offer throttling, which lets you simulate slow web connection speeds (both are not free).
  • IETester (PC). Allows you to run IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP. Good for debugging IE6 weirdness.
  • Flash Builder. Everyone has their own favorite ActionScript editor, and this is mine. If you are still coding in the Flash Actions panel, now is the time to stop – you won’t regret it! Flash Builder is an Adobe product so you know it’s going to be well maintained. As a bonus it uses the industry standard Eclipse UI, so the shortcuts you learn with it can be transferred over if you choose to develop in some other programming language later (not free).
  • Versions (Mac) and Tortoise SVN (PC). Source control is not necessary for smaller projects, but if you value your dev time and want to be able to keep multiple versions of your code available, it is a must. Versions (not free) is the nicest SVN client ever, and Tortoise is the most popular Windows SVN client.
  • Free Ruler(Mac) and JR Screen Ruler (PC). These little apps allow you to measure pixels on the screen without having to do a screen grab.
  • Pathfinder (Mac). A Finder replacement that is hard to live without once you are used to it. Includes tabs and a split pane for dragging and dropping. Not really a Flash dev specific tool, but I’ve seen enough people be amazed at seeing tabs in the Finder that it was worth including here (not free).

Flash Libraries

Why re-build the wheel? There are tons of great, free ActionScript libraries made available by generous and talented developers.

  • TweenLite. The fastest, most robust and easiest to use Tween library out there.
  • Away3D. The best 3D library out there. Although Papervision seems to win all the awards, from my experience Away3D has the most features and has the best documentation. Also has a great user forum.
  • casalib. A great collection of robust utility classes. Check here before writing that utility class!
  • SWFAddress. Has quickly become an industry standard for building flash sites that support deep-linking. Handles lots of gnarly browser specific issues so you don’t have to. Built on SWFObject which is so useful I didn’t even list it here ;)
  • Hi-ReS! Stats. A very handy little class to show when your SWF framerate is choking.
  • BIT-101 MinimalComps. A set of ActionScript-only UI components for use in non-Flex projects. Very easy to use and small in filesize. The code is also worth looking at to see how to build a super simple component framework.
  • as3corelib. A collection of utility classes by Adobe for handling encoding and serialization among other things.

Bookmarks

To round out this list, here are 3 webpages that I am always hitting: