Skip to main content
Software Dictionary

Learning path · Intermediate

The JavaScript ecosystem

Runtimes, package managers, build tools and frameworks: the moving parts of a modern JavaScript project.

Find your way around a JavaScript project: the language and the runtimes that run it, how packages are installed and versioned, what the build step does, the frameworks on top, and the tools that keep the code tidy and tested.

33 pages5 chaptersabout 1 hours of reading

  • Web Development
  • Backend & APIs
  • Programming Fundamentals
  • Version Control
  • Testing & Quality

Not started yet0/33 read

Start with JavaScript

Progress comes from your reading history, kept only in this browser.

Chapter 1The language and its runtimes

  1. 1JavaScriptWeb Development, p. 29JavaScript is the programming language that runs in web browsers to make pages interactive, and it also runs on servers through runtimes like Node.js.
  2. 2TypeScriptWeb Development, p. 60TypeScript is a programming language built on JavaScript that adds static types, catching many bugs before the code runs, and compiles to plain JavaScript.
  3. 3ES ModulesWeb Development, p. 19ES modules are JavaScript's built-in module system: each file keeps its own scope and shares code with other files through import and export.
  4. 4Event LoopBackend & APIs, p. 16The event loop is a mechanism that lets a single thread handle many tasks by running callbacks one at a time as events and I/O results become ready.
  5. 5Node.jsBackend & APIs, p. 35Node.js is an open-source JavaScript runtime that runs JavaScript outside the browser, most often to build web servers, APIs, and command-line tools.
  6. 6DenoBackend & APIs, p. 13Deno is an open-source JavaScript and TypeScript runtime that keeps system access locked until you grant it and ships its own formatter, linter and test runner.
  7. 7BunBackend & APIs, p. 9Bun is a fast JavaScript and TypeScript runtime that is also a package manager, bundler and test runner, designed as a drop-in replacement for Node.js.

Chapter 2Packages

  1. 8Package ManagerProgramming Fundamentals, p. 47A package manager is a tool that installs, updates and removes software packages and their dependencies, resolving versions automatically.
  2. 9npmWeb Development, p. 38npm is Node.js's default package manager and the world's largest software registry; it downloads a project's dependencies and tracks their versions.
  3. 10YarnWeb Development, p. 72Yarn is a JavaScript package manager, an alternative to npm, that installs dependencies from the npm registry and adds a lockfile, workspaces and Plug'n'Play.
  4. 11pnpmWeb Development, p. 39pnpm is a fast, disk-efficient JavaScript package manager that keeps one copy of each package version in a shared store and links it into projects.
  5. 12Semantic VersioningVersion Control, p. 36Semantic versioning is a MAJOR.MINOR.PATCH numbering scheme in which each part signals whether a release breaks compatibility, adds features, or fixes bugs.
  6. 13MonorepoVersion Control, p. 31A monorepo is a single version control repository that holds the code for many projects, such as several apps, services, and shared libraries, managed together.

Chapter 3The build step

  1. 14TranspilerWeb Development, p. 58A transpiler is a tool that translates source code from one language or language version into another at a similar level, such as TypeScript into JavaScript.
  2. 15BabelWeb Development, p. 5Babel is a JavaScript compiler that rewrites modern JavaScript, JSX and TypeScript syntax into code that older browsers and runtimes can run.
  3. 16BundlerWeb Development, p. 7A bundler is a build tool that combines JavaScript modules and their dependencies into a few optimized files that browsers can download and run quickly.
  4. 17WebpackWeb Development, p. 70Webpack is a module bundler that follows an app's imports and combines its JavaScript, CSS, images and other files into optimized bundles for the browser.
  5. 18ViteWeb Development, p. 64Vite is a fast build tool for web projects: it serves code to the browser almost instantly in development and bundles it into optimized files for production.
  6. 19Tree ShakingWeb Development, p. 59Tree shaking is a build optimization that removes code a program never uses from the final bundle, based on which ES module exports are actually imported.
  7. 20Code SplittingWeb Development, p. 9Code splitting is a technique that breaks a web app's JavaScript into smaller chunks loaded on demand, so the first page load downloads only the code it needs.
  8. 21MinificationWeb Development, p. 35Minification is the process of shrinking code files by removing whitespace, comments and long names without changing behavior, so web pages download faster.

Chapter 4Frameworks

  1. 22ReactWeb Development, p. 43React is an open-source JavaScript library for building user interfaces from reusable components that update automatically when their data changes.
  2. 23JSXWeb Development, p. 31JSX is a JavaScript syntax extension for writing HTML-like markup inside code, used mainly with React to describe what the user interface should look like.
  3. 24React HooksWeb Development, p. 44React hooks are functions such as useState and useEffect that let a function component keep state, run side effects and share logic with others.
  4. 25React Server ComponentsWeb Development, p. 45React Server Components are React components that run only on the server or at build time, so they can read data directly and send no JavaScript to the browser.
  5. 26Next.jsWeb Development, p. 37Next.js is a React framework that adds routing, server-side rendering, static generation and server code, so a whole web app can be built as one project.
  6. 27AstroWeb Development, p. 4Astro is a web framework for content-driven sites that renders pages to HTML and ships no JavaScript by default, adding it only to interactive islands.
  7. 28VueWeb Development, p. 65Vue is an open-source JavaScript framework for building user interfaces from components, known for its gentle learning curve and reactive data.
  8. 29SvelteWeb Development, p. 55Svelte is a front-end framework that compiles components into small, efficient JavaScript at build time instead of running a large framework in the browser.

Chapter 5Keeping it tidy and tested

  1. 30LintingTesting & Quality, p. 14Linting is the automated analysis of source code, without running it, to flag likely bugs, style problems, and suspicious patterns before the code ships.
  2. 31Code FormatterProgramming Fundamentals, p. 12A code formatter is a tool that rewrites source code into one consistent layout, fixing indentation, spacing and line breaks without changing what it does.
  3. 32JestTesting & Quality, p. 13Jest is a popular JavaScript testing framework that bundles a test runner, assertions, mocking, snapshots and code coverage in one package with little setup.
  4. 33PlaywrightTesting & Quality, p. 19Playwright is Microsoft's open-source framework for end-to-end testing and browser automation, driving Chromium, Firefox and WebKit through one API.

Along the way, compare

Pairs on this path that are easy to mix up, side by side.

More

Settings

EnglishTürkçe