JavaScript vs Flash, who will win the client side scripting battle?

May 20, 2011

Tags:

Over the past few years, pretty much ever since the iPod touch/iPhone came out and Steve Job's said no flash on iPhone OS (iOS now) and that flash was a resource hog, etc the debate between Flash and JavaScript for client side scripting majority has really started to pick up steam. It seems almost every other day there is something in the news about how bad one is or how bad the other is, with Flash tending to be on the receiving end as of late (I've weighed in on this several months ago, here and here). In the past year or so I've been spending allot more time working with JavaScript, mostly because of my current career being focused heavily on SilverStripe powered web development, along side working on personal projects such as Code Bank or Halo Stats Archiever. But even with my own personal work I've noticed a dramatic dip in my Flash/Flex web RIAs, why?

To be quite honest I think JavaScript frameworks such as my personal favorite jQuery, are starting to catch up. I'm not going to use the term HTML5 as the main driving force for this, frankly the way the web seems to have defined HTML5 as everything including JavaScript and CSS3 is wrong. HTML5 is simply the markup it has nothing to do with the way things are styled or the way interactivity with the page works (for the 90% of cases, with say the video player being an exception to this) but the markup that makes up the page. Which does allow for things like the canvas element or video playback with out the need of a plugin.

Getting back from that mini-rant, the majority of Flash web Rich Internet Applications (RIAs) are effect driven interfaces with non-standard components (ie a date picker which is not built into the browsers form elements most are done with JavaScript controls) and validation that guides the users to provide you with what you expect. Don't get me wrong I've built plenty of Flash web RIAs using Flex and they all work very well (well most do) and thy get the job done. But as I've noticed in the past few years JavaScript can accomplish most of what is being done in those web RIAs.

Now most people cry out that Flash uses much more resources than JavaScript, well of course it does, it needs to load up an entire framework/player where as with JavaScript its built into the browser and is loaded when the browser is opened. So for that reason alone its going to be much more processor intensive, not only that JavaScript engines are such a key portion of the browser now a days that they're heavily optimized for that browser look at Firefox 4 and the J├ĄgerMonkey JavaScript engine or Chrome and the V8 engine. Both Mozilla and Google have spend enormous amounts of time working on their engines and fine tuning them to perform to their best. Of course so has Adobe fine tuning the Flash player, which seems to be improving on a release by release basis which is what one would expect and it is much faster now (Flash Player 10.3) then it was when Flash Player 10 first hit the web. The cool looking often visually stunning transitions done in Flash can now be done with jQuery, and both still suffer from frame-rate drops or high cpu usage during complex animations.

So eliminating performance, what does that leave us? Usability well you can rule that one out, everything that people complain about with Flash RIAs being hard to use can just as easily be replicated using some HTML, CSS and JavaScript and be still just as unusable, so rule that one out. Ok so eliminating performance, usability now what could we be left with? Battery life well you can kill a battery in a mobile device (laptop, smart phone, take your pick) just as fast using JavaScript and doing the same things you do in Flash. So what's left... reliability.

