Poll: Do you use HTML5 for web application development?

HTML5 provides lots of features that make it ideal for creating web applications. But there is a lot to learn. you could buy a book or read the specification or you could just jump right in with the HTML5 tutorials on this site. how do you feel about HTML5? Are you using it, planning to use it, or never planning to use it?

Poll: Do you use HTML5 for web application development?





HTML5 for Applications: The Fourth IE10 Platform Preview

An updated platform preview of IE10 for the Windows Developer Preview is now available for download. this IE10 preview adds even more support for HTML5 technologies, enabling richer Web applications with significantly improved performance. IE10’s hardware acceleration of technologies like SVG, CSS3 transforms and animations delivers faster rendering than other browsers, as highlighted in this short video.

see some of the new HTML5 capabilities, performance improvements in IE10.

With this fourth Platform Preview, developers can start working with more site-ready HTML5 technologies. you can read the full list here in the IE10 developer guide. Here are a few highlights:

  • Cross-Origin Resource Sharing (CORS) for safe use of XMLHttpRequest across domains.
  • File API Writer support for blobBuilder allowing manipulation of large binary objects in script in the browser.
  • Support for JavaScript typed arrays for efficient storage and manipulation of typed data.
  • CSS user-select property to control how end-users select elements in a Web page or application.
  • Support for HTML5 video text captioning, including time-code, placement, and captioning file formats.

These foundational capabilities are what developers building native applications depend on: working with binary data and files, controlling selection and hit testing in application UI, and providing accessible video content with captioning. The features in this platform preview are available to Web pages now, and will be available to Metro style applications in Windows 8.

Building HTML5 Applications

This IE10 preview supports CORS (cross origin resource sharing) to allow developers to use XMLHttpRequest to safely request, share, and move data across applications on different domains. this is a common pattern developers use to bring data and services together from different applications. In this test drive demo, you can see how CORS is used along with XMLHttpRequest, the File API, and HTML5 progress control to deliver a smooth experience for uploading multiple files to a service on another domain.

Click here to see CORS used with XMLHttpRequest to upload files across domains.

Having the ability to work with binary data and files enables developers to build new kinds of applications and experiences on the Web. this IE10 preview supports blobBuilder from File API: Writer for working with large binary objects (blobs) and JavaScript typed arrays. In this test drive demo, you can see how different file types, including file types which are not natively supported in the browser like PCX files can be read, rendered, and even have their internal contents displayed.

Click here to see how JavaScript typed arrays used with File APIs to read and view binary files.

As developers build more sophisticated applications on the Web, they have more need for precise control over how end-users select parts of the page. with CSS user select support in IE10, developers can specify which elements in their page can be selected by the consumer when using their applications. In this this test drive demo, you can see how selection control is applied in a sample blog application using the user-select property in a CSS rule.

Click here to try CSS user-select to control end-user Web page selection.

Improving same Markup for HTML5

We continue to contribute to the test suites under development at the HTML5 standards bodies, submitting 118 new tests to them, to further the goal of interoperability and same markup. you can view them at the IE Test Center as well. We strongly encourage all developers to write for HTML5 standards first by always using the HTML5 doc type <!DOCTYPE html> in your pages.

IE10 Preview 4 introduces an updated quirks mode that is more consistent and interoperable with the way quirks modes works in other browsers like Firefox, Chrome, Safari, and Opera. this updated quirks mode supports quirks for page layout, while allowing use of more up-to-date standards features like HTML5 elements for audio, video, canvas, and more.

You can find a full list of new functionality available to developers in the IE10 developer guide here. Download the Windows 8 developer preview to try this update to IE10. We look forward to continued engagement with the developer community and your feedback on Connect.

—Rob Mauceri, Group Program Manager, Internet Explorer

HTML5 for Applications: The Fourth IE10 Platform Preview

Beta testers needed for a ‘No-Code-Required’ Web Application Framework

