Evolution of JavaScript

From humble beginning to the behemoth it is now, JavaScript has changed in its 25 years of existence. But how did it get to where it is today?

Before beginning my software engineering bootcamp, I had to complete "pre-course" work. Despite being unrepresentative of the course rigor, it did introduce me to a lovely library called jQuery (introduced in 15 minutes by an energetic man named Travis). Cramming everything in 15 minutes was bound to leave some knowledge gaps, but I learned enough to complete the pre-course work and my mind quickly forgot about what JavaScript was before the invention of frameworks. 

By the end of my first week of HackReactor I had written my first React component. Intricacies within React were drilled into us (wait, you mean capitalization matters??) and I never considered alternatives. We were taught the what of React, rather than the why - why do we use frameworks over traditional JavaScript? I’ve been a professional developer for only a year, but even I have noticed that everything in engineering is a trade off - making an informed decision requires balancing the pros and cons. I wanted to know the why of a framework - for my own personal knowledge, and with the belief it would deepen my understanding. I wanted to know the evolution of JavaScript - the crucial historical moments that got us here. The moments that got JavaScript to the top of programming language chart.

JavaScript itself was written in just ten days by Netscape developer Brendan Eich. In 1995, Netscape was engaged in a fierce browser war with Microsoft over who would be the leader of the nascent World Wide Web. Frustrated with Microsoft's business tactics / monopolistic demands, Netscape decided to release a scripting language with the newest version of their web browser - the goal to allow for non-programmers to code websites. Adoption was highest among designers and non-programmers, but the early language was clunky. Programmers turned their noses at the simplicity of it - early versions did not even support exceptions. With Microsoft winning the browser war and pushing Netscape out of the market, JavaScript became an afterthought and languished in its early years, until it received a jumpstart in the mid 2000s with the creation of two new technologies - AJAX and jQuery.

Browser incompatibility plagued the early days of JavaScript. Old websites featured banners alerting the user it "runs best on Netscape '' or "runs best on Internet Explorer". Developers had to keep browser discrepancies in mind when writing applications, but that wasn’t the only frustration. As web adoption grew, the demands on applications grew with it. Selecting elements on the page was (and is) fundamental to building a dynamic webpage, and navigating the DOM became clunky and unmanageable as you pushed the limits of website reactivity. jQuery, released in 2006, sought to fix both issues. jQuery provided a powerful API for interacting with the DOM, and abstracted away browser differences by wrapping it within the aforementioned API.

jQuery also simplified 'AJAX' calls. Unveiled by Jesse James Garrette in 2005 - short for 'Asynchronous JavaScript and XML' -  AJAX was pitched as the solution to wait times in between user form submissions. As the world moved from Web 1.0 to Web 2.0, websites began to incorporate more user input. Before AJAX, any client request was sent directly to the server. Old web application architecture waited for an HTML text response from the server whenever an HTTP request was made. This resulted in frequent wait times - the browser displayed a loading screen while waiting for the server to respond. By creating a JavaScript powered intermediary (referred to as an “engine”) between the client and the server, AJAX allowed developers to display content to the user while waiting for the server response. 

The combination of jQuery simplifying JavaScript syntax and AJAX smoothening the user experience led to a boom of JavaScript adoption. jQuery wasn't the only framework around in its heyday, but it was the most popular. More frameworks began to popup in the 2010s, with Google-sponsored Angular appearing in 2010 and the reigning framework king React appearing in 2013. 

Top image is an example of a HTTP request in vanilla JS, below is an example with jquery’s ‘ajax’ function. Note the simplicity and readability of the second snippet. Example taken from ‘A Brief History of Frontend Frameworks’

Angular was one of the first of "modern" frameworks. Released in 2010, Angular wanted to migrate frontend development from imperative programming (the paradigm favored by jQuery) to declarative. Angular developers believed declarative programming was best suited for frontend development work. Too much thinking power was spent on how to manipulate the DOM - Angular wanted DOM manipulation abstracted from the development process. Instead, the developer would describe (in JavaScript, of course) what the page should look like given certain data values, and the framework would handle the DOM manipulations under the hood. 

Component was introduced into the lexicon by Angular. A component is the building block of a web application - they're the bite-sized, sometimes repeated visual pieces that appear on a web page. When you browse the Twitter homepage and an aggravating tweet crosses your timeline - that tweet can be thought of as a component. jQuery did not provide architecture for structuring a web application into components - frameworks provide structure right out of the box, making it easier for developers to navigate the code base and organize their code. React and other frameworks provide similar value propositions over jQuery / vanilla JS - abstracting DOM manipulation and greater codebase organization. 

Single Page Application frameworks have continued to grow in popularity - in 2021 React finally overtook jQuery for top spot among JavaScript frameworks. Declarative programming and organization gains are only two of the reasons framework adoption has risen, but all the reasons answer a crucial single development question - 'How can I get my application up and running as quickly as possible?'. SPAs come with command line tools that can quickly create a web application and have integrable libraries that make it easy to add common features like state management and url routing. Growth is likely to continue - as more companies move to these frameworks, they're will be increased demand for programmers with JavaScript framework experience, which leads to an increase in the amount of developers who write in JavaScript, which - I think you get the picture. 

Someone could spend their whole frontend career without writing a single line of jQuery or vanilla JavaScript - but a good developer is always familiar with alternatives. Not until I began working on a personal project that I felt motivated to revisit jQuery. As I fleshed out what functionality my site needed, I asked myself "Do I really need all the bells and whistles of a framework to accomplish this?". If you find yourself in a similar position, I'd encourage you to take a trip into the past and see how the JavaScript cavemen used to do it. Our ancestors always have something to teach us.