Earlier today, we unveiled IE10 Platform Preview 2, which you can download from the IE Test Drive site.
IE10 PP2 has got a boat-load of web developer goodness and I wanted to this this opportunity to go through some of the “what’s new” and give you my thoughts and opinions on its capabilities.
Please note that IE10 PP2 is not a fully-featured browser; it’s just the rendering engine to give web developers, designers, and enthusiasts an advanced look at what’s to come. It’s not intended to be your default browser so please keep that in mind when downloading and installing the latest bits.
So, what’s new in IE10 PP2? Well, here’s the high-level rundown:
Cascading Style Sheets (CSS)
Document Object Model (DOM) support
Web performance APIs
Obviously, as a web developer, there’s a lot to like in this release. However, there are a number of new capabilities in IE10 PP2 that warrant considerable attention. Specifically, support for (1) HTML5 aspects like drag-and-drop, File Reader API, forms, and Web Workers and (2) web performance APIs like requestAnimationFrame and Page Visibility API. Both are important because they enable web developers to target a rich set of functionality to target a specific set of application scenarios and requirements.
New HTML5 Support in IE10 PP2
I was pleasantly surprised when I first reviewed the list of HTML5 capabilities supported in IE10 PP2. A big-time Internet high five to the IE team. Here’s some of the highlights:
Asynchronous Script Execution
The async attribute for the script element allows the associated script to load and execute asynchronously with respect to the rest of the page. That is, the script will load and execute in the background while the page continues to be parsed. For pages using processing-intensive scripts, the async attribute can significantly increase page-load performance.
This is a huge win for web developers with pages that use some gnarly scripts. And, let’s face it: sometimes, these situations are not avoidable. Very happy to see this added to IE10 PP2.
HTML5 Drag-and-Drop (DnD)
Drag-and-drop (DnD) is something that users have come to take for granted as “just working.” Internet Explorer 9 and earlier versions of Internet Explorer supports the dataTransfer object and events to drag images, links, and text. Internet Explorer Platform Preview adds the draggable attribute to any element, and drag-and-drop support for one or more files from the desktop to a webpage.
Of course, drag-and-drop is something that’s achievable through frameworks like Dojo, jQuery and others. However, having it baked into the HTML5 specification and supported is really nice. IE10 PP2 adds support for this and offers an interactivity model that – when combined with other capabilities like File API – allows web applications to behave more like native applications.
Here’s a quick video that the IE team recorded for Channel 9 that demonstrates this capability:
File Reader API
As I indicated earlier, many of the capabilities of HTML5 enable developers to build web applications to behave more like native applications. File API certainly falls within that classification as well.
Internet Explorer Platform Preview introduces support for File API. File API is a W3C draft web specification for representing file objects in web applications, as well as programmatically selecting them and accessing their data. The File API is currently being standardized by the W3C Web Applications Working Group. By using File API, web developers can access local files on the client machine in a secure way without the need of extensions or plugins.
The ability for web developers to work with local files is tremendously powerful, particularly when combined with other capabilities like drag-and-drop and XMLHttpRequest. Collectively, they form the basis of applications that can run entirely in the browser. Incidentally, File API also eliminates the need for plug-ins or extensions that facilitate (multiple) file uploads or the post-submit inspect/manipulation of form data.
HTML5 Form and Input Validation
Internet Explorer Platform Preview adds support for new HTML5 input types and attributes. This support enables developers to quickly and easily provide user prompting and input validation with a minimal amount of script. Before the HTML5 input types and attributes were available, checking that a phone number doesn’t contain alpha characters, or verifying that a properly formed email address has been entered required that the developer write extra logic for validation. Support for HTML5 client-side form and input validation allows the developer to concentrate on other tasks instead of building validation functions.
HTML5 form and input validation is nice. And, in the similar respect to drag-and-drop, it’s something that’s possible to support through various frameworks. However, having it supported within the browser gives us a win around dependencies and (indirectly) overall performance. It reduces – or in some cases – eliminates the need for these frameworks that perform client-side validation and styling, which, in turn, can improve overall performance by eliminating the round-trip to the server that’s necessary to pull these resources down. Validation is another important aspect that’s worth mentioning:
Tooltips like these ones are integrated as part of the overall experience through HTML5 form and input validation and offer up a level of consistency across the sites that utilize them. They can also be used to help validate entries:
Again, very nice and a super-useful capability for web developers building HTML5 applications and sites.
Internet Explorer Platform Preview supports the sandbox attribute, which enables security restrictions for iframe elements that contain untrusted content. These restrictions enhance security by preventing untrusted content from performing actions that can lead to potentially malicious behavior.
More goodness. Now, I will admit that it’s an extremely rare occurrence for me to use iframes. However, I like that this attribute provides an extra layer of protection from potential attack vectors like script injection.
Internet Explorer Platform Preview introduces support for Web Workers. The Web Workers API defines a way to run scripts in the background.
Web Workers are da bomb. Essentially, they establish threading within the scripting context of the browser. That is, the ability to execute processing-intensive scripts in the background. One of the immediate benefits of Web Workers is to offload these computations so that, for example, the user interface may continue to respond to user-generated events like mouse clicks.
Traditionally, browsers have been single-threaded, forcing all the script in your application to run together in a single UI thread. Although you can create the illusion of several things happening at once by using DOM events and the setTimeout API, it takes only one computationally intensive task to bring the user experience to a screeching halt.
The Web Worker API provides a way for web application authors to spawn background scripts that run in parallel with the main page. You can spawn several threads at a time to use for long-running tasks. A new Worker object requires a .js file, which is included via an asynchronous request to the server.
Here’s an example of Web Workers at-work in IE10 PP2:
Whew! Lots of awesomeness! And that doesn’t even cover everything! Just the new HTML5 goodness. Why not download it yourself and check it out?