It’s not released yet, 0.97 is the ‘current verion’, but 1.0 will be Released over the next couple of weeks. Every BETA tester who actively contributes one way ot the other, will get a Free ‘Proprietary License’ [non-GPL], if they can tell me about this DZone posting, and send me at least ‘a couple’ of emails at thomas.hansen@winergyinc.com with feature requests, bug reports or questions etc … PS! It’s a ‘No-Code-REQUIRED’ Framework, you *Can* still use Code if you wish, you just don’t ‘have to’ in order to create your Web Applications … ;) And if you use code, the codebase is stuffed with stuff such as DDD, Inversion of Control, MVC, O/RM [Active 'Record' type of pattern], etc, etc, etc … 50.000 lines of code, and as far as I know, it’s the second or third largest Open Source Codebase on .Net, and it’s coming out in a month. The Framework will be Dual Licensed, its initial price will probably be $49 per license though for ‘Proprietary Licenses’. Anyway, you’ll get 5 licenses for Free, for yourself and others in your Company [or whatever], if you help me bug-test it. BTW, I promise you that this is something you *have* to see … To condense the whole Framework into two words, think; “Visual Lisp” … ;) If you’ve ever wondered about how ‘Visual Lisp’ would look like, look no further … PPS! http://code.google.com/p/magix

Beta testers needed for a ‘No-Code-Required’ Web Application Framework

Asynchronous Programming in JavaScript with “Promises”

Asynchronous patterns are becoming more common and more important to moving web programming forward. they can be challenging to work with in JavaScript. To make asynchronous (or async) patterns easier, JavaScript libraries (like jQuery and Dojo) have added an abstraction called promises (or sometimes deferreds). With these libraries, developers can use promises in any browser with good ECMAScript 5 support. In this post, we’ll explore how to use promises in your web applications using XMLHttpRequest2 (XHR2) as a specific example.

Benefits and Challenges with Asynchronous Programming

As an example, consider a web page that starts an asynchronous operation like XMLHttpRequest2 (XHR2) or Web Workers. There’s a benefit as some work happens “in parallel.” There’s complexity for the developer to keep the page responsive to people and not block human interaction while coordinating what the web page is doing with the asynchronous work. There’s complexity because program execution no longer really follows a simple linear path.

When you make an asynchronous call, you need to handle both successful completion of the work as well as any potential errors that may arise during execution. Upon the successful completion of one asynchronous call, you may want to pass the result into make another Ajax request. this can introduce complexity through nested callbacks.

