The JavaScript ecosystem

JavaScript used to be a language that only works on the frontend. In recent years, JavaScript has also made it to the backend.

The frontend encompasses everything that a user can see, touch, or feel; that means everything that exists in browsers is classified as frontend technology. The frontend is also called the client-side.

The backend encompasses things that are kept hidden away from users; that includes a server (something that tells the client what to display) and a database (a place to store data). To make things simple, you can consider the backend to be like your computer. It is also called the server-side.

JavaScript on the frontend

JavaScript on the frontend interacts with browsers through a set of functions collectively known as Web APIs. You can find a reference of all Web APIs on MDN’s Web API Reference.

Don’t worry about the vast number of Web APIs at this point. You’ll learn the ones you need to know as you go through the course.

You’ll also find three major types of code resources — libraries, frameworks and plugins—in the frontend JavaScript world.

Libraries

Libraries are small collections of code that let you perform almost anything you can imagine on the web. For example, you can create amazing visualizations with D3, fetch stuff from other sites through Axios, or even make silky smooth animations with GSAP.

Each library has its own unique features and capabilities, and there are too many libraries to list in this course. That said, don’t worry about libraries at this point. You’ll be able to find the good ones with a simple google search when you need them.

In case you were wondering, jQuery is a library that irons out the inconsistencies between Web API implementation in different browsers. It used to be critical, but since recent browsers have built on the agreed specifications, you don’t need jQuery anymore.

Frameworks

Frameworks are huge code blocks that require you to write JavaScript in a specific way. They’re often used to build web applications. Examples of popular frameworks now include React, Vue, and Svelte.

Frameworks come and go every few years. Before React, Vue, and Svelte were popular, Backbone, Ember and Knockout took center stage. In the next few years to come, new frameworks may appear and overtake React, Vue, and Svelte.

Frameworks require you to build applications in a specific way — so when you use a new framework, you have to discard almost everything you learned about a previous framework.

The only knowlege you can transfer from one framework to another is your knowledge of JavaScript and your mental model of how applications work.

Plugins

Plugins are blocks of code that provide additional functionality to a library or framework. They cannot work without the specific library or framework.

JavaScript on the backend

JavaScript works on the backend through Node.js (people commonly refer to Node.js as Node). What this means is — when you write JavaScript on the backend, you need to do it through Node. Node then converts your JavaScript code into code that computers can read.

Through Node, you can access a computer’s file system (read and write files) and spin up a server for visitors to come to your website.

npm

npm is a package manager that comes bundled with Node. It allows you to find and download libraries (or packages) quickly by typing a command in the command line. It also makes it easy to update the libraries you’ve downloaded.

Spinning up a server

A server is required if you want to hide code away from users. You can spin one up with Node, very much like how you’ll do it with PHP, Python, Ruby and other languages.

Common frameworks for spinning up servers in Node include Express, Koa and Hapi.

Tooling

Many developers are attracted to JavaScript’s ability to work on both the frontend and the backend. This caused Node’s and npm’s popularity to explode, and people started creating libraries to help with tooling.

Tooling is a term used to describe the process of working with development tools. It includes the processes to help improve a developer’s coding speed by providing them with an optimal environment. It also includes processes to help developers automate the optimization of their assets for production.

There are lots of tools out there on the internet, but we won’t focus on them. After all, you’re here to learn JavaScript.

If you want to learn more about tooling, I’ve written a book—Automating Your Workflow—that walks you through the basics to tooling.

What should you learn first?

The answer is JavaScript since you’re reading this.

Put aside everything you have just learned about the advanced stuff for now — we’ll build your foundations over the rest of this course.