DEV Community: Matteo Cargnelutti

Server-side JavaScript a decade before Node.js with Netscape LiveWire

Matteo Cargnelutti — Sun, 12 Sep 2021 15:08:21 +0000

The year is 1996. JavaScript is less than a year old, making its grand public debut with the release of Netscape Navigator 2.0 to a both intrigued and somewhat bewildered web development community. We are at the very beginning of what would become "The First Browser War": how JavaScript evolved and grew in that context is a story often told, but did you know that JavaScript was also used as a server-side scripting language as early as 1996?

Today we're going to have a look at Netscape LiveWire, an extension of "Netscape Enterprise Server" that made writing server-side JavaScript applications possible more than 10 years before it was cool.

The dawn of server-side J(ava)Script

While Netscape and Microsoft were distributing their browser free of charge, both companies were also in the business of selling enterprise-level software to companies and institutions looking for a "one stop shop" solution to their web server and web development needs. This constituted an important part of Netscape's business model, and something Microsoft invested in as part of their newfound interest for the internet.

We therefore had Microsoft on one side with the "Internet Information Services" (IIS) suite, featuring their "Active Server Pages" (ASP) server-side scripting technology, and "Netscape Enterprise Server" with its LiveWire application development solution on the other.

While ASP did support JScript (Microsoft's early implementation of JavaScript), it was only one of the 3 languages supported, alongside VBScript and PerlScript. Netscape chose a different approach and went "all in" with server-side JavaScript, which was the centerpiece of LiveWire.

How did LiveWire's server-side JavaScript work?

Looking back at how LiveWire worked from today's perspective is both fascinating and slightly disorientating. We're only a decade - but galaxies away - from Node.js and its event loop-based, single threaded model. Netscape's server-side implementation of JavaScript was much more of an HTML preprocessor than a multi-purpose runtime, not dissimilar to early-days PHP in some of its inclinations.

Everything starts with the `<server>` tag

LiveWire introduced a <server> tag, the likes of ASP's <% and PHP's <?php delimiters, used to determine which parts of a given HTML file contained JavaScript logic that needed to be processed on the server before being sent to the client. A global write() function was used conjointly to "print" content on the page.

<!-- Welcome to mid-90s HTML. 
Tags are SCREAMED, because everybody is very excited about THE INTERNET. -->
<HTML>
  <HEAD>
    <TITLE>My awesome web app</TITLE>
  </HEAD>
    <BODY>  
    <H1>
      <SERVER>
      /* This tag and its content will be processed on the server side,
      and replaced by whatever is passed to `write()` before being sent to the client. */
      if(client.firstname != null) {
        write("Hello " + client.firstname + " !")  
      }
      else {
        write("What is your name?")
      }
      </SERVER>
    </H1>

    <FORM METHOD="post" ACTION="app.html">
      <P>
        <LABEL FOR="firstname">Your name</LABEL>
        <INPUT TYPE="text" NAME="firstname"/>        
      </P>

      <P>
        <INPUT TYPE="submit" VALUE="Send"/>
      </P>
    </FORM>
  </BODY>  
</HTML>

To prevent unnecessary cluttering of the HTML files, backquotes could be used as a shorthand for the combination of <server> and the write() function, making for a smaller footprint:

<!-- Long form: -->
<H1><SERVER>write("Hello " + client.firstname + " !")</SERVER></H1>

<!-- Short hand: -->
<H1>`"Hello " + client.firstname + " !"`</H1>

The `jsac` compiler and `.web` files

LiveWire apps required a compilation step. Using the jsac compiler, users had to merge all of the app's HTML and JavaScript resources into a single .web file. The idea was that every HTML file added to this bundle was to become an entry point for the app, accessible via a url, while loose JavaScript files were meant to be shared resources, allowing to define global functions that could be used in <server> calls across multiple HTML files.

The resulting .web files contained bytecode that could then be executed by Netscape's JavaScript runtime, waiting for HTTP requests to come in.

# Example: Compiling a LiveWire app made of a single HTML file.
jsac -i app.html -o app.web

# Example: Compiling a LiveWire app made of multiple HTML and JS files.
# The `-f` option targets a file containing references to all the files that need to be bundled together.
jsac -f files_list.txt -o app.web

Netscape's runtime was multi-threaded and allowed for sharing objects between threads of a given application. Shared objects could be accessed and modified by any thread, which made it easy to share state between clients but also came with important thread safety risks. A locking mechanism was available, but not automatically enforced.

What were some of its core features?

LiveWire was built for "enterprise" customers, and some of the architectural decisions that were made could be explained by this constraint.

There was for example a clear focus on database connectivity, interoperability with Java classes and native libraries (LiveConnect and jsacca), all of which making it easier for potential clients to integrate LiveWire into their existing infrastructure and codebases, at least in theory.

Netscape's server-side JavaScript implementation also came with APIs for session management, forms processing, file system access, and even sending emails in later versions, which made of LiveWire a seemingly complete and viable solution for backend development.

Was LiveWire a success?

LiveWire was a very interesting and innovative piece of software, but never came come close to becoming the gold standard of "professional" server-side development of the late nineties. While it is hard to pinpoint a single reason why that was the case, here are a few clues, in no particular order:

Having to compile and bundle everything, including HTML content, made for a somewhat cumbersome developer experience. This review of LiveWire's development cycle by Philip Greenspun describes these woes in great detail. LiveWire's direct competitor, Microsoft ASP, didn't require a compilation step.
JavaScript was a very young language at the time. It still had to prove itself, and hadn't yet become popular enough to have a large pool of developers and libraries available. This article by R. Allen Wyke from 1999 is a good example of how, even a few years later, JavaScript had to be advocated for.
Netscape didn't necessarily invest as much as its competitors, and LiveWire quickly lagged behind in terms of features. This 1997 article from the Chicago Tribune shows how LiveWire started to lag behind the competition, a year after its launch.

What did LiveWire become?

"Enterprise-grade" software means long term support. Through successive acquisitions, "Netscape Enterprise Server" was rebranded multiple times and merged with other technologies, which explains why LiveWire's documentation can be found on Oracle's website.

It is a bit difficult to trace exactly how LiveWire evolved in that context, and figure out when exactly it was discontinued.

Its legacy is an interesting one: while it is not hard to find comments on the internet about how seemingly hard and unpleasant it was to work with this technology (1) (2) (3), it remains an important piece of JavaScript's history, as it was one of the very first attempts at making the language live outside the browser and compete on the "for business" market of software development solutions.

HTML postmortem: frameset and its legacy

Matteo Cargnelutti — Mon, 13 Jan 2020 03:35:36 +0000

Ever wondered where the target="_blank" attribute came from, what it means and why it behaves the way it does? A little bit of HTML history might help with that 🤓📖.

Part of the HTML 4 standard, <frame> and <frameset> were all the rage in the late 90s and early 00s. At a time where CSS wasn't commonly used for layout and WYSIWYG Web editors were very popular, <frameset> offered a simple way of building somewhat complex layouts by allowing to split the browser's window into a grid of separate HTML documents. In a way, they were the old web's solution to challenges the web development community still faces today, such as code modularity and bandwidth usage reduction, and came with many important limitations and side effects we'll go over in this article.

Let's explore together how this now-deprecated web dinosaur that is <frameset> worked, what were some of its limitations, and what its legacy to the modern web is.

How did it work?

The <frameset> tag took the place of the <body> tag: it was used to indicate to the browser that it was meant to load multiple HTML documents, represented as <frame> elements, and how they were supposed to be displayed on the screen, using cols and / or rows.

<!-- This is late 90s HTML, tags were SCREAMED! -->
<FRAMESET cols="25%, 75%">
    <FRAME name="sidebar" src="menu.html">
    <FRAME name="main" src="home.html">
</FRAMESET>

It was even possible to nest <frameset> tags to use the cols and rows attributes in combination, allowing to build more complex grids.

A special HTML Doctype was available and was "sometimes" needed to allow for the rendering of <frameset>-related tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

Having multiple separate documents in a single browser window led to some complications, the first of them being deciding where a given link should open. Hence was created the target attribute for the <a> tag, which stands for "frame target": If provided the name of a given <frame>, target allowed click on <a> to open in a cell of the <frameset>. A few special targets were defined, such as the still overused _blank, allowing to open the link in a new window.

<A href="contact.html" target="main" title="[...]">Contact</A>

Finally, since this patchwork of HTML documents was meant to be a single page, JavaScript had to be able to talk and share information between frames, and even sometimes across domains ... which we'll talk about a bit more when discussing the security issues of framesets.

What was it "good" for?

The main advantage of <frameset>-based websites was that they allowed for code reuse and modularity: splitting a webpage in separate documents, organized by role, made possible to focus on the development of a part without affecting the other, of containing code and its effects in a <frame>.

This very feature could also help, in a way, with performance: only reloading parts of a page when navigating made for smaller payloads, which is still relevant today but was critically important in the before-broadband-internet times.

But more importantly, they were an easy-to-use layout tool, that styling alone could not help achieve at the time: there was no "more semantically" correct way of doing things available at the time.

Risks and limitations

Proper search engine indexation was really hard to achieve using <frameset>. Using target on a link to open a page on a given <frame> meant that the window's main url was not changing: <frameset> pages did not have a publicly accessible url, while individual frames where still crawlable.
As a result, search engines were often indexing single frames separately, which led users to land on "broken" websites, and on an information deprived of its intended context.

As they were multiple in effect "screens" in one, <frameset> were also poorly supported by screen readers, making it challenging to build accessible websites.

On the performance side of things, <framset>-based websites had a significant advantage once the first load was done: as navigation was happening on generally one or two of the frames, most of the frames didn't need to be reloaded. But this also meant that, on first load, the browser had to download and parse more HTML documents.

Finally, they were and still are a security headache: the ability for frames to interact with their parents and siblings via JavaScript - even across domains - gave birth to many attacks pattern we are still reckoning with today.

What remains of it today?

Besides everything that it taught us, and the millions of older websites out there that are still using <frame> and that would have been much different otherwise, I feel like one of <frameset>'s main legacy to modern web development is the target attribute for the <a> tag, and the security, accessibility and performance challenges it poses.

When using target="_blank", we must add rel="noopener noreferrer" to let the browser know that it should not allow the new window to access the window that called it. While modern browsers implement some default protections to prevent leaks, without rel="noopener noreferrer", it is still possible to access some of the caller's information via window.opener, a behavior inherited (to a certain extent) from the <frameset> era.

But access to window.opener (the caller's window object) is also the main reason why target="_blank" can be a threat to performance: sharing objects across pages means sharing memory, which gives the browser less opportunities to separate processes and threads. Jake Archibald wrote a terrific blog post about "The performance benefits of rel=noopener" back in 2016.

Its dizzying, sometimes, to look back at the origin of all things web and see how ideas from the past - that we sometimes completely forgot about - still have an important impact on our everyday lives, and how things evolved for the better.