Where It Runs: Browser, Server, Phone, Desktop

Kenji has read three blog posts and is worried. One says "learn frontend JavaScript", one says "learn backend JavaScript", and one says "learn React Native". He wants to know which JavaScript to learn first.

The honest answer is that there is only one. The same language runs in a browser, on a server, inside a phone app and inside a desktop app. What changes is the room it runs in, and what it is allowed to touch there.

This lesson shows the four rooms. Then it runs one program in two of them and gets the same output, which is the whole argument in one picture.

One language, four places

An engine is the program that reads JavaScript and runs it. Lesson 04 opens one up. For now, think of the engine as a box that runs the language, and nothing else. It cannot draw a page, read a file or open a network connection on its own.

A runtime is an engine plugged into a place, plus the extra tools that place offers. The browser is one runtime, and Node.js is another. The language inside is the same; the extra tools are not.

So "frontend JavaScript" and "backend JavaScript" are the same language in two different rooms.

The browser: JavaScript next to a page

Every browser has an engine inside it. When a website sends JavaScript, the browser runs it right beside the page you are looking at. That is how a "Like" button turns blue without the whole page reloading.

The browser's extras are the things a page needs. The most important one is document, which is the page itself, ready to be read and changed. Another is window, the browser tab around it. You will use both in Module 14, in a safe sandbox inside the lesson.

What the browser does not give you is just as important. A web page cannot read the files on your laptop on its own. That limit protects you from every website you have ever opened.

So in a browser, JavaScript can touch the page and cannot touch your files.

The server: Node.js

In 2009 a programmer named Ryan Dahl took V8, the engine from Google Chrome, and ran it outside the browser. He added the tools a server needs: reading and writing files, talking over the network, starting other programs. He called the result Node.js, usually shortened to Node.

Node is not a new language. It is the same JavaScript with different extras. Instead of document it has fs, the file system module, and process, the running program itself. Module 1 uses fs in the starter code that reads your input.

Big companies run real traffic on it. In 2013 PayPal rebuilt one of its busiest pages, the account overview, twice: once in Java and once in Node. Its engineering blog reported that the Node version was built almost twice as fast by fewer people, and cut the average response time by 35%.

So Node is V8 outside the browser, with files and a network instead of a page.

The phone and the desktop

The phone. React Native, made at Facebook (now Meta), lets JavaScript control a real phone app. The buttons and lists are the phone's own native ones, not a web page. Meta uses it in parts of the Facebook and Instagram apps, and Instagram's engineers have written about moving screens to it.

The desktop. Electron packs a browser engine and Node together into a desktop program. VS Code, the code editor many programmers use every day, is built on Electron. So is Discord's desktop app.

Neither of these is the first thing to learn. Both take ordinary JavaScript and put it in a new socket, which is why this track teaches the language first.

The same program in two consoles

A console is a text window where a program's printed lines appear. A browser has one hidden inside it, and Node prints to the terminal (the text window where you type commands). Lesson 05 shows you how to open both.

function area(width, height) {
  return width * height;
}

console.log("Area: " + area(4, 5));

Area: 20

The difference shows up only when a program reaches for a room's extras. Example 2 asks each room what it has.

console.log(typeof document, typeof window, typeof process);

undefined undefined object

const fs = require("fs");
console.log(typeof fs.readFileSync);
console.log(process.platform);
console.log(process.version.startsWith("v22"));

function
linux
true

The Playground: Node.js 22 in a box

Every Run button in this track sends your code to the Progsity Playground. Here is exactly what it is, so you never have to guess.

• It is Node.js 22. Your code is saved as a file called main.js and run with the node command, inside a sandbox (a locked box with time and memory limits).
• It has stdin and stdout. stdin (standard input) is the text you type into the Input box before you press Run. stdout (standard output) is everything your program prints.
• It has no page. There is no document and no window, as Example 2 showed. The browser lessons of Module 14 run in a separate sandbox inside the lesson.
• It has no internet. A program that tries to download something fails, as mistake 2 below shows.

The judged problems of this track run in the same box. That is why every problem reads its input from stdin and prints its answer, and never touches a page.

So the Playground is Node 22 with input and output, and nothing else.

const title = document.querySelector("h1");
console.log(title);

fetch("https://example.com").then((response) => console.log(response.status));

alert("hi");

Next, a different kind of question: what JavaScript can do for your career, with numbers and their sources.