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!
Snow Pack 101
By Jack McNicol
