Devthought - Guillermo Rauch’s Blog

Most people tend to believe Javascript and Flash are meant to be rivals. However, for some important tasks, Javascript falls short and Macromedia comes to the rescue.

Let’s revise some of the most remarkable scenarios.

Uploading

One of the most common Flash and Javascript interaction is probably file uploading in forms. There’s almost no way to customize the input style in a cross browser fashion. Firefox, for instance, makes it impossible (for security reasons) to trigger the upload file selection unless the user clicks the Browse button. Among many other limitations.

But Flash comes to the rescue, with some really stunning implementations. It’s worth mentioning open source implementations like Fancy Upload (MooTools), jqUploader (jQuery) and SWFUpload. Flickr’s new upload also takes advantege of this method.

Clipboard access

In most popular browsers, Javascript is not allowed to interact directly with the clipboard. The exception is the infamously insecure Internet Explorer 6:

Flash, however, allows developers to freely copy the text to the clipboard. Jeffrey Larson came up with the solution using a really small swf file from his Javascript code.

The code was further improved to support Opera, which results in complete browsers compliance. There is a MooTools implementation by Aaron Newton, and a Prototype one.

Photo editing / Drawing

Another area where Javascript is still not quite ready for is photo editing. Flash proves reliable for such a task, and it’s what is commonly used right now, while Javascript is being left behind.

Here is a quick example of Flash outputting SVG, and here is a full featured (but not freely available) image editor, Picnik, that really shows how suitable Flash is for this.

The main reason Javacript falls short here is its limitation to come up with most effects, which is the reason js-based editors will do that server-side, adding a delay and thus hurting the user experience.

Some cool effects can be achieved in Javascript alone thanks to the canvas tag. But we’re still far from close to full-featured image editing.

Sound

The only sure way to play a sound file in a crossbrowser, crossplatform way is nowadays Flash.

There’s a solution available for most frameworks: MooSound, GWT-Voices, jquery.sound. The most popular standalone ones are SoundManager 2 and JSSoundKit.

Persistent Data Storage

There might be certain scenarios where you’ll want to store large chunk of data in the client side (it could be for caching purposes, or for offline retrieval, for example. Flash is one of the most reliable ways, allowing you to store up to 100k seamlessly, and even more if the user authorizes it when prompted.

See dojo.storage for a nice implementation and proof-of-concept

Note: i’m currently working on a MooTools implementation of this.

Some scenarios where flash might be involved

Ajax: see the fjax project
Charts: see the YUI.charts project (and see flot for a sweet jQuery approach!)

Tags: Article, Browsers, Javascript on January 14th, 2008