One Ring to rule them all, One Ring to find them,
One Ring to bring them all and in the darkness bind them"
- Lord of the Rings
However, the recent "Facebook" volte face on HTML-5 and my own experiences as an HTML-5/CSS programmer has shown that managers must choose extremely carefully if they want to tread the path of HTML-5. If you go on the internet, there are people opinionated on both sides. There are ardent HTML-5 Fans and ardent HTML-5 haters.
In a series of post's I will like to talk about HTML-5, broadly as follows:
Part-1 :The politics and history behind HTML
Part-2: The contemporary state and when to and when not to use HTML-5
Part-3: Evaluation of the best JavaScript frameworks for mobile development
History Lesson: The Making of HTML-5
So what is HTML-5 ? Where did it come from ? And what happened (or might have happened) behind the scenes to suddenly make it such a marketable term.
Let's look at the computing scenario a few years ago(say 2005):
1.) Dominant Consumer Operating System(Mainly PC's and Laptops): Windows (>90%)
2.) Dominant Browser: Internet Explorer(>90%)
3.) Dominant Server Platforms: Fragmented
Something happened around this time, we call this the Web 2.0 phenomenon. Computing started moving towards the web and away from the PC. The logical culmination of this is the cloud. Thus PC's began to transform into nothing but portals for the web.
This was fueled by two things:-
2.) Better(But not as great as Point 1) User-Interfaces using Web 2.0 technologies.
Why was the famed- "Web 2.0" not able to replace Flash:- Because they could not hook into native os code, like the way flash did in a manner consistent on all platforms.
Flash became the JVM that never was. You program to flash and flash would ensure it would work cross-platform. It was a great deal.
If you have to program in "Web 2.0" you needed to take care of a multitude of things:-
1.) Will it work in IE 6,7,..
2.) Will it work in Firefox
3.) It might be right code, but oops..IE has a bug in rendering it that way
4.) Did you know there are 2 different Ajax objects....
2.) Will it work in Firefox
3.) It might be right code, but oops..IE has a bug in rendering it that way
4.) Did you know there are 2 different Ajax objects....
etc..etc..etc...
Add to that the following:-
5.) JavaScript rendering was slow
6.) No way to do Video, Audio, Animations, etc...
7.) Very little tooling support(Firebug was not invented yet)
8.) No standardized way to integrate.
In other words writing a serious Web 2.0 app was a major challenge. On the other hand Flash had a drag-and-drop IDE with full tooling support.
Flash promised the one thing Web 2.0 couldn't- Predictability.
The Empire Strikes Back- The politics and rise of HTML-5
So when did we move Web 2.0 to HTML-5 and what problems does it solve. Well HTML-5 attempts to solve some of the problems above, but does not manage to solve any of them completely.
Let us consider the thinking behing HTML-5 and why it was being developed by the major software platform vendors:-
1.) Microsoft had no interest in developing HTML-5. They were pushing for Silverlight and proprietary extensions. A lof of what you can do in HTML-5 could be done using Active-X.
2.) Google(Pre Android Acquisition) had the most stake in developing HTML-5. Google, wanted the "Web" to be the OS and wanted to control it via "Chrome"(Browser) and later "Chrome OS". Hence. it needed a new platform- HTML-5.
3.) Firefox(Mozilla) wanted to beat IE, and hence bet on HTML-5.
and then it happened: then came the iPhone and the mobile 'revolution'
The entry of Apple
So Apple in 2007 unveiled the iPhone and iOS. The device took the mobile world, by storm and it became the dominant computing platform for mobile phones. This was followed by the iPad another revolutionary device.
But it was more than that, it was an "Eco-system". Apple earned on app-store submissions and via native apps.
So what did Apple want:"They wanted developers to develop native apps and stick to their platform".
This sparked the whole question:- "Mobile Apps or Mobile Web".
A enemy of an enemy is a friend
The question that Apple asked is:- "Who is the biggest competitor to my user-experience?". The answer was not HTML or Web 2.0 , it was Flash. Had Apple, allowed Flash to run on iOS people would have programmed even more in Flash as now they could do complete cross-platform using it.
So what did Apple do:- "They promoted HTML-5 by attacking flash". All the comments about Flash being unusable and a battery hog, were only partially true. Apple wanted to kill Flash/Silverlight etc and replace it with a puppet ruler: HTML-5, which they know isn't strong enough to challenge native authority.
And to ensure that it cannot: "Apps developed using HTML-5 do not have access to the Nitro JavaScript engine in mobile safari thus being even slower than a mobile web".
This was simple old-school colonialism:- Replace the current king who can resist, with a weaker puppet and further diminish his powers all the time .
Apple single handedly made HTML-5 Cool....so that any user-experience other than native could not dominate.
Meanwhile...back in Google Land
Google suddenly found that their dreams of the web being the true platform were being overtaken by the mobile revolution. What do they do? They acquire Android.
Now, one must remember this: Android and Google were different companies and this still reflects.
Android was the answer the to the iPhone and became more mass-market. But Android, had the same aim as iPhone:- "Make native apps cool".
Google still had the aim to make the web-cool, so they continued investing in Chrome, however Android did not catch-up.
Android's default browser did not catch-up with Chrome and hence it continues to have a horribly bad performance vis-a-vis chrome. The team put HTML-5 as a "lower priority".
How to make HTML-5 Cool?
So how did Apple and Google make a sub-standard or not ready platform - "Cool" for everyone to use.
Let us first understand what makes a platform cool. It can be bought down to just one word- "Animations".
Try this out, open an iPhone and Android and play with it, then open the mobile website and play with it. Everything in iPhone and Android animates smoothly. Whether it is going from the homescreen to the apps or vice-versa.
To make HTML-5 Cool, it was critical that we had "animation" built into the browser.
Enter the Vikings- WebKit
So what really made HTML-5 cooler than Web 2.0. The answer surprisingly lies in a software developed by a company which is widely considered dead in innovation:- Nokia.
Nokia, developed the "Webkit" engine which is the "rendering" engine that powers a host of browsers. It all started with an effort to make a desktop UI for Linux(KDE) and then a "cross-platform" framework for native development(QT). The Webkit project was collaborated on by devs from Apple, Google and Nokia to define a system to make great UI's, great transitions etc.
Later it formed from KDE to develop into a rendering engine, and this was the rendering engine that powers Chrome and Safari.
So how to make it cool:- "Add webkit specific properties to do things like animations etc."
Webkit, allowed rounded corners, animations , video and a host of other features that meant you could make a UI that would look just liked the native animated cousins.
On top of that Apple added a bunch of tags to make it look like you can make great apps by wrapping webkit inside an app and could make great web-sites etc. by adding hardware acceleration etc.
However, there was a catch. "Android" did not implement all the features fast-enough and Apple made sure the WebKit experience was great in "mobile safari" but always lower than native apps. For example till iOS 6, you could not do file uploads in mobile safari and with iOS 6 you can only do this for Photos and the Gallery.
What about the other kings...
1.) Mozilla reacted to the growing increase in Chrome usage and in mobile safari by adding some of the same effects(using -moz tags). Later, everyone agreed to make them a standard in HTML-5.
2.) Microsoft, was loosing out big time. Neither was their browser king anymore nor their mobile platform and the OS was well only being used because it was legacy. It needed, do something fast. It did the stupidest thing imaginable. It removed support for Silverlight and joined the HTML-5 bandwagon with IE 10.
3.) Blackberry(Previously RIM) and other mobile vendors like HP realized that they needed to get WebKit on their side. So, they re-wrote their browsers by even buying companies, so they could get WebKit and hence "HTML Developers" to write code for them.
and hence was bor HTML-5, the true cross-platform language.
What's the current state
So, is HTML-5 really a puppet king, really sub-standard. Well, as the Americans learnt about the Taliban and Dr. Frankenstein about his monster, be careful who you make a puppet king, he may just come back and rebel...in the next post we will see where HTML-5 is and what can be done with it....