How I made IE6 More Standard Compliant, And Faster


It’s 2006, I’m at Apple, I’ve been developing advanced user experience with JavaScript in Netscape 4.7 and IE 4.5 for HomePage using the DynAPI framework. An example is the iDisk Finder-like navigation bellow, that shipped in 2001. I used a hidden iframe to load some JSON-equivalent JS from the server, and render it client side, which with 56K modems, made a BIG difference vs reloading a page every time.


Choosing a folder on iDisk, to create a Photo Album in .Mac HomePage

Choosing a folder on iDisk, to create a Photo Album in .Mac HomePage

I realize the next logical step is to focus on single-page applications, which would essentially have the same architecture as Desktop native Apps: All the logic and rendering is client side, the data is coming from a backend service. Having developed Applications on NeXTSTEP from 1994-1999, I wanted the essence of what made me so productive developing on that OS (the very same Tim Berners Lee used to invent the Web): AppKit, WebObjects Components and EOF. But I very much wanted a Web framework, based on standards, that would embrace the declarative nature of the Web and the amazing potential of the separation of concern between CSS and markup. While also easing the workflow between the JS dev and the HTML/CSS dev. Such JavaScript framework didn’t exist and I decided to start one.

Taking the High Road

So I’m starting to code my first JavaScript framework, (that I poorly named Gianduia, I know… let’s move on) and I want to only use standard DOM API, which of course is a problem for IE6. The ideal solution would be to somehow make IE6 standard-compliant. Which means any object from IE6 DOM would implement standard DOM API. For example, DOM objects in IE implemented attachEvent() and not addEventListener(). This would certainly require quite a bit of JavaScript, but at least it would only be loaded in IE, leaving the rest of the framework clean.

Two Code Path To Address

In a page, DOM elements either exist from the page source at load, or they are created by some JavaScript. In both cases, I need to make sure DOM elements implement the set of new methods I was going to add. You would think that all I needed to do was to add such methods to the prototype of DOM elements, and so did I, but that just wasn’t possible in IE6. Which means it had to be added to every single element…

IE6 Proprietary API To The Rescue

DOM Elements Created From Page Source

It turns out, IE6 has a way to execute JavaScript code for DOM Elements, through CSS: IE Behaviors . With this, the set of methods providing DOM API can be added to every DOM object built from the page source, and it conceptually looks something like this:

Universal selector to target all elements,
"this" is the current DOM Element in an expression

We're passing it as an argument to a function makeElementStandard() that needs to:
1. Add the DOM methods to the element passed as an argument
2. Remove the behavior once done so it doesn't happen again when/if CSS would be re-evaluated
* {behavior: expression((function(element){makeElementStandard(element);})(this));}";


DOM Elements Created Programmatically

The second code path to cover is the one when a DOM Element is created programmatically, through document.createElement(), or anElement.cloneNode(). This is more straightforward:

  1. Override document.createElement(elementName)
    1. Call the native document.createElement()
    2. Add DOM methods to new element
    3. return new element
  2. Override Element.cloneNode()
    1. Call the native Element.cloneNode()
    2. Add DOM methods to new element
    3. return new cloned element

My primary worry was about performance, looping over all properties to add them one by one, every time. Remember, JavaScript wasn’t as fast as it is today.

A Faster DOM Compliant IE6

Leveraging the Expando Property

In IE6, an expando property is simply an arbitrary property with value, added to a browser object. It turns out, cloneNode() in IE also clones any expando that was added to the object being cloned! So no need to loop in JavaScript anymore and doing this in native code is obviously faster.

But I can also leverage that for implementing document.createElement(elementName): I lazily create a “template” instance of each tag, on demand through a document.createElement() call, add the DOM compliant methods to it, cache it, and clone away every time a new element with that tag name is needed.

A Faster IE6

