Tripped-up by Incompatible Browsers

With the fall from grace of Flash and Java as cross platform development tools, Full HTML Stack Web Development using HTML+CSS+JavaScript has become a new IT development favorite. Full HTML Stack-based development has assumed the primary role of common cross platform and computing device development as shown by Developers Economics and seen in the diagram below. 3 of the top 5 cross platform tools are Full HTML Stack tools. And the emergence of easy to use and mobile, responsive JS Frameworks like Bootstrap, Foundation and InK among others have helped to consolidate this strategy.
crossplatform
D
iagram by Developer Economics

But there are 4 major problems for the Full HTML Stack development model. First, many of the libraries have widely varying client side support for both UI widgets and backend connectors. Whats to be found in Sencha’s EXTjs may not be present in PhoneGap/Cordoba, and vice versa. Second, the many code libraries for HTML-HTMLx, HTML5, HAML, Jade, Slim ; CSS- CSS1, CSS3, LESS, SASS, SCSS; and JavaScript – 5 leading JS Mobile/Responsive Frameworks, 10 top JS UI/Widget frameworks, 5 top JS MVC/DataConnection Frameworks and 5 major JS Canvas/Drawing Frameworks means establishig any semblance of common coding functionality is Mission Impossible. Third, the speed of operation of Full HTML Stack tools cannot match the performance of game-oriented C++ Cross Platform tools like Unity, Corona and Marmelade. Since these “game” tools can deliver to Android, iOS, and desktop platforms, it should not be a surprise that some of the apps they are used for are not games but “enterprise” apps.

4th Problem: Cross Browser Incompatibility

There has been a price to pay for allowing Microsoft to ignore its promises back in the late 1998 time frame   to implement the full set of HTML, CSS, DOM, and JavaScript  standards. Gates and company wanted to assure the business community that it was okay for Redmond to gut Netscape and its browser and Internet servers by offering IE ad IIS for free for perpetuity.

Of course 4 years later IIS was probably  the unique feature in Windows Pro  that would justify its $50-90 premium price. But more telling Microsoft slowed and then stopped in 2002  updating features in IE the new 90%++ share dominant browser in the market. Users were left with a browser that had proprietary HTML, DOM, CSS, and JavaScript extensions while missiing W3C and ECMA standards that had been approved 3-5 years before. It got so bad in the 7 year freeze on IE that W3C HTML, CSS,DOM and other Internet recommendations just grind to a halt.

But during the interim, working in a standards vacuum, browser vendors like  Opera, Apple Safari, and Mozilla Foxpro inevitably embarked on unique browser extensions. Cross browser full stack compatibility was a pipedream. One can see the different approaches in the many variations in CSS3 prefixes and HTML5 among the current browser vendors.  Even with the adoption of the Webkit engine by Google + Apple  then Blackberry and now Opera, the Cross Browser Incompatibility die was already cast.
crosshtml5
Already wide variations in  HTML5 masks some further  differences among browsers. See here, here and here.

Take the following Bootstrap+DHTMLX mobile responsive demo built as a test for a client:
crossbrowser
Click here to go to the live demo app

This is a classic Full HTML Stack solution. The Bootstrap framework provides the easy to use mobile responsive capabilities while DHTMLX provides the UI/Widget and backend data interchange features.It works pretty well on the LOCALHOST test environ for the most part with some resizing problems and speed of operation issues. But look what happens when the demo is run on the Web using different browsers:
crossbchrome-tile
Running on LOCALHOST Test server, it is all tests go on Chrome 36. But upload to theOpenSourcery.com server, and Chrome suddenly has  style changes and iframe problems. Move to IE and the styling and iframe problems are gone; but now  mouse-wheel and touchscreen operations don’t work. Ditto for Foxpro and Maxthon browsers. Only Apple Safari and Opera run the app on the Web like it was developed and reviewed on the LOCALHOST server. Want to know hair-pulling Web development exasperation? This is it –  typical “browser incompatibility” and “making things run in older versions of IE” which adds silver to your hair and subtracts months from your life-span.

Summary

Compared to Microsoft Visual Studio systems, The Oracle Stack and IBM’s Web Development Architecture, Full HTML Stack development looks very attractive if cross OS platform and identical performance across computing devices are your highest priority.  However, be advised that cross browser incompatibility will surely arise – so be prepared after getting the app working locally for a new and sometimes non-trivial task of now getting that same app deployed on 5 major browsers successfully on the Web.