function searchTwitter(term, onload, onerror) {

var xhr, results, url;

url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;

xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.onload = function (e) {

if (this.status === 200) {

results = JSON.parse(this.responseText);

xhr.onerror = function (e) {

function handleError(error) {

/* handle the error */

function concatResults() {

/* order tweets by date */

function loadTweets() {

var container = document.getElementById('container');

searchTwitter('#IE10', function (data1) {

searchTwitter('#IE9', function (data2) {

/* Reshuffle due to date */

var totalResults = concatResults(data1.results, data2.results);

totalResults.forEach(function (tweet) {

var el = document.createElement('li');

el.innerText = tweet.text;

container.appendChild(el);

The nested callbacks make the code hard to understand – what code is business logic specific to the app and what is the boilerplate code required to deal with the asynchronous call? In addition, due to the nested callbacks, the error handling becomes fragmented. We must check several places to see if an error occurred.

To reduce the complexity of coordinating asynchronous behavior, developers have looked for a way to perform consistent, easy to understand error handling with an alternative to nested callbacks.

Promises

One pattern is a promise, which represents the result of a potentially long running and not necessarily complete operation. instead of blocking and waiting for the long-running computation to complete, the pattern returns an object which represents the promised result.

An example of this might be making a request to a third-party system where network latency is uncertain. instead of blocking the entire application while waiting, the application is free to do other things until the value is needed. a promise implements a method for registering callbacks for state change notifications, commonly named the then method:

var results = searchTwitter(term).then(filterResults);

displayResults(results);

At any moment in time, promises can be in one of three states: unfulfilled, resolved or rejected.

To give an idea how the concept works, let’s start out with the CommonJS Promise/A proposal which has several derivatives in popular libraries. the then method on the promise object adds handlers for the resolved and rejected states. this function returns another promise object to allow for promise-pipelining, enabling the developer to chain together async operations where the result of the first operation will get passed to the second.

then(resolvedHandler, rejectedHandler);

The resolvedHandler callback function is invoked when the promise enters the fulfilled state, passing in the result from the computation. the rejectedHandler is invoked when the promise goes into the failed state.

We’ll revisit the example above using a pseudo code example of a promise to make the Ajax request to search Twitter, populate the screen with data, and handle errors. Let’s start with an example of what a promise library might look like if we were designing one from scratch with just the very basics. first we’ll need some form of object to keep the promise.

var Promise = function () {

/* initialize promise */

Next, we’ll need to implement the then method which allows us to chain together operations based upon state change of our promise. this method takes two functions for handling when the promise is resolved and for when the promise is rejected.

Promise.prototype.then = function (onResolved, onRejected) {

/* invoke handlers based upon state transition */

We’ll also need a couple of methods to perform a state transition between unfulfilled and resolved or rejected states.

Promise.prototype.resolve = function (value) {

/* move from unfulfilled to resolved */

Promise.prototype.reject = function (error) {

/* move from unfulfilled to rejected */

Now that we have some boilerplate for what a Promise object could be, let’s walk through the example from above of querying Twitter for #IE10 tagged tweets. first, we’ll create a method for making an Ajax GET request using the XMLHttpRequest2 to a given URL and wrap it in a promise. Next, we’ll create a method specifically for Twitter calling our Ajax wrapper method with a given search term. Finally, we’ll invoke our search function and display the results in an unordered list.

function searchTwitter(term) {

var url, xhr, results, promise;

url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;

promise = new Promise();

xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.onload = function (e) {

if (this.status === 200) {

results = JSON.parse(this.responseText);

promise.resolve(results);

xhr.onerror = function (e) {

function loadTweets() {

var container = document.getElementById('container');

searchTwitter('#IE10').then(function (data) {

data.results.forEach(function (tweet) {

var el = document.createElement('li');

el.innerText = tweet.text;

container.appendChild(el);

Now that we’re able to make a single Ajax request as a Promise, let’s discuss a scenario when we want to make more than one Ajax request and coordinate the results. To handle this scenario, we’ll create a when method on our Promise object to queue the promises for to be invoked. Once the promises move from unfulfilled to either resolved or rejected, the appropriate handler is called in the then method. the when method is essentially a fork-join operation that awaits completion of all of the operations before continuing.

Promise.when = function () {

/* handle promises arguments and queue each */

Now we can queue up multiple promises simultaneously, for example by searching for both #IE10 and #IE9 on Twitter.

var container, promise1, promise2;

container = document.getElementById('container');

promise1 = searchTwitter('#IE10');

promise2 = searchTwitter('#IE9');

Promise.when(promise1, promise2).then(function (data1, data2) {

/* Reshuffle due to date */

var totalResults = concatResults(data1.results, data2.results);

totalResults.forEach(function (tweet) {

var el = document.createElement('li');

el.innerText = tweet.text;

container.appendChild(el);

The important thing to remember is that the code in these samples is nothing but normal JavaScript. Web developers certainly create their own Promise-like libraries; but for convenience and consistency you can leverage the promises patterns exposed in common JavaScript libraries.

Exploring Promises in jQuery and the Dojo Toolkit

There are many JavaScript libraries that are available to the developer which implement some form of a Promise. Let’s now explore a few libraries which expose promises or similar concepts.

The Dojo Toolkit

The first widespread use of this pattern was with the dojo toolkit deferred object in version 0.9. just like the CommonJS Promises/A proposal above, this object exposes a then method which allows the developer to handle both the fulfillment and error states and chain the promises together. the dojo.Deferred object exposes two additional methods; resolve which fulfills the promise, and reject, which sends the promise into the rejected state. Below is an example of using the dojo.Deferred object to make an Ajax request to an URL and parse the results.

function searchTwitter(term) {

var url, xhr, results, def;

url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;

def = new dojo.Deferred();

xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.onload = function (e) {

if (this.status === 200) {

results = JSON.parse(this.responseText);

def.resolve(results);

xhr.onerror = function (e) {

dojo.ready(function () {

var container = dojo.byId('container');

searchTwitter('#IE10').then(function (data) {

data.results.forEach(function (tweet) {

dojo.create('li', {

innerHTML: tweet.text

Fortunately, some of the Ajax methods such as dojo.xhrGet already return a dojo.Deferred object, so you don’t need to worry about wrapping those methods yourself.

var deferred = dojo.xhrGet({

url: "search.json",

handleAs: "json"

deferred.then(function (data) {

}, function (error) {

The next concept that Dojo introduces is the dojo.DeferredList, which allows the developer to handle multiple dojo.Deferred objects at once and then return the results to the callback handler passed to the then function. this mirrors the when method we had on our own version of the promise object.

dojo.require("dojo.DeferredList");

dojo.ready(function () {

var container, def1, def2, defs;

container = dojo.byId('container');

def1 = searchTwitter('#IE10');

def2 = searchTwitter('#IE9');

defs = new dojo.DeferredList([def1, def2]);

defs.then(function (data) {

if (!results[0][0] || !results[1][0]) {

dojo.create("li", {

innerHTML: 'an error occurred'

var totalResults = concatResults(data[0][1].results, data[1][1].results);

totalResults.forEach(function (tweet) {

dojo.create("li", {

innerHTML: tweet.text

The Dojo Toolkit may have been the first one to implement this pattern, but there are other major libraries such as jQuery which have also exposed a similar pattern.

jQuery

jQuery introduced a new concept in version 1.5 called Deferred which is also a derivative implementation of the CommonJS Promises/A proposal. the Deferred object exposes a then method which allows the developer to handle both the fulfillment and error states. Like dojo, this object also exposes resolve and reject. the developer can create a Deferred object in jQuery by calling the $.Deferred function.

function xhrGet(url) {

var xhr, results, def;

xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.onload = function (e) {

if (this.status === 200) {

results = JSON.parse(this.responseText);

def.resolve(results);

xhr.onerror = function (e) {

function searchTwitter(term) {

var url, xhr, results, def;

url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;

xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.onload = function (e) {

if (this.status === 200) {

results = JSON.parse(this.responseText);

def.resolve(results);

xhr.onerror = function (e) {

$(document).ready(function () {

var container = $('#container');

searchTwitter('#IE10').then(function (data) {

data.results.forEach(function (tweet) {

container.append('<li>' + tweet.text + '</li>');

Different from dojo, jQuery does not return another promise from the then method. instead, jQuery provides the pipe method to chain operations together. Additionally, jQuery offers other utility methods which allow for richer composition including filtering through the pipe method as well as the jQuery style $ syntax.

The jQuery 1.5 release alters the Ajax methods to now return the jqXHR object which directly implements the promise interface.

url: 'http://search.twitter.com/search.json',

dataType: 'jsonp',

data: { q: '#IE10', rpp: 100 }

}).then(function (data) {

}, function (error) {

For consistency, the jQuery.ajax method also provides the success, error, and complete methods.

url: 'http://search.twitter.com/search.json',

dataType: 'jsonp',

data: { q: '#IE10', rpp: 100 }

}).success(function (data) {

}).error(function (error) {

Conclusion

There are many options available to the developer on how to deal with the complexities of asynchronous programming. With well-known patterns such as promises and deferred objects, and libraries that expose them, the developer is able to create rich interactions which seamlessly bridge asynchronous requests. In this example, we discussed leveraging promises and deferred objects atop XMLHttpRequests but the patterns could easily be layered on top of Web Workers, the setImmediate API, the FileAPI, or any other asynchronous API. you can use common JavaScript libraries so you don’t have to write boilerplate code.

The promises pattern is a good start, but it’s not the end of the solution. In fact, many patterns are emerging to address asynchronous programming. We think this is an interesting development which makes our lives easier as web developers and think it can help you write your web applications as well. happy coding!

—Matt Podwysocki, JavaScript geek and consultant
—Amanda Silver, Program Manager for JavaScript

Asynchronous Programming in JavaScript with “Promises”