Monday, June 18, 2012

Challenges in using HTML5 based javascript frameworks

Html5 by itself, is not a framework, so we end up using some HTML5 based frameworks. Lots of times these frameworks are also javascript based. But this has its own challenges.


Cross browser compliance is a moving target

A good "tricky" part of any javascript framework goes into trying to attain cross browser compliance. this is such a tricky deal, that javascript frameworks suffer "major" changes in moving from versions x.y.1 to x.y.2. Given the dynamic nature of javascript, application teams are wary of upgrading to newer versions of framework and some prefer to "customize" the framework. Soon, 50% of application team resources turn into "javascript/framework specialist" whose sole job is to "maintain/customize" the framework. This drains application resources and makes framework brittle while the cross browser target is still moving further and further away ;-)

Performance of ui in the browser

Due to complicated DOMs, javascript loading & execution and indiscriminate use of ajax ( I once saw a page trying to use 6 js components, each issuing its own ajax request), UI performance in browser will be major concern. Trying to build "slick" UIs, developers often incur 2-3 times server side times, in browser itself.

Javascript challenges

Javascript being a dynamic language, all issues and problems manifest at runtime, no compiler to help here.
it is oh-so-easy to override behaviour in existing frameworks and there are so many ways to achieve same result. Like all dynamic languages, power without responsibility, on part of developers can lead to code mess and undue complexity in javascript.

The regression testing nightmare

UI are enough of a nightmare for regression testing, when u add a "flexible" dynamic language like javascript to the mix, things really turn nasty.

"Single Source Componentization" difficult to achieve

Components tentacles of such frameworks are spread out over html markup, css, framework javascript and custom javascript, there is no single source UI component (in a traditional sense)


Javascript a necessary evil

.... But everything said and done, javascript frameworks are a necessary evil for web apps that are characterized by the following:
UI requirements are 'content-centric' meaning, UI is dictated by end users and will be changed and customized. Strictly component based frameworks will fragment and provide little reuse under such requests for high level customizations almost akin to a web-site UI


At the other end of the spectrum are UIs in which end users dont have much of a say, eg. operations or monitoring UIs, where arguably, the requests for customizations will not be that high and also, UI design can be dictated and fixed to reasonable extent by fewer stakeholders. For such UIs, strictly component based frameworks (as opposed to content-centric framework) might be a good match.

Types of java script based frameworks

Among the java script frameworks also there are frameworks like 

  • jquery UI which decorate existing html markup and use javascript over it to provide UI components
  • Also there is an emerging class of pure javascript frameworks which lend to componentization and MVC, like Sencha Ext.


Alternatives


Frameworks like GWT and Vaadin(call it GWT on steroids) are also viable alternatives, if you dont need too many UI customizations and thereby dont really need, control over html, css and javascript

The server side interfaces

Choose a UI framework which plugs into your server side using REST, this will ensure that the server side need not be changed at all, when you build mobile clients as alternative UIs. Additionally security considerations will be required when you think of exposing your servers over internet, so they can be accessed via your mobile clients.


4 comments:

Winston Dhanraj said...

But then the alternative of moving the complexity to a better language like Java via say GWT or Apache Wicket type framework isnt all that attractive either...they suffer from other issues like - generated code that is not readable/comprehendable, lesser degree of control of the Html and javascript, etc

ganesh ghag said...

hi winston, agree with you. I have added few sections towards end of the blog post which talks about GWT alternative

for IT the said...

Facebook jquery pop up for facebook like box widget for bloggers Responsive Web Design. Bootstrap Training in Chennai Mobile First Development progressive enhancement Bootstrap Training

tatic Pop Out Facebook as soft box with jQuery effect of activation for the blogger SAP Application Backbone.JS Training in Chennai MVVM Methodlogy Angularjs Training in Chennai

Adding Static Facebook Pop Out Like Box Widget To Blogger layout HTML5 Training in Chennai OOP JavaScript is mandatory JavaScript Training in Chennai

for IT the said...

Javascript Courses | Javascript Training | Javascript Training Courses