One advantage Flash has over using JavaScript is the consistency and reliability of the Flash Player, every browser renders CSS, and HTML differently with varying levels of support for both. Even the engine powering the JavaScript can be different from browser to browser and not just how quick it runs (IE9 still being the worst out of the most popular, Chrome, Safari, Firefox, and IE). It doesn't look like this is going to change any time soon, browser makers can't agree on how things are displayed or handled even though allow of the most popular browser makers are part of the w3c. Not only that, not every user upgrades their browser when a new version comes out. Chrome's automatic seamless upgrades helps eliminate this issue but lets face it contrary to Steve Job's wants we as developers always have to build for the lowest common denominator. If you look at the stats IE7 still has about 7% of the browser share with IE9 being only about 2.5% (source as of April 2011), IE9 not only has dramatically less users then IE7 it even has less than IE6 which is still around 10%. Internet Explorer still dominates the browser share with around 55% (source as of April 2011) followed by Firefox then Chrome. In the tech industry we always like to be on the bleeding edge of new technology be it the latest and greatest video card or the latest version of our favorite browser some even resorting to using nightly versions of browsers so its no surprise when we forget that most users don't use the latest version of a browser aside from not knowing, people just don't like change (that's a whole topic for another discussion).

So when building a web RIA with JavaScript not only do you have to make sure your script runs well in every browser, but you also have to make sure the interface looks and works the same in many browsers not just the one your viewing this site in right now. As with Flash your still limited at the system level too, so if the system is an older machine or can't quite muster the power as your development machine some users will notice some slow downs or frame-rate drops. Of course with the flash player you have the over head on top of the browser, but this is minimal.

In a recent project for my work, the client selected a stock template from a well known template site. When we bought the template at work and extracted the files I began checking out some of the code and noticed much of it was HTML5 and allot of CSS3. Which at the time Firefox 4.0 was a release candidate who knows what version chrome was and IE9 was a whisper in the back of the head of the IE teams head. In Firefox 4.0 RC1 it displayed as the screenshots on the site showed, Firefox 3.6 had minor issues. However IE8... not so much, to say the least it was completely bust (see bellow), in the end we ended up reworking the entire template to make it work in the current browsers. Thus is the challenge of using just plain HTML, CSS and JavaScript it can be extremely hard to make sure it works across the popular browsers. I see this day to day, and there's always something new that crops up causing me to sometimes step back and say "why" then proceed to ask Google the same question or tinker with it till it looks right in most browsers (or close at least).

But when it comes to Flash, if you need something reliable and guaranteed to look right and function correctly on pretty much every machine its still your best bet at this time. Which is one of the major advantages to Flash vs JavaScript. Of course with Flash you can run into the odd user who doesn't have Flash installed in their browser or has it disabled, but remember JavaScript can be disabled as well. With Flash of course if your Flash RIA needs some feature in player 10.3 that is not in an older version of flash say (cringe) player 9, you can always use the provided update swf that is generated for you when you publish your rich internet application from the Flash IDE or Flex/Flash Builder. This tool will tell a user that their player is out of date and provides an easy way for them to upgrade.

I know what your saying you can do this with browsers to a point, you can notify the user that their browser is out of date using user agent checks but ultimately in both solutions its up to the user to do the update, of course with the Flash update tool it provides the user a clean easy way to update the player. You don't have to tell them to go to their browser maker's website and download the latest version which will likely look very different from the version they currently know and use. Which for some like many members of my family changing their browser say for example from Firefox 3.6 to Firefox 4 was a big change, even IE8 to IE9 was a big change and confuses non-technical users. With the Flash player as far as the user is concerned all that changed is some number, it doesn't change how it looks or how it works to them it just works. So telling a user they HAVE to upgrade IE8 to IE9 to use your website is not a good idea, and for some of the IE8 users IE9 is not even available to them so they are stuck changing browsers which can be even more jaring than just a update.

Of course don't get me wrong when it comes to mobile web sites JavaScript makes much more sense not from a battery standpoint or a usability standpoint but from a resource perspective. Mobile browsers are extremely optimized for the low resources of a mobile device. The Flash player is getting much better and is very good on mobile devices now, but it requires a different mind set working on mobile. You don't have that near infinite amount of memory or processing power that you do on a desktop or laptop. I know I'm contradicting my self a bit here, I said above that the performance of Flash isn't all that bad. Well it isn't when your talking about a machine with 2gb of ram and say a 2ghz processor, but mobile devices have processors measured in the mhz range most commonly and ram measured in the mb I don't think I need to tell anyone reading this the repercussions of that few resources even on a standard web page. The seemingly very basic full web page can bring an iPhone to its knees simply because it doesn't have the resources to render the content fast enough. Many time's I've had mobile safari just out right crash loading a web page, even my Nexus One struggles sometimes loading a full featured web page.

At the end of the day both JavaScript and the Flash player have their disadvantages, but both are a very viable solution and both have their place on the web and probably will have for the next several years. Both are very capable of looking very much the same or functioning very much the same as the next website, my former (now and then still) teacher Sean Morrow from the NSCC Truro Campus did an in-depth comparison on this very subject in his post titled "Battle of the Client Side Techs: Flash vs. Javascript". He does a great comparison on the subject and ends up coming out still liking both but knowing that JavaScript can do much of what he's been doing for years with Flash/Flex.

JavaScript/HTML5 still has a long way to go in areas Flash has long been king, for example video and animation. Youtube said on their official blog several months ago that Flash is here to stay on youtube for the foreseeable future as browsers just don't have the ability to do what they currently do with their player. With such a big player in the industry as youtube holding onto Flash and the lack of really smooth complex animations in JavaScript I really don't see it going away. It just won't be used for RIAs as much anymore but instead be more focused on video playback, animation and games. Remember Flash got its start as an animation tool way back when, scary part... I know people (cough Sean) who can remember Flash back then.

Posted in: Articles |