Frontend Build Tooling
Bundlers, dev servers and the toolchain that turns source into a shippable site.
Backend Engineer track
Junior
Write correct code, ship small changes safely, ask good questions.
- Dev ServerA local server that rebuilds as you edit.
- node_modulesWhere installed packages live, and why it gets so big.
- npm ScriptsProject commands defined in package.json.
- package.jsonThe manifest of a JavaScript project: its dependencies and scripts.
- Source MapA mapping from built code back to the original source, for debugging.
- Static AssetsImages, fonts and files served as-is.
Mid-level
Own a feature end to end without hand-holding.
- Asset FingerprintingContent hashes in file names so caches update correctly.
- Keeping Dependencies UpdatedUpgrading regularly, with tools like Dependabot or Renovate.
- npm vs pnpm vs YarnJavaScript package managers and their trade-offs.
- Peer DependencyA dependency the host project must provide, like React for a component library.
Senior
Own a system, its failure modes, and its trade-offs.
Nothing here yet.
Staff
Shape how many teams build, across systems.
Nothing here yet.
Principal
Set technical direction for the organization.
Nothing here yet.
Frontend Engineer track
Junior
Build UI that works, ship small changes safely, ask good questions.
Core: start here
- BundlerA tool that combines modules into files browsers can load, like Vite, webpack or esbuild.
- Frontend Environment VariablesBuild-time variables, and why they're never secret in the browser.
- npm ScriptsProject commands defined in package.json.
- package.jsonThe manifest of a JavaScript project: its dependencies and scripts.
- Source MapA mapping from built code back to the original source, for debugging.
5 more junior concepts
- Dev ServerA local server that rebuilds as you edit.
- Hot Module ReplacementSwapping changed modules into the running app without a reload.
- node_modulesWhere installed packages live, and why it gets so big.
- Static AssetsImages, fonts and files served as-is.
- ViteA fast dev server and bundler for modern frontends.
Mid-level
Own a feature end to end without hand-holding.
- Asset FingerprintingContent hashes in file names so caches update correctly.
- Babel / SWCTools that transform modern JavaScript and JSX for older targets.
- BrowserslistThe config declaring which browsers your build supports.
- Keeping Dependencies UpdatedUpgrading regularly, with tools like Dependabot or Renovate.
- npm vs pnpm vs YarnJavaScript package managers and their trade-offs.
- Peer DependencyA dependency the host project must provide, like React for a component library.
- webpackThe long-dominant, highly configurable JavaScript bundler.
Senior
Own an app's architecture, performance, and failure modes.
Nothing here yet.
Staff
Shape how many teams build, across apps.
Nothing here yet.
Principal
Set technical direction for the organization.
Nothing here yet.