Frontend tooling overview
24/01/2025
JavaScript Engine
Low-level software responsible of the compilation and execution of JavaScript (and WebAssembly) code. Their main use is through web browsers and JavaScript runtimes relying on them to execute JavaScript code.
Examples: v8, SpiderMonkey, JavaScriptCore
JavaScript Runtime
JavaScript execution environment providing APIs for I/O operations (networking, file-system access, multithreading, RTC) based on a event-driven, asynchronous architecture.
Uses internally: JavaScript Engine
Examples: Node.js, Deno, Bun, WinterJS
Development server
Local server providing development features like hot reloading, error reporting, and asset transformation facilitating code changes without needing a full production build.
Modern "meta-frameworks" and build tools (e.g. Vite, Next.js, Astro...) are, at core, development servers using compilers and/or bundlers internally.
Examples: Vite, Next.js, Astro
Type checker
Tool that statically validates that values conform to expected data-types in order to catch type-errors early.
Examples: tsc (TypeScript compiler), Flow
Compiler / Transpiler
Tool transforming code from one language to another, or from a superset to a subset of a language (e.g. TS -> JS, JSX -> JS, ESNext -> ES5, Sass -> CSS...).
Compilers are central parts of most modern frontend tools as they allow out-of-the-box usage of features like static typing (e.g. TypeScript) or higher-level syntax (e.g. JSX).
Examples: TypeScript, Babel, SWC
Parser
Tool taking source code as input and converting it into a structured representation, typically an Abstract Syntax Tree (AST), for further processing like compilation or interpretation.
Parsers are (directly or indirectly) building blocks of almost all other tools listed here: compilers parse code to transform it, type checkers parse code to validate it, bundlers parse code to tree-shake it, etc...
Bundler
Tool taking multiple entry files (code or other static assets), resolving their dependencies, and combining them into optimized output files for efficient execution in a browser or runtime environment.
Modern "meta-frameworks" and build tools (e.g. Vite, Next.js, Astro...) use bundlers internally to allow out-of-the-box optimization and usage of a lot of different assets (e.g. TypeScript files, CSS modules, images, JSON files...).
Bundlers are also extensively used for the compilation and packaging of libraries.
Examples: Webpack, Rollup, esbuild, Parcel
Minifier
Tool optimizing code by shrinking variable names, removing useless whitespaces / line-breaks / comments and dropping unused code.
Examples: Terser, Lightning CSS
Linter
Tool statically analyzing code to find problematic patterns or code that doesn't adhere to configured style guidelines.
Formatter
Tool automatically formatting code according to a set of rules, typically to enforce a consistent style across a codebase.
Examples: Prettier, Oxc, Biome
Test runner
Tool executing tests and reporting results, typically providing features like test isolation, parallelization, and code coverage.
Examples: Jest, Vitest, Playwright, Cypress
Package manager
Tool allowing the management (installation, uninstallation, update) of dependencies in JavaScript projects. They provide features like versioning, dependency resolution, and version locking through lockfiles.
Package managers rely on registries to fetch packages and their metadata: the most known and used registry is the npm registry.