The faster frontend build tool.

Jack McNicol

@jackmcpickle

Technical Analyst @ Aligent

Full Stack Instructor @ Sydney Uni

Snowpack removes the need for bundlers (Webpack, Parcel, Rollup) in a traditional application build process by leveraging the ESM syntax you're already writing. Keep using your favorite web frameworks (React, Preact, Vue, Svelte) & build tools (Babel, TypeScript).

TL;DR -

Must have features

  • HMR - Hot module reloading

  • OOTB support TypeScript, JSX, CSS Modules etc

  • Third-party plugins and recipes. Vuejs, Svelte, Postcss, Sass, SSR, Workbox

  • CSA ( Create Snowpack App ) - Zero Config

  • BYO bundler for production-optimized build. Webpack, rollup.

Key Differences

  • Unbundled during development.

  • O(1) file builds

  • Dev server starts in 50ms or less.

  • Serves native EMS module in the browser

Node_Modules

ESM in the browser

<script type="module">

  import {h, render} from '/web_modules/preact.js';
  import htm from '/web_modules/htm.js';

  const html = htm.bind(h);
  render(html`<h1>Hello, ${"Preact!"}</h1>`, document.body)

</script>

This works right now

Create React App - Build

11.4s

Create Snowpack App - Build

5.4s - Saved 6s!

wHAT ABOUT WEBPACK 5?

Oct 10th

Resources

snowpack.dev

skypack.dev

@FredKSchott

tHANK YOU!

Go try ESM in the browser today!

Made with Slides.com