Context

Technology tends to be easier to understand if you understand its chronology. So here’s a brief on scripting in the web stack.

Basic Premise

In the beginning, there was HTML, CSS, and Javascript. HTML to design what the page layout and content should be. CSS to style the page. Javascript to dynamically change the page.

Modern Tech

And over time, new tech came with features:

React is Javascript
Next.js is Javscript + conventions
TypeScript compiles to JS
WASM is called by JS

Finer Details

React describes what a UI should look like.
Next.js is a compiler + runtime
WASM is a binary ran in the browser but called by JS.

Briefs on each

JS: the language
ES: how JS evolves; ECMAScript is the official language spec. Javascript is the most popular implmentation.
ES modules: how JS files connect
React: how UI is described
Next.js: how React ships to production
TypeScript: how JS gets safer
WASM: how the web gets fast

Timeline

1995
│
├─ JavaScript (Brendan Eich)
│   ├─ Runs in browser
│   ├─ Single-threaded
│   └─ Script tags, globals everywhere
│
├─ DOM APIs (Browser vendors)
│   └─ JS can manipulate HTML/CSS
│
2005
│
├─ AJAX
│   ├─ XMLHttpRequest
│   └─ Web apps instead of page reloads
│
2009
│
├─ Node.js
│   ├─ JS outside the browser
│   ├─ Event loop
│   └─ npm ecosystem
│
2015
│
├─ ES6 / ES2015  ← HUGE SHIFT
│   ├─ let / const
│   ├─ arrow functions
│   ├─ classes
│   ├─ promises
│   ├─ import / export  ← ES MODULES
│   └─ modules become the standard
│
│   └─ (Everything modern builds on this)
│
2013
│
├─ React
│   ├─ Component model
│   ├─ Virtual DOM
│   ├─ Declarative UI
│   └─ JSX (syntax, not runtime)
│
│   └─ Solves: "state → UI sync"
│
2016–2018
│
├─ Bundlers (Webpack, Rollup, Parcel)
│   ├─ Bundle ES modules
│   ├─ Tree-shaking
│   └─ Dev servers + HMR
│
├─ TypeScript
│   ├─ Static types on JS
│   └─ Erased at build time
│
2016
│
├─ Next.js (built on React)
│   ├─ File-based routing
│   ├─ SSR (server-side rendering)
│   ├─ SSG (static generation)
│   └─ Opinionated React setup
│
│   └─ Solves: "how do I ship React?"
│
2019
│
├─ ES Modules in browsers (native)
│   ├─ <script type="module">
│   └─ No bundler *required* (but still useful)
│
2020
│
├─ React Hooks
│   ├─ useState
│   ├─ useEffect
│   └─ Composition over classes
│
2021
│
├─ WebAssembly (WASM)
│   ├─ Non-JS languages in the browser
│   ├─ Near-native speed
│   └─ JS orchestrates, WASM computes
│
│   └─ Complements JS, does NOT replace it
│
2022
│
├─ React Server Components (RSC)
│   ├─ Components run on server
│   ├─ Zero JS sent to browser
│   └─ Data fetching integrated
│
├─ Next.js App Router
│   ├─ Server vs Client components
│   ├─ Streaming / Suspense
│   └─ "use client" boundary
│
2023
│
├─ Turbopack
│   ├─ Rust-based bundler
│   ├─ Incremental builds
│   └─ Faster HMR
│
2024+
│
├─ Partial Prerendering
│   ├─ Static + dynamic in one page
│   └─ Streaming HTML
│
├─ Edge runtimes
│   ├─ V8 isolates
│   └─ Server logic near users
│
└─ WASM + JS hybrids
    ├─ Image processing
    ├─ Video
    └─ Crypto / ML

Web scripting