Thoughts on HTML5, a Flash Developers hopeless rant

My name is Yonny Zohar, I'm a game developer with six years experience. I've worked on several commercial titles including "Bingo Island", and have recently made the move from flash development to html5.

Six years ago, while i was learning flash, i worked simultaneously with html, CSS and js. back then my impression was that flash was simply light years ahead in terms of development ease, code maintenance and error handling.

Returning now to html5 six years later, I was very weary - had things improved since 2009? I've spent the last several months hearing from everyone around me that the answer is a definite "YES". I'm here to say- the answer is still a definite NO!

Lets begin this rant with my number one hatred - CSS:

NO DEBUGGING - Debugging css is awful. you spend days trying to figure out why elements don't behave the way they should. Try adding and removing properties to elements hoping it will make them act the way you want or even appear at all- only to find out that somewhere up the tree, someone was assigned a property that affects everyone. This needle in a haystack search becomes even more frustrating when you realize you can't even place trace statements (console.log) inside your css or html in order to figure out exactly what's going on with your code.

Which brings me to my next point - TOO MANY WAYS TO DO THE SAME THING:

Any descent design system needs to be way simpler in order to be coherent. Actually the only properties you'd ever need are:

x

y

width

height

scaleX

scaleY

alpha

visible

rotation

z-Index

These parameters should cover 99% of ALL use cases. The following are completely useless and only make coding css a headache:

padding

margin

float

clear

clientWidth + height

And all coordinate systems that are not pixel based. completely redundant.

Why is this important? because when elements don't behave as desired, there are a million different rules that could be the cause, instead of a single, unified consistent set of rules.

For starters, WHY NOT POSITION ALL ELEMENTS ABSOLUTELY?!?!? An absolutely positioned div inside an absolute parent is actually relative - That's great! why need anything else?!? why use floats when you can position an element in an array with arr[i] * element.width? why make up a million different rules that make code maintenance and change a headache? 

Progmatically it's much wiser to style your views with Code. Code will give you compile time errors, it will give you error handling, and allow trace statements to see what going on. It will give you far more control over your views.

But what about fluidity? css does give you the ability to easily write fluid layouts, but any decent client side developer should be able to catch the browser's resize event and manage his view accordingly with js. 

And besides, in the world of mobile there is no need for a fluid, dynamically changing layout. Every game I have worked on took into account different screens and resized itself accordingly on startup / used different assets.

MORE REDUNDANT CSS RULES:

Css3 is plunked as that best thing since sliced bread. However, any flash developer knows that filters, shadows, glows and vector gradients are a performance killer. Hell- vector is a performance killer. Try animating DOM elements with text shadows and gradient filled divs - and everything will come to a halt. For fast loading static websites- sure, cpu generated views are great. If you want performance / animation - stick with images. 

CROOKED MVC- 

This point will require a small introduction.

Coming from the world of MVC, nothing annoys me more than listening to web developers talk about mvc. In flash, everything was straight forward. You had a model where you stored your data, a controller which handled logic, and a view. Now the view could get a bit tricky. Sometimes it would handle logic as well. here's how:

Say you're developing for pc and mobile using a single code base, and you have three swc files (a closed flash file, similar to a jar library, containing ready to use css and html binded together), each with custom layout and graphics for each platform. 

Say you require different interactions from the user on each platform - on pc a button click, on tablet a swipe, and on mobile a pinch and zoom. Your controller should ultimately accept this action and run a complexed logical function. It makes no sense putting the different event handlers in your controller, which is already bloated with logic. 
You could of course use inheritance but I prefer to avoid complexed inheritance (say more than three levels) which in turn leads to a code maintenance nightmare. Instead it would be much better to handle this in the view. Build three views that implement the different event handling, and notify the controller of the input so it can start doing its job. The controller shouldn't care whether the user clicked, pinched, zoomed or squatted- it cares that the user asked to perform an action (like submit a form), and go perform it. 

Same goes for actual styling. When you're not using a swc file, rather are building your view by loading in image assets and placing them on stage (Starling for instance) - it makes no sense filling your controller with potentially hundreds of lines of code having to do with presentation. Your view should handle that. 

The realty with MVC is that the pattern is actually M,V,VL,C. In realty, any complexed app requires a view business logic that handles the output itself. In the world of flash, your swc file should never contain code. It's impossible to maintain. Your view-logic loads in the swc, displays it on stage, and attaches event handlers to it. It uses DispatchEvents to notify whoever's listening (the controller for instance) that the user wants to do something. It handles asset placement, and animation.  - For all intents and purposes, it's your CSS file - only it's debugabble!!!!!!!! The created view does not use any "rules" that can potentially screw up application wide appearance. It is standalone.

JUNK CODE IN YOUR HTML-

