HTML5 has introduced some really cool Markups like Audio, Video, Canvas, Progress, etc. The complete list of new HTML5 markups can be found at w3schools. These new UI markups are no doubt very helpful and have made programmer's life much easier. But they can only be used in specific web applications. For example Audio/Video markups are useful in applications which provide such kind of content.

 

In this blog, I am going to cover some NON-UI features of HTML5 which can be used in almost all web applications. I am going to cover only the basics to provide an overview and help you get started. The code examples for each of them shall be covered in future blog posts.

 

Remember,

 

Markup + JavaScript APIs + CSS = HTML5

 

Here is the list of some cool Non-UI HTML5 features which can find space in almost all web applications (ofcourse, based on requirement).

 

  • Cookies are bitter!

CACHING application data is fundamental in nearly all applications, web or desktop.

Up until now, storing data in a web application required you either to store it on the server side and create some linking key between the client and the server—or it would be stored in cookies. The first approach has an unnecessary and undesirable performance impact. And cookies just suck when it comes to caching because they are overly complicated to use and their lifecycle has to be handled with workarounds. 

 

HTML-5 has introduced new sophisticated web storage mechanisms - sessionStorage and localStorage.

SessionStorage -

Data cached using sessionstorage has a lifetime of a session. This means that it is available only for the current open window till it is closed. If you opened another window on the same domain, it wouldn't have access to that session data.

LocalStorage

It is based around the domain and spans all windows that are open on that domain. If you set some data on local storage it immediately becomes available on any other window on the same domain, but also remains available until it is explicitly deleted either by you as the web author or by the user. Otherwise, you can close your browser, reboot your machine, come back to it days later, and the data will still be there.

 

Persistent data without the hassle of cookies: having to reset the expiry again and again. More on this can be read in my another blog.


  • Multi-threading with Web Workers
    JavaScript has been a single-threaded language. This means that it does one thing at a time. In one of the ways, this has been a good thing about JavaScript because it makes programming much simpler where we know in what will be the sequence of execution. The problem is that there are times where JavaScript has too much to handle impacting the performance and we get dialogs like "Slow Script".

    Web Workers solve this problem. This feature allows us to create another thread for processing something separately in parallel with the main JavaScript thread.

    There are some restrictions on using Web Workers to make sure that integrity of the DOM structure is maintained. And this absolutely makes sense. Like
    • Each Web Worker is defined in it's own JavaScript file that contains all the code required to do the job.
    • They do not have access the DOM or any of the variables and functions of the main code.
    • Web Worker communicates with the main thread via messages.

  • Make your application available offline
    HTML5 now allows you to make available your application content/pages even when the client (like tablet, smartphone) has gone offline. Isn't that Awesome?

    For this to work, you need to create a manifest file containing list of all the resources (html, js, css, images) that your application needs. On finding this manifest in the <html> tag, browser will download all these resources into the local system and switch to these local resources if and when your device goes offline.

  • With Web Sockets, no more server polling to check for updates.
    Haven't we all faced this problem - We want to regularly check if there are updates (or status change) on the server to start any action on the browser. For example, in a browser based chat application, we want to keep check which all my friends have come online or have gone offline.

    Web Sockets allows us to keep an open connection with a service on the server so that any time a new data is available on the service can be send to the client. It's like an open tunnel.

 

 

I hope this helps in getting a little excited about HTML5. I am!

SAPUI5 is a JavaScript based UI development toolkit for HTML5. SAPUI5 version 1.4.0 is a release now usable for external shipments. I recently got a chance to play around with it a little. Here are my quick take away's.

 

  • Built on the strong foundation of JQuery (JQuery 1.7.1)
    • JQuery is the most popular (and IMO, the strongest) JavaScript toolkit today. It offers great, yet simplified features for DOM traversing, event handling, Ajax interactions, etc.
  • Cool collection of UI Widgets
    • In my opinion, JQuery lagged in it's offerings of inbuilt UI Widgets. Today JQuery has UI Widgets like Accordion, Autocomplete, Button, Datepicker, Dialog, Progress bar, Slider, Tabs (and I think, that's it).
    • Apart from these SAPUI5 offers a rich collection of UI Widgets like - Form Fields, Menu, Message Box, Paginator, Rich Tooltip, Search Field, Roadmap, Tree,... This list just goes on and on.
  • Extensible - Being a pure JavaScript toolkit allows us to -
    • Include your own JavaScript, HTML and CSS in UI5 pages
    • Include other JavaScript libraries
    • Create composite controls from existing UI5 controls
    • Custom Controls from scratch
  • SAP Product Standards compliant
  • Write once, run everywhere (in supported browsers) - Cross browser support
    • We don't have to write browser specific code which has been a major problem till some time back. SAPUI5 (+ JQuery) handles all these problems internally providing us really simple and neat wrapper APIs.
  • Zero footprint - No browser plug-ins required
    • Being a pure JavaScript toolkit, SAPUI5 will run on all browsers and in all devices (including mobile) that have browsers without requiring
  • HTML5
    • Uses a lot of CSS3 features
    • Web storage for personalization of tables
  • IDE Support - Eclipse
    • Application development tools in Eclipse
    • Custom Control development tools in Eclipse
  • Others (which I couldn't test yet)
    • OData Support
    • UI5 Theming
    • Localization
    • Resource Handler

 

Picture1.jpg

 

Getting Started? - http://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/20a34ae7-762d-2f10-c994-db2e898d5f70