loading...
Cover image for How JavaScript came to dominate web development

How JavaScript came to dominate web development

jasonnordheim profile image Jason ・6 min read

The story of JavaScript

The web gets accessible

In the 1990s, the first user-friendly, graphical web-browser ("Mosaic) was released by developer Marc Andreessen from the National Center for Supercomputing Applications at the University of Illinois. ("Mosaic) was then replaced with the Mosaic Navigator, which later became the Netscape Navigator.

These "navigators" - which we now refer to as web "browsers" - made the web accessible to every one; not just those who knew how to use a command-line.

Java and the Web

Sun Microsystems, bought by released [Java] in 1995. Java borrowed syntax from C/C++ languages, but had a key a difference: Java was a compiled language that could be run on any operating system as long as the Java Virtual Machine was installed on the system. This embraced the idea of "WORA" or "write once, run anywhere". By re-designing the code base to be run through a virtual machine, Developers could develop a single code base, speeding development and reducing bugs.

Java "applets" were introduced to build on this idea, but in the context of the internet. A Java applet was simply a Java application embedded in an HTML web page. While simple, this enabled Java developers to not only deploy desktop applications, but also web applications using the same robust, high-level programming language they were used to. Now Java applications could be delivered to any operating system over the internet and be run on most computers, as long as the Java virtual machine was installed on the client system.

Undeniably useful; Applets had a critical flaw - Java applets were in-effect isolated from the DOM (Document Object Model). This separation meant that Java applets could not "see" (be aware of) or mutate (modify) the DOM. Java applets, just like all other Java code had to be compiled through a virtual machine before it could be run on the client system, and the Virtual machine couldn't parse the DOM, just the Java applet - in-effect isolating the applet from the web page.

Netscape and JavaScript

To make more dynamic applications that didn't have the limitations imposed by the compilation process and virtual machine required to run Java applets, Netscape contracted Brendan Eich to build a brand-new "scripting" language that would enable developers to add interactivity and functionality to HTML documents, animate HTML content, perform conditional validations, and lay the foundation for a more dynamic and more comprehensive (i.e. "more desktop like") browser experience.

Netscape required Eich create this new "scripting" language with a couple of requirements:

  1. Eich's new language needed to combine great amounts of functionality into minimal and simple code
  2. The language should use a syntax that was familiar and approachable to existing developers by resembling Java

To make the language, do a lot with little work; Eich sought to employ functional programming schemes that made it quick, and simple to write procedures that would could process and/or generate data, as well as respond to input with very few lines of code.

While it can be debated which programming paradigm is "best", Eich sought to combine the the the ability to encapsulate functionality and data within the OOP structure of "objects" and "classes", but remove the rigid structure and more elaborate setup common with traditionally OOP languages like Java.

With a these requirements in mind, Eich created a new programming language called "Mocha". Mocha was an interpreted and weakly typed functional programming language designed specifically for the web. Despite many name changes, Mocha (aka "JavaScript") was the foundation for the ECMAScript or JavaScript we know today. It required no compilation, no virtual machine, and could interact with the DOM natively. This new programming language was the first viable alternative to Java applets for web applications.

Competition & Browser Wars

As Netscape's development continued to gain traction and market share and revenue for web applications became significant, many other players stepped in to try to grab their share of the web application market. In 1996, software giant Microsoft reverse-engineered JavaScript to run its "navigator" or web-browser; Internet Explorer.

Determined to dominate the market, Microsoft not only supported JavaScript in Internet Explorer, but also bundled the browser with it's Windows 95 operating system. End-user's on the Windows Operating System now had a browser pre-installed and ready-to-go when the booted up their computer for the first time. No installation or configuration necessary.

Microsoft's strategy proved to be successful, but Microsoft didn't just want to compete in this new market, Microsoft hoped to dominate it. In an effort to accomplish this goal, Microsoft developed a web-language of its own CSS or "cascading stylesheets". With CSS, developers could make their web pages not only interactive, but also beautiful.

It wasn't long before Internet Explorer became the default browser used by most people. Microsoft's strategy had worked. Netscape responded by launching anti-trust lawsuits against against Microsoft, and even defacing the "e" logo statue outside Microsoft's office. Despite Netscape's effort's agains the software giant, by 1999 - Internet Explorer controlled 99% of the market.

Ending the war

Netscape was fighting a losing battle, and rapidly losing market share. While the company may not survive, their mission to advance web development remained vital to the company's leaders.

In an effort to ensure the web remained open and accessible for everyone, Netscape took their technology open-source, handing over ownership to non-for-profit Mozilla. Under Mozilla, "Mocha" which had became "LiveScript" then JavaScript, was standardized as "ECMAScript" by the ECMA International standards organization in 1997.

