How Microsoft Contributed to Web Components Before They Became Web Components

This story takes place somewhere between 1997 and 2016.

A decade before modern day web components, Microsoft had already hit on a formula for their success.

In the mid to late 90’s, browser development fractured.

Along one fault line was Netscape Navigator, an established player; the most popular browser by a wide margin. Netscape added new features at a rapid clip in order to make the web more dynamic, more visual, and more interactive. They were an important part of the web standards process, but they often belied it in favor of quick iteration and new browser releases.

On the other side, Microsoft was playing catch-up. They sometimes implemented what Netscape already had. Other times, they included their own proprietary features—or web standards Netscape hadn’t gotten to yet—in an attempt to differentiate themselves.

The web was in transition. Developers wanted complex applications and websites that animated and moved through the surfing experience. In the midst of all of that, HTML components were created. Years and years later, they would be cited as “prior art” for modern day web components. But before the web got there, it followed a trail of technologies on the web that have since been almost entirely abandoned.

In the mid-90’s, Java was one of the most popular programming languages around. Sun Microsystems—the creator of Java—experienced a resurgence after its release, which they marketed heavily to large, enterprise IT departments. One of the promises of Java was that it let programmers, “write once, run anywhere” (much like the cross-platform promise of the early web). Java offered portability and performance in a package that for many developers felt intuitive and easy to use. It was rapidly adopted by large teams and individual developers as a way of creating complex software applications.

Sun knew that if it could embed Java applications on the web, it would provide a huge opportunity for developers. They created a browser of their own specifically to showcase that kind of capability. Released in 1997, HotJava was the first browser to include what’s known as Java applets, embedded applications written in Java and served via the web. It was suddenly possible for an organization to write advanced software for their entire company—a shared calendar or some writing software—and ship it to everyone instantaneously using the web. At least, in theory.

Applets provided the web with real value for two reasons. The first was the write once ethos. Big enterprise software solutions were being created with Java, and being able to ship those applications on the web was another prominent example of “run anywhere.” The second was the way it enabled discrete components to live inside of the web. By the mid-90’s, the dream of the web was shifting from something static and information based to something dynamic and application-driven. Many believed the web would one day replace the standard operating system (a fact that has, in some ways, come true, but not in the way that people imagined). Applets were another step towards that dream.

Netscape Navigator 2, first released in the fall of 1998, included Java applets in their browser. It was one of the most widely talked topics of the day.

Also included in Netscape 2 was a lesser known scripting language spun off conceptually (though ultimately completely separate and apart) from Java. It was called Mocha, and then LiveScript. Some developers were experimenting with it, but it lacked the buzz and reputation of Java, so Netscape renamed it to JavaScript to try to buy in to the hype.

In order to make JavaScript work, Netscape created what they called a “language independent object model,” used by the browser to structure a webpage programmatically in a way that allowed it to be changed dynamically and on the fly using a script. The W3C—the official standards body for the web—took this and created a specification for Document Object Model, or DOM.

It was Microsoft, however, and not Netscape that implemented the first version of the W3C DOM in Internet Explorer 4, released in 1997. Hoping to differentiate themselves in a browser market very much dominated by Netscape, Microsoft turned to HTML, CSS, and other web standards—as well as their own proprietary features such as the dynamic software framework ActiveX.

This blend of standard markup, the introduction of CSS, and additional scripting languages used to manipulate the DOM eventually became known as Dynamic HTML, or DHML. DHTML was Microsoft’s answer to Java applets. Partially as a response to ongoing conflicts Microsoft was having with both Sun and Netscape, Microsoft leaned away from Java and towards HTML and other standardized web technologies like the still-new CSS.

Which brought Microsoft all the way back around in 1998 with the release of Internet Explorer 5.5, which introduced HTML components. They extended the elements of the DOM in a way that made them accessible directly to developers.

With HTML components, developers could bind new behaviors directly to existing elements in HTML using a combination of CSS, JavaScript, and a specialized version of (believe it or not) XML. They made possible rollovers, animations, transitions, modals, and advanced forms and applications.