A good programmer is one that can not only write code- but change it on demend - however crazy the demands are- without bursting into tears. I beleive I became a good programmer the minute I learned the simple rule of thumb - a child does not know its parent. The controller creates the ViewLogic, but the ViewLogic does not know its controller. The view (swc or html) is loaded in by the ViewLogic, but does not know it. No child knows its parent, and relays messages to it only via event dispatcher - which allows for a highly scalable code and architecture, that easily meets the ever changing demands of the product people.

Javascript's getElementByID allowed for this, and a custom built flash-like "dispatchEvent" system kept me pretty happy at first. But then came along AngularJS and Knockout JS - with their data binding, and directives- basically binding your html to variable names,and causing the child to know its parent....

Your html should be deaf and dumb. it should not know of anyone's existence. tomorrow you might want to use it somewhere else- but you've already littered it with view logic and directives which are case specific. 

AND IF THINGS AREN'T BAD ENOUGH- THEY INVENTED THE MVVM.

I've been working with Knockout js for the past few months- which is simply an architectural nightmare. Forget 'model for data', 'controller for logic', 'view for presentation' - let's put everything in the same class and call it a design pattern! let's insert variables into our html (which is bad enough), and bind them to our controller - which means they have to physically sit there and loiter it with more lines of code which belong in the model. Forget scalability- it's thrown out the window.

And they didn't stop at variables - FOR LOOPS too. This is ok if you want to present data in a simple fashion, but what if i want to build a chess board - have every even tile paint black, and uneven tiles paint white - and reverse it when I drop a line? They'll tell you to move your for loop into the controller with js, or alternatively build a ridiculously complexed and completely unmaintainable or debuggable inline function right in the html with some ng directive. The whole thing just adds up to one huge UNDEFINED and a debugging nightmare. so why use it in the first place???

I need my code in one place. separation of concerns- yes, but organized. Data in the model. logic in the controller, and view handling in the view. My output html should be clean and oblivious of its creators. Every part of the code should be removable and interchangeable. This is much harder with html5 in its present form than it is with flash.

The added value of two way data binding just seems completely redundent when compared to the design problems they cause. just handle the damm thing manually!

JAVASCRIPT - BAD!

Statically typed languages are a developers best friend. Large scale apps can easily contain typos, null references and whatnots that static typing solves. In Javascript though- anything goes! no compile errors, no idea where your typo is. Go figure. And if matters weren't bad enough - we also have SILENT ERRORS:

Web developers will tell you that if you have an error in your code, it shouldn't make your whole site crash. well I say it does :). Your code should not contain errors, and if something fails- you should know about it immediately. 

But the combination of silent errors and dynamic typing makes debugging a search for a needle in a haystack. Flash As3 solved this by introducing a statically typed language, with the ability to create dynamic classes and objects when needed + fully functioning error handling that crashed your app when something went wrong instead of allowing the user to continue using a voodoo version on your app that while still working, is in fact completely unresponsive because it's dragging an error around that's preventing it from functioning.

Developers are aware of these faults, and so languages like ScriptSharp and TypeScript have popped up- allowing you to write statically and compile to js. This is great until you have to debug- and find out that your output js looks nothing like your original C# code (ScriptSharp ). That the output is one big 50 thousand line long unreadable js file. Good luck debugging :)

And let's not forget third party library mapping. Wanna use Jquery, TweenMax, or any third party library? you have to map the parts you want from the API to whatever framework you're using- and end up wasting so much time mapping a simple object containing a reference to a callback function that needs to accept parameters  - a task that in C# took hours of google research. And if the API changes - you have to re-map from the start...

CANVAS:

Canvas is my one bright point in all this. Certainly with Help from easelJS that gives you an easy API as well as seamless integration with Flash Pro graphic design + asset creation. But performance sucks on mobile, and it comes with its own array of problems. Many developers suggest a mesh of DOM and canvas - which leads to a Frankenstein patchy app without consistent behavior...

IN CONCLUSION:

Html5 sucks! no really- it does. it's no friend to developers, and it's still light years behind what web developers did with flash 12 yers ago.

SO WHERE DOES THAT LEAVE US?

I believe that eventually html5 will arrive at where flash was 10 years ago. JS6 is coming with promises of static typing and real OOP, but goolge's commitment to AngularJS seems to be taking things to another direction.

Still,you can try to build js apps the "flash way": 

1. Clean your html. Add listeners to DOM elements with "getElementByID".

2. Position everything absolutely and listen to the window resize event with JS.

3. Style static elements with css, and dynamic elements with JS.

4. Animate everything with JS. TweenMax by Greensock is the industry standard in flash games, and their port to JS is simply amazing.

5. Wait for JS6, or go with TypeScript for now if you want static typing. It seems that eventually its syntax will resemble JS the most.

6. Weep.... we flash developers were in coding heaven and it was taken away from us and replaced with crap :(. crap which the whole world seems to be hailing as gold and no one Will listen to us....