Trying HTML5 as a Flash developer
// February 22nd, 2010 // Experiments
I chose that one because I knew it would be possible, its not to complicated and it has a little bit of everything: Loading external data, scripted animation, custom interactions and it needs a decent amount of computing power.
I never did any real JavaScript, so I went to w3schools.com and browsed thru the JavaScript tutorials and started coding. It took me +- 8 hours to to finish the job: the HTML5 version.
My opinion
But first a disclaimer: I only have one day experience with JavaScript. Correct me if I say something wrong.
Possibilities
Its cool how can manipulate the DOM elements, I really loved that. And yes, It can and will replace some of the Flash out there. But there are sill a lot of limitations.
The canvas element is not an alternative for Flash. There is not something like a display-list and no mouse-events for separate elements. But I guess you can emulate that with a lot of layered canvases and other DOM elements, combined with mouse position calculations etc, but that’s going to be a mess and I don’t know if my cpu will like that… I’m also missing webcam access, decent sound handling, 3D (webGL will do that, but it won’t be in IE9), real video integration etc, the list goes on. You can say that they are details, but I used those things in almost every recent commercial project. At this point HTML5 would be a step backwards for me.
Performance
Comparing the Flash and the HTML version wouldn’t be fair. I probably did some stupid things in the HTML version, and I know I did some stupid things in the Flash version (which is a couple years old). In many ways the JavaScript version handles things smarter than the Flash version. The least thing you can say about the Flash version is that it wasn’t optimized for speed.
But I was quit surprised about the JavaScript speed. It’s decent in a modern browser. I was expecting that I had to make a striped down version (with less nodes) But it seems to work fine. But HTML5/JavaScript is no miracle, it uses a lot of CPU for this and it will crash if you have an older browser or slower computer.
JavaScript
This is my main concern with the hole HTML5 thing, sorry guys, but JavaScript sucks. People who say that JavaScript is the future of the web obviously haven’t done some real programming in it. The dynamic objects, the loose typing, the prototype model, the silent failing, they are all a real pain in the ass. For those old enough to remember, JavaScript feels a lot like/is ActionScript 1…
It’s doable if you make a 500 lines project, but if you need to do a 10,000-100,000 lines app/website (which I do daily in AS3) it’s not going to be funny any more.
Mobile Safari
Mobile Safari can’t handle it on an iphone. It goes really slow. But you can’t compare a normal cpu with a phone cpu. And I didn’t want to write about this, till I noticed something very strange and disturbing when I was testing it on the iphone.
Take a look at example below, and try to drag both images:
The left image just reacts as you would expect from an image in a browser. With the right image, I stopped the default browser behaviour, and made my own drag.
This is something very useful. Besides for dragging, you need this functionality if you want to make a html5 drawing app or, and this is the interesting part, if you want to detect mouse/touch gestures
But what seems to be the case : This doesn’t work on Mobile Safari! Does this mean that Apple is blocking html touch functionality in Mobile Safari? It seems so. This wasn’t right. Thanks Ryan for pointing that out! There seems to be good touch support in JavaScript/on the iphone, even multi touch. Which is very cool! -> http://www.quirksmode.org/m/tests/drag2.html
They took our jobs!
You can’t ignore that some Flash developers out there are starting to worry about there future. But I don’t think you have to. If there comes a day when Flash will be obsolete (and I don’t see that happen soon), we’re gonna be excellent JavaScript developers.
I never did any JavaScript before, and I sill managed to make that example in one day. I’m sure it’s not perfect, and I probably made a lot of beginners mistakes. But I know it won’t take me long to make the switch.
As a Flash developer you can script advanced animations and interaction and UIs from scratch. You know your math. You can create large and complex client-side apps. You know how to be creative and create great user experiences with a limited tool-set. And you really love to do all those things.
It’s that combination of talents that made us leave HTML for Flash in the first place. And I think that those talents make that Flash developers can and will kick most HTML’ers asses when it comes to JavaScript development.
So, if that day comes, there not gonna take our jobs, but were gonna take theirs. 
Will I do more JavaScript/html5
WebGL is definitely still on my to-do list, but apart from that, I think I will stick with Flash for now. I have some pretty cool commercial projects coming up and Flash is still is the tool of my choice for experimenting. 
14 Responses to “Trying HTML5 as a Flash developer”
Leave a Reply
Search
Spotlight
Cube Construct - iPad app
Cube construct is a 3D Pixel editor for the iPad» get it here for free » Bog post & source code
The Logic Lab
The Logic Lab is a node based application for simulating simple circuits of logic gates in the browser.» The Logic Lab
Twitter Friends Browser
A Twitter app smaller than 5k to browse thru your twitter friends» Have fun browsing!
The Doodle history
» Become a part of history!
Webcam Games
Neuro Productions made some cool webcam games» Puppy Slam» Bunny Zap
I’m with you on the loose-ness of JS vs AS3. Although some frameworks would help abstract it into a tighter format. pipwerks pointed me to mootools at one point as a solid js foundation. Here is a good write up on how it helps.
http://jqueryvsmootools.com/
If i was rewriting my company’s tools in JS i would probably use this with a few visual interaction frameworks.
Thanks for doing this Kris, it is a welcome effort:)
We Flash devs are spoiled with our auto-completion, debugger, live error reporting & strict data typing. I see a lot of the banner-type stuff going the way of JS / HTML 5, but doing anything substantial would be a nightmare to manage as you mentioned.
In an ideal world Flash could take my AS3 and generate Canvas / JS code! Then, I could use the same IDE to create HTML5 sites as well as Flash, AIR & iPhone apps.
Just to clarify,
The “ES3 vs. ES4″ debate primarily surrounded dissension from Microsoft and Yahoo!, not Apple.
More reading can be found at http://weblogs.mozillazine.org/roadmap/archives/2007/10/open_letter_to_chris_wilson.html
That being said, HTML5 certainly has its place on the web, but somehow it has become a corporate pissing contest that makes very little sense to the informed consumer. Unfortunately, the uninformed consumer is far easier to sway, and is likely to be part of the marketing department at your favorite revenue-generating client. The “public perception” battle of Flash is far more dangerous than any functionality replacements HTML5 might bring.
The louder the talking heads become, the more I trepidations I have about the economic future of our community.
Although you make many valid observations, you overlook a lot as well. No worries, it’s your editorial.
Flash has the benefit of being developed by a single vendor that controls the runtime and that is a huge win. Many web technologies are hobbled severely by legacy browsers and/or vendors that move slowly ( Microsoft ), and of course, companies that remain on IE 6. It really sucks for web development. Flash also has a bunch of sweet tools, again the benefit of a commercial vendor behind it to drive things forward.
Javascript itself… yeah, it leaves a lot to be desired, but if you want to know why it is what it is, aside from the browser maker issues, you should check out YUI Theater talks given by Doug Crockford. He gives an excellent history on it. Yet again, it comes back to the way things work in the real world. Flash developers are lucky to live in a little bubble where they don’t have to worry about the horrors of legacy support. Curse you!!!
Given some time, the emerging technologies( WebGL, Ecmascript 5, etc. ) will mature and become very viable tools for rich content. Adobe will evolve right along with it, I’m sure, but they need to keep innovating.
Lastly, I am partial to more open technologies for the true cross-platform support. I develop Web applications in Windows with .NET, Java on Linux, and a lot of other things. I use a Windows machine at work, but use Linux at home. Let me tell you, Flash sucks in a most horrible way on Linux. HTML 5? It works great.
Ok, final blabber… I’d like to see everything succeed. I want to develop cool things, and I want to have the ability to choose the tools and platforms that support everyone, not just who a given vendor decides to support.
Thanks for your perspective.
Nice Job…
But, 65% of CPU in
Intel Core 2 Duo 2.40GHz
FireFox 3.5.8
Windows XP SP3
HTML5 – : (
The advance of the html standard is a great thing. Adobe will continue to innovate with Flash as it has for the past 10 releases and build better tools and services. Adobe will also do the same for HTML. When fully deployed HTML5 represents a runtime and Adobe will build tools to make it easy to build great experiences.
Many have a deep misunderstanding of Adobe’s core business, we are not “The Flash Company”, we are a communications company. We help companies, designers, and developers build engaging experience across screens regardless of medium. I think the key will be HTML5 + Flash in the coming years.
Ted Patrick
Adobe Systems
Honestly for your example, canvas was probably the wrong choice. This would of been better suited by using SVG, it would of solved one of you’re gripes about not having events triggered on different elements. SVG is xml based so all items are separate DOM elements that can have different events fired, plus it’s vector based so it scales nicely.
Anyway it’s refreshing to see a constructive look from the other side of the fence. Cheers.
One more thing you’re example for the mouse events on the iPhone is flawed and ill informed. Apple isn’t stagnating the open web by not allowing mouse events it has the equivalent touch events and gesture events available in JavaScript, which makes sense as it a touch device and not a mouse/cursor based device. See this page in an iPhone http://www.quirksmode.org/m/tests/drag2.html
@Tom: you are right about the ES4 debate, I removed that part. Tnx!
and yes, the current battle is a battle about perception not about the reality. With a lot of invalid misinformed argument from both sides( I also made some wrong assumptions in this post, sorry). The sad part about that is that everyone is gonna loose. Both users and content creators.
@El Duce: I’m also for open technologies (and my home computer is also a Linux, I know the pain of the Linux FlashPlayer
) And I would drop, Windows, Apple and Adobe the moment there is an open alternative.
I watched the Doug Crockford presentation: JavaScript: The Good Parts ->http://www.youtube.com/watch?v=hQVTIJBZook
It was very interesting. But I wasn’t really convinced about the good parts, and the bad parts are worse than I thought
@Ryan: Thanks for pointing out my error, i fixed that. And SVG can probably solve some of the problems I have. But the hole html model is not made for rich content. And both SVG and the Canvas are not gonna change that. Its going to be a pain to try to emulate the things I do in Flash now.
And yes, they are both valid technologies. But I don’t see one of them replacing the other at this point. That was the point I tried to make
HTML5 doesn’t replace Flash and Flash doesn’t replace HTML.. different tools, different uses..
I code both things (JS and AS3) and for complex things AS3 helps a lot organizing the code and has many nice features (compiler and error checking being one of the major things) but it also adds a lot of complexity to simple things that maybe you didn’t needed, and the cool things about JS is that a really nice SCRIPTING language, easy to learn, simple and get things done…
If you want to learn how to code JavaScript in a proper way and understand why things works this way I recommend reading: http://www.amazon.com/Professional-JavaScript-Developers-Wrox-Guides/dp/0764579088 – technical and accurate, good book for mid-level/experienced developers.
Zeh Fernando posted something interesting a few weeks ago about: http://zehfernando.com/2010/something-i-just-remembered/
Just to be a jerk, your example isn’t really HTML5, it uses the canvas tag but it has the wrong DOCTYPE (xhtml transitional)..
PS: Canvas is like a BitmapData and SVG is like a Graphics Object..
Keep the good work!
Thanks for the info Miller,
And yes, I’m aware of the wrong doctype
Btw, I love your swffit. I use it a lot .
They took our jobs! o/
There is one more issue that people have completely neglected in discussions related to Flash vs HTML5, and that issue is cross-browser compatibility.
Flash has this completely sorted out. It even works on cross operating systems identically the same way everywhere. However, HTML5 is surely going to bring this issue back and make people cry. Even with the current HTML/Javascript/Ajax, its almost a nightmare to test everything across all the browsers and make sure its all perfect.. this will definitely be inherited by HTML5 from its predecessors.
[...] this site if you are an as3 developer seeking to move into html5! Share [...]