JS Sketchbooksee JavaScript think ✏️
← back to the map
8

Modern JS & Tooling

The big question: “Modules, npm, debugging, ES6+, a taste of TypeScript”

but why do we need this?

Everything so far fits in one file. Real projects don’t: they’re dozens of files working together, plus tools written by other people, installed with a command and run from a terminal. Playwright itself is an npm package that runs on Node.js — so this phase is literally the setup routine of every job project you’ll touch.

in plain words

Real projects aren’t one file — they’re many files working together, plus code written by thousands of strangers. Modules let files share code with each other; npm is the world’s shared toolbox where that stranger-code lives (Playwright itself is one of those tools).

You’ll also get a first, brief look at Node.js — the way JavaScript runs outside the browser, in a terminal. Phase 9 goes deep on it; for now, just know that npm and Playwright itself are both Node programs.

Add professional debugging (breakpoints instead of console.log everywhere) and a first taste of TypeScript, and you’ll be at home in any real-world test codebase.

words you’ll own after this
module

One file that can share (export) its code and borrow (import) from others.

npm

The giant public library of JavaScript packages, plus the command that installs them into your project.

package

A ready-made bundle of someone else’s code you can install and use — like Playwright.

terminal / CLI

The text window where you type commands — how test suites are started and CI servers work.

CI

Continuous Integration — a robot server that reinstalls and re-runs the whole test suite automatically on every code change. Phase 11 sets one up for real.

git & the repo

git = the project’s version-control memory: it records every change ever made and shares them with the team. The repo is the shared project folder it guards; “committing” = recording into it.

TypeScript

JavaScript plus type labels the machine checks BEFORE running — catching mistakes early. Most Playwright projects use it.

after this phase, you can…
  • ✓Split code across files with import/export
  • ✓Create a project, install packages, and run npm scripts
  • ✓Debug with breakpoints instead of console.log guesswork
this phase’s lab — see it move

✏️ This phase’s interactive lab is still being drawn — it arrives together with the phase’s lessons.

the lessons
  1. 8.1
    Modules: import & export

    One file = one sealed module; export opens a door, import borrows by name — the dependency graph.

  2. 8.2
    npm & package.json

    Two million packages, one ID card: install, semver (^ ~), lockfiles, scripts.

  3. 8.3
    Debugging like a pro

    Breakpoints pause the world — Scope panel = your bubbles, Call Stack panel = your tower.

  4. 8.4
    ES6+ grab bag: ?. and ??

    Crash-proof lookups and honest defaults — 2.4’s promised upgrade, delivered.

  5. 8.5
    A taste of TypeScript

    Type labels checked BEFORE running, then erased — why Playwright projects speak TS.

  6. 8.6
    Checkpoint: dependency detective

    A real Playwright project’s package.json, decoded line by line — case closed.