At that point I’m really excited to get all that working well, but still worried about the impact of all that code on performance. So I setup some benchmarks to compare a large number of DOM elements creation operations, with and without my code additions.  Looking at the results, I make a disconcerting, yet very pleasant discovery: The code with my additions is faster than bare IE6. Believe me, I checked again, and again, but it’s real, and I’m able to isolate it. The reason why my implementation is faster than bare IE6 is because Element.prototype.cloneNode() is faster than document.createElement(). So not only it makes IE6 a lot more standard compliant, keep the code of the framework clean and lean, but on top of that it makes any App built with that framework more performant in IE6!

Take Away: Aim High

There are many anecdotes like that in the front-end development trenches, it feels like there were more in the past, because browsers are more solid now than they’ve ever been. But the key take away is that my design/architecture instincts felt right: isolating the burden to the backward looking IE6 exception (though an exception with quite a big market share…), rather than tainting and sandbagging my nascent framework in a standard-based future, was the best thing to do.

But, it meant a non-trivial effort: I had to do some research, override browser based objects, which in the context of that framework made sense, use proprietary, though stable, API to do so. I had to test to make sure that my implementation was conform to the native one. I had a risk of a performance penalty in a browser that already had a reputation for not being a speed daemon. And of course, such a potential performance gap could only be assessed in the end…

And yet, taking the high road delivered in spades. What I learned through these years building Apps and a first framework at Apple was instrumental in making Montage what it is today. So the next time you’re facing a similar dilemma, in the context of building technology, don’t look the other way right away. Think about it, ask around, read, experiment a bit, implement a partial solution in the direction you want to go, iterate. Be curious, it’s your learning, it’s your growth. Who knows, you may be facing the same rewarding results now or in a future project!

3D for the Modern Web: Declarative 3D and glTF with MontageJS by Brian Coughlin

MontageJS/glTF 3D Swiss Army Knife – Tools Demo

I’m really happy to feature a paper from Brian Coughlin3D for the Modern Web: Declarative 3D and glTF, go read it! Great to see how Brian used  MontageJS and glTF to show how Declarative 3D and glTF are viable and compelling options for bringing 3D content more into mainstream use across the modern Web. Checkout the live demo and Congratulations Brian! 


The powerful data binding system in MontageJS is built on top of several capabilities: observing changes to data, incrementally updating queries based on data, and storing data in appropriate containers. FRB provides ways to create incrementally updated queries, but ultimately depends on another library for storing data and providing property and content change notifications. MontageJS delegates those responsibilities to the Montage Collections Library, which provides JavaScript implementations of common data structures. The collections provided by the library are all observable, enabling the developer to attach change listeners that react when values are added, removed, or updated.

The Montage Collections Library is a fundamental pillar of the MontageJS data binding system, but you can also use it by itself in your own JavaScript applications. The library’s diverse medley of sets, maps, arrays, and other collections can be used in the browser through Browserify, Mr, or any compatible CommonJS module loader. On the backend, you can take advantage of the provided npm packages to use the library in node.js.

We want to make it easy for you to adopt the library and start using it productively with as little friction as possible. To that end, we are pleased to announce the launch of the new CollectionsJS website, an interactive documentation explorer for the collection library. The site’s features include:

  • A tool that walks you through choosing the right collection for a job
  • A search bar that will take you directly to any collection or method by name
  • Interactive examples for collections and methods
  • Comprehensive cross references

The site itself is on Github. It is our hope that this reference helps make Collections.js an indispensable part of your tool chain.


Montage Studio demos featured in Apple’s WebGL presentation at WWDC

Apple unveiled new versions of its desktop and mobile operating systems this month at its annual Worldwide Developer Conference (WWDC). Among the technical details disclosed during the event, there were several revelations of particular significance for Web developers. Most notably, Apple announced full support for WebGL in its desktop and mobile browsers.

