Why Does JavaScript have so many names?

The JavaScript ecosystem is confusing for everyone that doesn't do JavaScript for a living. There are so many names for all of the flavors, versions, libraries and frameworks involved in writing JavaScript. This is a quick read that should help set it (a little) straight.

First some history, and background. In the beginning (1995) there was JavaScript in the browser. You can think of this as "vanilla" JavaScript (people just mean plain old JavaScript when they say "vanilla"). JavaScript was used for simple scripting in the browser, it did things like basic animations and responding to click events on web pages.

Ajax changed everything

Then, AJAX came (Asynchronous JavaScript and XML) which let you fetch and post data to a server without refreshing your web browser. What does that mean? Basically that you could update data on the webpage without reloading the entire page.

An early example of this was Gmail. You could read and send email from your browser and it wasn't clunky and slow. You didn't have to wait for a new page to load every time you clicked a button! But, to do this you needed to write a lot of JavaScript. With AJAX, everything changed and all of sudden people started to need help with this.

The rise of the utility libraries

Around this time jQuery, ProtoType, YUI and other JavaScript libraries became popular. You could do things like AJAX and complex animations with many fewer lines of code if you included the jQuery library. jQuery is a just a collection of utilities written in JavaScript that are pre-built and can be reused. So when people say they know jQuery, it means they are using JavaScript.

But soon enough, websites became so large and so complex that simple utility libraries like jQuery were not enough (well arguably, jQuery is a huge library but some parts were still missing). We wanted to do everything in JavaScript and we wanted to make it easier.

Also, Steve Jobs killed flash

You used to be able to write incredibly interactive websites in Flash. But when the iPhone came out this was not supported on apple devices for performance and security reasons. The result was that JavaScript and HTML5 (a lot of new browser features) had to do the heavy lifting that flash once did. Again, more libraries and more splintering ocurred in the land of JavaScript.

The rise of the SPA frameworks

SPA is an acronym for "Single Page App". What that means is that when you go to a web page it loads the website once, and then from there on out only updates are rendered. Think about Facebook. When you go to facebook you scroll on the newsfeed, view posts, and message people in your browser and the screen never flickers and you never need to hard refresh. The page just incrementally updates the experience feels smooth.

To do this you need a lot of JavaScript, and dynamically updating only sections of the web page is hard. So people made frameworks so that this was a bit easier. This is where Ember, Meteor, Angular, React and Vue come in. These are all JavaScript libraries (these are so large they are often called "frameworks"), just big collections of JavaScript code that let you write a SPA style website faster.

These frameworks have taken over. The site you are reading this on was made using React, and almost any site with any interactive complexity is a SPA written using one of these technologies.

Did you notice when you click around on this site it loads super fast? That is because it is using React + React-Router and everything is already loaded, it is just re-rendering locally when you request new pages.

ES2015 / ES6

ES6 or ES2015 is just an update to the EcmaScript spec (developed by TC39 - a committee), which you can think of as a document that is used to define the features that are part of JavaScript.

People often include references to ES2015, ES6, ES7, ES2016, ESNext, or anything like that in their job descriptions and resumes. You might be scratching your head but they are just talking about JavaScript, that is all.

These spec updates are referenced by year, and people are simply saying that they are up to date with the latest "vanilla" JavaScript features. Your web browser updates frequently, and often new JavaScript language features are being included. JavaScript has been evolving fast and incrementally since the big 2015 update, and this is what you have to understand is being talked about with all of these "ES" designations.

Another thing people do (which is confusing as well), is just talk about single features that have been released into JavaScript. Somebody mentioned async/await? Well, they were talking about a specific new feature in JavaScript. Again, it is confusing, but that is all they are talking about because JavaScript is evolving so quickly.

Node.js

Node.js (usually just Node) is just JavaScript on the server. It is essentially the same basic language that runs in your web browser but it is meant to be run on servers. Backend developers use Node for writing web servers, API servers, ETL scripts and whatever else can be done on a server.

Node is still JavaScript, but it has some extra things. For example, you can access a file system, connect to a database, or start up another child process. You can't do that stuff in the browser version of JavaScript. A lot of the same JavaScript libraries can be used in Node and in the browser (for example on a React site), but not all of them.

TypeScript

TypeScript is another language entirely but it is basically JavaScript with types. I'll be writing another article to explain types but for now just think of it as a way to describe what format data should take.

The important thing to know about TypeScript is that you can use it almost any place you could use JavaScript, the reason being is that TypeScript compiles to JavaScript. What does that mean? Well you can think of compilation as a transformation process, so its fine to say that before TypeScript code runs it is transformed into JavaScript. Ultimately in whatever context it is used, JavaScript is still being run.

In Summary

JavaScript has many names and spawned thousands of libraries and technologies. You might be surprised that you can think of almost any english noun, add a ".js" to the end of it and google it and you will very likely come up with a real JavaScript library. For example - "owl", now add the ".js", is it a thing? Yep. I've never heard of it before, but it is indeed real JavaScript code.

The pace at which JavaScript evolves can be overwhelming. New popular libraries, frameworks, and flavors of JavaScript are being created all of the time, and I will be updating this article as I see big trends emerge. Have you encountered something you want me to explain, or did you find something I left out here? Drop me a line and I will happy to update this or write up a new post!