Continuing on its' mission to keep the web open and accessible; Mozilla developed and released it's own open-source web-browser - "Firefox". As competitors continued to enter the market introducing their own browsers (Opera, Safari, FireFox, etc.), Internet explorer slowly started to lose its domination of the market. Despite competitors, Internet Explorer continued to be the dominant browser with market share only falling to 50% by 2010.

OOP or Functional?

Starting with a functional approach Mocha/LiveScript/ECMAScript/JavaScript centered around the idea of a executing procedures on a "scheme". This scheme we now call the DOM or Document Object Model. This functional approach made simple applications a breeze to develop, but was fundamentally different from the OOP languages that had been common in application development.

Eich sought to enable OOP design principles in JavaScript through an idea of "prototypes" and "prototypal inheritance". With the addition of prototypes and prototypal inheritance, JavaScript employed principles from both functional and OOP programming programming paradigms.

As with most changes of significance, controversial and largely unpopular at first, because it was different. No programming language before had combined OOP and functional programming paradigms like JavaScript did, and no language had been designed exclusively to be executed in a browser.

Some developers resented the lack of structure with JavaScript, primarily as JavaScript code could be written using OOP principles, or Functional principles. While flexible, this meant that the format and structure of JavaScript applications varied dramatically. Additionally, the weak-type system, varying browser support, and interpreted nature of JavaScript sometimes resulted in web applications that could look different on different browser's and were often buggier then their strongly-typed counterparts.

Despite the controversy, demand and use of web applications continued to rise and JavaScript became the primary programming language for web development. With a large developer base, and open-sourcing, the language was quickly integrated and improved upon with the third version of ECMAScript (which had started as "LiveScript", and had been "Mocha" before that) was released in 1999 further increasing the performance and feature-set offered.

Blurring the desktop and web experience

In 2005 a ES4 (ECMAScript version 4) arrived with a headline feature: AJAX. AJAX or "Asynchronous JavaScript and XML" enabled asynchronous execution of functions/procedures. With asynchronous code execution, web applications could remain responsive to input even while executing expensive (i.e. "demanding") operations.

JavaScript continued to evolve rapidly as projects, libraries, and frameworks made it faster and easier than ever to quickly build web applications. Libraries like jQuery were built on top of JavaScript, and reduced development time with useful helper functions for common operations, while simultaneously abstracting these operations so that the end-result was the same regardless of the client's browser of choice.

In 2009, ES5 (ECMAScript 5) was released, followed by ES6 in 2015. With each version came increased browser support, increased performance, as well as additional features that was easier to execute common functions and more readable/intuitive code. With the release of ES6 (officially published as "ES2015") new syntax and more controlled scoping largely closed the gap in feature-set offered by JavaScript in comparison to traditional languages.

JavaScript today

Allowing development of web applications that utilize OOP or functional programming principles - JavaScript remains the primary avenue for creating web applications. JavaScript remains a flexible, modern, and powerful programming language for a wide variety of applications, and is the most popular programming language used by developers today.

References

Discussion

pic
Editor guide
Collapse
manishfoodtechs profile image
manish srivastava

Nice article. But I think something what makes js more fav for devs.

Js is easy. With npm you get almost of everything you want.
Progressive web app / lite apps are possible with service worker easily. This includes web push notifications .

Collapse
jasonnordheim profile image
Jason Author

thanks for the feedback!

Sure, NPM and PWAs are built using JavaScript, but for this article, I really wanted to focus on vanilla JavaScript, and how it made, and how it developed as the language we know today.

Maybe I'll do another one on PWAs or NPM ... #ideas

Collapse
abdisalan_js profile image
Abdisalan

How JavaScript dominated the web:
Its literally our only option, otherwise it would've been replaced decades ago.
I like the post though!

Collapse
amarok24 profile image
Jan P.

But it's changing today. Vanilla JS is not the only option anymore.
We now have TypeScript, Dart, Kotlin and some other languages which "compile" into vanilla JS. Google even tried to get Dart into Chromium but didn't succeed. But it is already possible to use another language than JS and don't care about the final (generated) JS code.

Collapse
ben profile image
Ben Halpern

Great post

Collapse
jasonnordheim profile image
Jason Author

I'm so glad you liked it!

Collapse
aadityajha2004 profile image
Aaditya

That just make studying history fun😀. Great Article

Collapse
jasonnordheim profile image
Jason Author

I'm glad you enjoyed it. I worked hard to add some fun and enthusiasm to the post!

Collapse
sami_hd profile image
Sami

Javascript used to be interpreted. Now it's compiled.

Collapse
jasonnordheim profile image
Jason Author

Yes and no... at runtime, JavaScript is still an interpreted language, however it is true most web apps today are run through compiliers. Frameworks like React, Next JS, Gatsby, Angular and Vue all use JavaScript compilers like Babel and Webpack to optimize JavaScript source code and minimize bundle sizes to make help it run more efficiently at Runtime, but the when a browser is running JavaScript code, it is still interpreted.