Software Technology Blog » JavaScript

Web Apps Come of Age with HTML5

Ajay Sachdeo — Mon, 07 Mar 2011 14:36:27 +0000

It is fast becoming the case that web and windows apps actually have a sliver of a difference between them. I would like to share what I have felt about HTML5 for a while now – that it will change the way we write web apps!

The following features will make HTML5 a great web standard for tomorrow:

Video and Audio
Canvas
Web Workers
Application Cache

Video and Audio:

Before arrival of HTML5, browsers were dependent on object and embed tags to insert multimedia content. Browsers supported limited formats of audio and video. You had to look out for an external plug-in to support any a new format. With HTML5, various formats are supported by using just a tag. HTML5 video tag supports MPEG4, flv, ogg, WebM and avi. As for tag, it supports Ogg vorbis, MP3 and wav. What’s more, you can control video and audio from JavaScript.

Canvas:

This is one of my favorite tags, probably because I started with this tag. Canvas tag is used to render graphics and images on the fly. If you are thinking of game development, you can easily rely on JavaScript and CSS as the ‘game engines’. Take a look at our HTML5 canvas-based game here. All current versions of leading web browsers support canvas tag. There are some interesting tutorials here to get you started on canvas.

Steps to use Canvas:

Declare a canvas tag
From JavaScript, call getContext method to get handle to canvas context object
Use canvas context to draw shapes, images and graphics

Web Workers:

Web workers are another addition to HTML5 that helps you perform javascript processing using background process. Think of Web Workers as Hyper-Threading for web browsers! You can easily offload any function to background threads and improve application’s responsiveness. Implementing web workers can be broken into following steps:

Create a Web Worker
Post a message to the Web Worker
Handle the notification handler triggered by posting message in #2

For more details, refer to Robert Nyman’s post on web workers.

Application Cache:

How about an email client designed in HTML5 with offline caching functionality? This will allow a user to browse through cached emails even when he or she is offline. Loading time will be faster as the data will be fetched from cache. Application Cache in HTML5 is achieved by:

a. Registering the content type of manifest file as “text/cache-manifest”

For Apache, you can use AddType directive “AddType text/cache-manifest .manifest”

You can add “.manifest” MIME Type to Internet Information Server

b. Creating cache manifest file to include/exclude objects that will be cached.

CACHE MANIFEST

/styles.css

/logic.js

/background.jpg

c. Adding manifest attribute in the HTML file

Application cache offers a great amount of flexibility on what can be included / excluded in it. Though there are limitations on the size of data (5mb), this can still be useful feature if you are developing offline apps using HTML5.

Comparing JQuery, Ext JS, Dojo, Prototype and YUI

Webmaster — Tue, 28 Jul 2009 18:18:44 +0000

There are many JavaScript frameworks available today for programming rich client-side interactions in web applications. With many such different options, it is important to choose a framework that not only serves your current requirement, but also serves you in the long run. We drew up a visual comparison between Ext JS and four other popular JavaScript frameworks: Prototype, Dojo, JQuery and YUI. Our detailed comparison spanned 20 different attributes. In addition to feature-set and technical comparisons, we also looked at parameters such as community support, design principles and quality of documentation and samples to provide a sense of the framework’s durability.

Overall, Ext JS and JQuery came out strong with respect to their support of basic technical features. Both are upcoming frameworks that show commitment towards robustness of design and conceptual modeling that is needed for serious web applications. Ext JS has a rich library of widgets, both of them integrate with other JavaScript libraries in some manner, and both can model complex user interactions in their own way. Ext JS is emerging as an “industry-strength” framework and is being increasingly used in the enterprise.

Your initial choice of JavaScript framework is an important one and the differences between these frameworks can be subtle. Being client-side technologies, these frameworks handle multiple priorities like usability, scripting ease, support for browsers, performance and many others, and making an informed choice about these technologies requires thorough analysis.

You can request the full white paper at http://www.harbinger-systems.com/tech-articles/software-dev-company-info-form.htm?code=HSTW102

Enterprise Web 2.0: Examples from the real world

Webmaster — Sat, 16 May 2009 07:34:18 +0000

We made a presentation earlier this year at the Web 2.0 Expo in San Francisco with real life applications of Web 2.0 inside the enterprise. The presentation covers how Web 2.0 can be used for improving employee productivity and for management visibility within the enterprise.

An abridged version of the presentation is available at http://www.slideshare.net/hsplmkting/enterprise-web-20-caught-at-work

Presenting at the Web 2.0 Expo, San Francisco

Webmaster — Thu, 12 Mar 2009 05:37:04 +0000

We are coming to the O’Reilly Web 2.0 Expo in San Francisco and presenting “10 Enterprise 2.0 Screens in 10 Minutes”. Our presentation is at 11:20 AM on April 1.

The full presentation schedule is available at: http://www.web2expo.com/webexsf2009/public/content/solutions-showcase

And do come and visit us at booth #721!