JavaScript in the Real World

About this course

JavaScript Deep Dive taught the language. This course is about the places it actually runs and the tools every team uses with it: the browser's DOM, events, fetch and CORS; Node.js and npm, with version ranges and lockfiles; TypeScript with runtime validation; a small API in NestJS; and the performance, memory and security habits that keep all of it healthy.

Every lesson follows one fictional grocery chain, Mangrove Market, through problems real teams hit: a dashboard that goes blank after a domain change, a report that crashes on the wrong Node version, a price cache that slowly eats the server's memory, and a notes box that runs an attacker's code. Each one is reproduced with real commands and real output, then fixed.

You write code in every lesson. Auto-checked exercises run in your browser with no setup, each lesson has a podcast episode for the bus ride, and a capstone project and a final exam lead to a free certificate.

What you will be able to do

• Update the DOM safely, handle a whole table's clicks with one delegated listener, and call APIs with fetch while showing every loading, empty and error state
• Explain a CORS error and its preflight in plain words, and fix it on the server for exact origins
• Read package.json and semver ranges, predict what npm installs, and keep builds reproducible with a lockfile, npm ci and a pinned Node version
• Use strict TypeScript with unions and narrowing, and validate untrusted input at runtime with a schema shared by the API and its clients
• Build and test a small NestJS API with validation, guards, config checked at startup and end-to-end tests
• Find leaks and slow code with heap snapshots and CPU profiles, and close the common JavaScript security holes: risky dependencies, XSS, leaked keys and prototype pollution

Syllabus

6 stops, about 3.5 h in total. Each stop fills in when you complete the lesson.

1. 1

   JavaScript in the browser

   Every web screen Mangrove Market ships, from mangrove-dashboard to the back-office pages its buyers use, runs on the same few browser ideas: a tree of elements, events that travel through it, fetch to talk to APIs, and a pipeline that turns changes into pixels. Learn them once and React, and even React Native, make much more sense.

   35 minIntermediateEpisode1 exercise

   Browser JavaScriptEvent delegationCORS and fetch

2. 2

   Node.js and npm

   Every JavaScript project Mangrove's engineers own, from partner-api to store-app, starts with a package.json and hundreds of packages someone else wrote. This lesson shows what Node is, how npm decides which versions to install, and how a lockfile and a pinned Node version end "works on my machine".

   35 minIntermediateEpisodeSimulator1 exercise

   npm and lockfilesSemantic versioningNode.js tooling

3. 3

   TypeScript for a JavaScript team

   TypeScript adds types to JavaScript, checks them before the code runs, and then removes them. Mangrove Market's NestJS APIs and React Native apps are already written in it. This lesson shows what the checker really catches, what it cannot catch, and how to share one set of types between the API and its clients.

   35 minIntermediateEpisode1 exercise

   TypeScriptRuntime validationShared API contracts

4. 4

   From script to service: a small API in Node

   A script runs once and exits. A service listens all day, serves many people at once, checks every request, logs what happened and fails politely. This lesson builds a small stock API three ways, then properly in NestJS, the way Mangrove's partner-api is built, with validation, config, errors and an end-to-end test.

   40 minIntermediateEpisode1 exercise

   Node.js APIsRuntime validationAPI testing

5. 5

   Performance and memory in JavaScript

   Most slow JavaScript is slow for a boring reason: one loop does far too much work, or memory grows until the process crashes. This lesson shows what the engine does with your code, how the garbage collector decides what to free, and how to find a leak or a hot function with real tools instead of guessing.

   35 minAdvancedEpisode1 exercise

   Performance and memoryProfilingCaching

6. 6

   Security and quality in JavaScript projects

   A typical JavaScript project runs code from hundreds of strangers, ships its front end to every user's device, and puts user text on screens. Each of those is a door. This lesson shows how attackers use them, and the small set of habits and tools that keep them shut.

   35 minAdvancedEpisode1 exercise

   JavaScript securitySupply-chain securityXSS prevention

7. Capstone: Harden the Mangrove store stock service

   A realistic project with a rubric and a model answer.

8. Final exam and certificate

   10 questions drawn at random, 70% to pass.

Capstone project

Check what you know

Questions