Even more interesting was the ability to create custom markup elements defined as HTML component behaviors. Using a new file format, developers could group metadata, JavaScript and HTML all in a single file and directly extend HTML to create an entirely something entirely new.

Writing about the Trident rendering engine when it was sunset by Microsoft, Der Schepp provides an example of this:

<public:component tagname="rollimg">
  <public:attach event="onmouseover" onevent="rollover()" />
  <public:attach event="onmouseout" onevent="rollout()" />
  <public:property name="src" />
</public:component>

<img id="image" />

<script>
  // IE's document.getElementByID
  var img = document.all['image'];
  img.src = element.src;
  img.id = undefined;
  element.appendChild(img);

  function rollover() {
    img.src = "rollover-" + element.src;
  }
  function rollout() {
    img.src = element.src;
  }
</script>

And then to add it to a page:

<custom:rollimg src="logo.png">

If you create application-driven websites today the above syntax might strike you as familiar. That’s because HTML components are not too dissimilar from modern day Web Components, which weren’t adopted by browsers until nearly a decade later. Web components are a series of Web APIs that actually allow developers to create unique HTML elements, with CSS and JavaScript bundled alongside.

If you use modern day frameworks like React or Vue, then single file type components might be familiar. Custom elements in Web Components can be passed attributes just as in HTML components, the latter of which also included a “viewlink” which ensured behaviors only applied to the attached element; not unlike the Shadow DOM of modern web components.

If the similarities feel uncanny, that’s somewhat by design. HTML Components, which were deprecated in IE10, served as an inspiration for Web Components. Yet even with HTML components as a reference, and after years of development, it took some time for Web Components to be adopted and put to use. A reminder that even as technology evolves, and comes back around to old ideas, it can take a long time for a rolling stone to gather enough moss to become a widely adopted, widely used technology on the web.

This post introduced 5 milestones to the Timeline.

Web Components

• July 10, 2011

• Alex Russell—representing his work via Google with the W3C and TC39—introduces Web Components on a public stage for the first time. They make possible the creation of custom HTML elements through a combination of familiar web technologies, such as CSS and JavaScript, as well as novel browser features like the Shadow DOM and HTML templates. The specification and implementation would go through years of iteration before it was formally adopted by browsers.

  
  

HTML Components

• July 23, 2001
• Upon its release, Internet Explorer 5.5 includes support for HTML components, which allows developers to attach new behaviors to existing HTML elements, and even create new elements using a combination of JavaScript, HTML, and a specialized version of XML.

Internet Explorer 5

• March 18, 1999
• The first Microsoft browser released to a market with a share greater than Netscape's, Internet Explorer 5 saw many improvements from previous versions. Its speed, usability, developer technologies such as ActiveX and XMLHTTPRequest support, and wide range of Internet features made it one of the most advanced browsers on the market. When the 5.5 version was released several years later, it would also include HTML components.

HotJava

• March 24, 1997
• Sun Microsystems releases their first and only browser to the market. Originally forked from Mosaic several years earlier, HotJava was rewritten in the Java programming language for its release. Its main differentiator was support for Java applets, a technology that made it possible to run full Java applications right inside of a webpage, later adopted by most major browsers.

Netscape Navigator 2.0

• September 18, 1995
• Netscape releases the second version of their browser on the heels of a massively successful IPO. The browsers is faster, includes an email and messenger client, and provides an easy to use layer for new web users. It is also the first version of the browser to include support for Java applets and an offshoot scripting language created at Netscape known as JavaScript.

Sources

• Michael Byrne. "The Rise and Fall of the Java Applet: Creative Coding’s Awkward Little Square." Vice. September 9, 2021. https://www.vice.com/en/article/8q8n3k/a-brief-history-of-the-java-applet
• Richard MacManus. "1997: The Year of DHTML." Web Development History. June 6, 2021. https://webdevelopmenthistory.com/1997-the-year-of-dhtml/
• Yakov Fain. "The unofficial history of Java applets." August 8, 2010. https://yakovfain.com/2010/08/10/the-unofficial-history-of-java-applets/
• Jason Cranford Teague. "CSS, DHTML, and Ajax, Fourth Edition." 2006. https://flylib.com/books/en/3.292.1.106/1/

First Published Here.