Hand-coded HTML once meant FTP uploads and instant browser compatibility. By 2008, developers saved files locally, shipped markup directly, and relied on minimal tools. No build steps, no dependencies—just working code across browsers. Fast-forward to today: a single button now requires 1,400+ packages and 16 tools, with first-time setups downloading more code than Apollo’s guidance computer.

The transformation began in 2006–2010 with AJAX’s rise. Developers craved dynamic updates without reloads, leading to jQuery’s DOM manipulation dominance. But as apps grew complex, manual state management became unsustainable. Declarative UI frameworks like React (2013) emerged, letting developers describe desired states instead of manually syncing DOM elements. This birthed components—self-contained UI chunks—and the virtual DOM, though modern tools like Svelte now compile frameworks away entirely.

Layer III’s build step (2012–2018) arose from JavaScript’s lack of modularity and browser compatibility needs. Babel transpiled modern syntax, while bundlers like Webpack merged files. The cost? A 22-byte button now ships as a 2-megabyte bundle via npm’s quarter-million-file node_modules. Tools like webpack configs and Babel became dark arts, with developers trading cursed scrolls to survive.

The tooling arms race (2018–2024) tackled slow builds. Modern solutions optimize configurations, but the fallout lingers—2-megabyte bundles and opaque dependency chains persist, haunting even the simplest projects.