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.
Don’t worry too much about libraries at this point. You’ll be able to find the good ones with a simple google 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 Angular, React and Vue.
Frameworks come and go every few years. Before Angular, React and Vue were popular, Backbone, Ember and Knockout took center stage. In the next few years to come, new frameworks may appear and overtake Angular, React and Vue.
Since frameworks require you to build applications in their specified way, you need to discard everything you’ve learned about a previous framework when you pick up a new one. The only knowledge you can transfer from one framework to another is, well, your knowledge of JavaScript and how applications generally work.
(Note: the above discussion doesn’t include frameworks that lean towards the CSS side like Bootstrap and Foundation).
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.
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. Right? 😄
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?
I recommend you put aside everything you’ve read in this chapter—even if they sound foreign, confusing or even remotely interesting to you.
Focus on learning JavaScript and Web APIs before moving onto libraries, backend or even tooling.