The Eternal Sunshine of the Zero Build Pipeline

What if your dev server could start instantly, no matter how big your project is? Modern tools are making the zero-build pipeline a reality.

#1about 6 minutes

The problem with modern web development tools

Modern web development is bloated with complex toolchains and dependencies due to maintaining decades of backward compatibility.

#2about 7 minutes

The evolution from simple scripts to compilation

The need for modules, transpilers like TypeScript, and WebAssembly forced the web development process to adopt a compilation step.

#3about 4 minutes

Understanding the modern bloated build pipeline

A typical modern project requires a complex stack of tools like Webpack, Rollup, linters, and formatters, which complicates the developer experience.

#4about 3 minutes

Leveraging native browser features for development

Modern browsers support native ESM modules, advanced caching, and HTTP/2, which can be used to create a faster, bundle-free development environment.

#5about 11 minutes

The on-request build and single-file component philosophy

Instead of bundling the entire application, the server builds and serves only the specific files requested by the browser, leading to instant startups and updates.

#6about 5 minutes

Exploring modern bundle-free development tools

Tools like Snowpack, Vite, and WMR offer a new, faster development experience by leveraging native browser features and unbundled approaches.

#7about 3 minutes

A case study of using Vite in a design system editor

The Backlight design system editor uses Vite running inside a service worker to provide a fast, in-browser compilation and preview experience.

#8about 5 minutes

How production builds remain highly optimized

While development is bundle-free, production builds still use tools like Rollup or ESBuild to create optimized, tree-shaken bundles for end-users.

#9about 2 minutes

The growing ecosystem around ESM-native tools

A new generation of tools and registries like Skypack, Astro, and Slidev are being built on top of fast, ESM-native build tools like Vite.

#10about 3 minutes

Migrating an existing project from Webpack to Vite

Migrating from Webpack involves converting requires to imports, making minor configuration adjustments, and replacing the Webpack config with a much simpler Vite config file.

#11about 2 minutes

The future of web development is faster and simpler

Adopting modern, ESM-native tools improves the developer experience significantly without sacrificing end-user performance, marking a new era for building on the web.