+91 20 24210201/301 info@genex.co.in

Getting your BackBone HTML5 app ready (compatible) for HTML4 browsers

Building single-page web apps or complicated user interfaces will get extremely difficult by simply using jquery. The problem is standard JavaScript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jquery callbacks, all tied to concrete DOM elements. As I said jquery can build an entire application without any formal structure and hence we need something with good structural format, which incorporates with full functional jquery, HTML5 and CSS3.
 
The web is currently trending such that all data/content will be exposed through an API. This is because the browser is no longer the only client; we now have mobile devices, tablet devices, Google Goggles and electronic fridges etc.

Backbone.js gives structure to web applications, models with key-value binding, collections with a rich API of enumerable functions, views with declarative event handling. Backbone.js enforces that communication to the server should be done entirely through a RESTful API. Backbone is an incredibly small library for the amount of functionality and structure it gives you. It is essentially MVC for the client and allows you to make your code modular.
 
And it works great in modern browsers. So what’s the problem area then? The problem arises when you wanted same application with all the features working on HTML4 browsers. The HTML4 browsers don’t support HTML5 behavior like history, pushstate and requirestate that require for navigation purpose in Backbone.js instead the HTML4 browsers supports hash fragments navigation for pure jquery.
The modern browsers support properties like crossDomain in ajax call to support request across the different domains, while HTML4 browsers supports conventional ajax call. The most vulnerable problem with HTML4 browsers is after first ajax call it caches all the request and afterward it fetches from cache, which gives impression that the application not saving or updating the values.
 
Backbone Router provides methods for routing client-side pages, and connecting them to actions and events. Backbone Router with History API uses standard URLs (/page) instead of traditional hash fragments (#page). During page load, after your application has finished creating all of its routers, be sure to call Backbone.history.start(), or Backbone.history.start({pushState: true}) to route the initial URL.
 
Following is the workaround you can try for getting your BackBone app ready for HTML4 browsers:
 
·         The History API the pushState value should be false.
·         Include Modernizr a JavaScript library that detects HTML5 and CSS3 features in the browser.
·         Check whether the browser supports History API instead check whether the browser supports the HTML5 properties and here is the example how to achieve the same.
 
//when your application starts up
Backbone.history.start({ pushState: Modernizr.history });
if(!Modernizr.history) {
    var rootLength = Backbone.history.options.root.length;
    var fragment = window.location.pathname.substr(rootLength);
    Backbone.history.navigate(fragment, { trigger: true });
} else {
    Backbone.history.loadUrl(Backbone.history.getFragment())
}
 
·         If you are using ajax call in the application, should not use the crossDomain property of ajax, it will break your request in the browsers which don’t support HTML5.
·         Check whether any broken tags and appropriate function completion. Most common mistake is trailing commas after callback function and property declaration.
·         The most common problem of the browsers which don’t support HTML5 is ajax cache. The browser caches the request and response data for the first time and provides the response from cache thereafter. You should manually turn the cache off by setting the property cache:false to ajax call.
·         If you are using the HTML5 tags in the application, you should include html5shiv.js JavaScript library that enables the HTML5 basic tags for the browsers which don’t support HTML5.
·         For proper working of CSS classes, you can use IE filter and CSS hack attributes in CSS class. The IE filter attributes are mainly helpful for gradient and opacity effect and the CSS hack attributes helps to adjust auto property which is not supported by HTML4 browsers.
Comments (0)

Post a comment


Maximum 250 alphanumerals only