During a dedicated WWDC session about WebGL development, Apple engineer Dean Jackson showed two demos from Montage Studio and highlighted our MontageJS framework in a selection of open source libraries for WebGL development. We’re really proud that Apple chose to showcase our work and hold it up as an example of the kind of experiences that WebGL will enable on the Web. You can see the session yourself by watching the Creating 3D Interactive Content with WebGL video in the Safari browser on Apple’s WWDC session video page. Or click here to download a 355MB high-definition video of the session.

The Montage Studio Eco Homes demo

The Montage Studio Eco Homes demo

WebGL is gaining considerable traction, seeing widespread support from browser vendors. Google, Microsoft, Mozilla, and Opera have already delivered WebGL compatibility in their browsers. Now that Apple has joined the party, developers can build WebGL content with confidence that it can be consumed in all modern browsers.

The MontageJS 3D components

Earlier this year, we released a set of WebGL-based MontageJS components that make it easy for designers and developers to incorporate interactive 3D content into their Web applications. With MontageJS, you can use a unified component system to build rich experiences that cross the boundary between 3D content and the page DOM scene graph.

You can take a 3D scene created in conventional tools like Maya, 3D Studio Max, or Sketchup and load it into a MontageJS application. The framework lets you use CSS to modify and animate elements of the scene. Our 3D MontageJS components are available as open source on GitHub, but the easiest way to use them is in Montage Studio, our browser-based visual application authoring environment.

Some shiny real-world examples

We’ve built several applications with our 3D components to demonstrate real-world uses. Our Eco Homes demo, one of the Montage Studio applications featured by Apple during the WWDC WebGL session, shows a rich 3D rendering of the interior of a house. An option panel alongside the 3D rendering lets the user select various home customizations, including certain household appliances and different materials for a kitchen counter.

As the user selects their customizations, our data binding system ensures that the changes are reflected instantly in the 3D view. The demo uses animated camera transitions to move focus to the relevant items in the scene as the user flips through the various preference panels.

The Eco Homes app was largely built for use on touch-enabled devices. You can flick the preference panel up and down to switch between panes. If you resize your window while viewing the demo, you will notice that it takes advantage of responsive design techniques, scaling and adjusting the position of elements in order to ensure that the user gets a great experience on different form factors. We’re really excited about the potential that can be unlocked by using rich 3D graphics with the full, expressive power of the open Web.


In addition to the Eco Homes application, our Car Configurator demo was also shown during the WWDC session. The Car Configurator displays a 3D vehicle that the user can customize with a set of options displayed in a panel alongside the 3D view. The user can adjust the color the car’s body, frame, and interior. The user can click and drag the car to rotate it and can zoom in and out with the scroll wheel.

More great news for hybrid apps

Support for WebGL is great news, but it’s not the only improvement that Apple is bringing to its HTML rendering engine in the upcoming iOS and OS X updates. The company also introduced an impressive new high-performance JavaScript JIT compiler that will work in Safari and in third-party applications that use embedded Web views.

Apple has not previously allowed JIT compilation for JavaScript content running in embedded Web views. Introducing this feature, alongside a new high-performance JavaScript runtime, will give a profound performance boost to hybrid mobile Web applications that make heavy use of JavaScript. That’s great news for developers who want to use Montage Studio to build apps for Apple’s mobile devices.

These changes are part of a broader overhaul that Apple is conducting on its embeded Web view controls. In OS X Yosemite and iOS 8, developers will be able to use a new WKWebKit control that takes advantage of the multiprocess HTML rendering architecture that Apple uses today in Safari on the desktop. The new embedded Web view controls will have uniform APIs across desktop and mobile, making it easier to reuse code in hybrids. There’s also a new set of messaging APIs that make it easier to pass JSON objects between a hybrid application’s native code and the JavaScript context of an embedded Web view.

Apple is clearly committed to enabling a richer Web and more powerful hybrid Web applications. At Montage Studio, we welcome the latest improvements and look forward to taking advantage of them as we continue to build great experiences with Web technology.