Snowpack — What is Unbundled Development?
An alternative for traditional bundlers!
ByPayal Mittal
We often struggle to leave the normal behind and adopt something different and new. The same goes for the developers. In this year 2020, when we have ES modules that are supported by modern browsers, we still continue to depend upon the bundlers. Why?? Because, after using bundlers for so long, they have become a necessity in the web development and, may I say, we’re quite used to them.
It was first introduced in the year 2019 when ES modules were supported by modern browsers. Snowpack is way too easier and practical to use.
Snowpack, being a dependency install-time tool, leaves no room for the use of bundles, unlike Webpack or Parcel. In this blog, we’ll understand more about this new dev environment-
What is Snowpack?
“Snowpack is a next-generation, lightweight toolchain for modern JavaScript application development.”
The most exciting part of Snowpack is that it builds web applications without having to depend upon a bundler. It’s a sort-of-alternative for bundler.
First, we’ll understand what is bundling and why it is required- Bundling is the process that minifies and concatenates all the JavaScript files and bundles them together in the production phase.
With Snowpack, it is easy to build web applications using modern and latest JavaScript frameworks such as React.js, Angular.js, Svelte.js, Vue.js, Preact.js, and many more.
Snowpack is a (un)bundler that leverages the power of ES modules to implement the concept of O(1) build system in which every file is expressed as a function. Let’s understand the term O(1) Build Tooling in detail-
What is O(1) Build Tooling in Snowpack??
A very common problem we often face while working with the traditional dev bundlers such as Parcel and Webpack is that these bundlers rebundle the whole chunks of application every time you make a small change and save the file. It creates a lag between saving the file and seeing those changes displaying in the browser. The retardation may last for several seconds.
Snowpack overrules this problem by eliminating the requirement of bundlers in development. If you make some changes in a file, Snowpack rebuilds only that file. (Frankly, there is no bundling at all, it is but a metaphor to indicate this rebuilding of the file.) You can see the changes, updated instantly, in the browser via Hot Module Replacement (HMR). This approach is what, known as ‘O(1) Build Tooling’.
Key Features -
One of the most exciting features of Snowpack is the ability of Hot Module Replacement (HMR). Through this, Snowpack updates your web applications instantly after a change without refreshing the page. Take it like this, you make some CSS changes, save them, and these changes will instantly appear on the page without even refreshing it.
It supports -
- Libraries like React, Preact, Vue, Svelte, lit-element, lit-HTML, Tailwind CSS, Styled Components, and more!
- Tools such as Babel, PostCSS, ESbuild, TypeScript, 11ty, Sass, etc.
- Both modern and legacy browsers, even IE11.
Some other splendid features are-
-
✔ Optimized Production Performance
-
✔ Initiates within less than 50 milliseconds
-
✔ Stays fast even in larger projects
-
✔ Support for CSS, JSON, JSX modules, and more.
-
✔ Bundle-free development
And the list goes on. But we can’t so, I’m going to jump right on other section about how does Snowpack work-
How it Works?
It works on the principle of ‘Unbundled Development’. Let’s understand this concept-
Unbundled development is the idea of delivering unbundled or individual files during the development phase. Files can still be built with tools like Sass, Babel, or TypeScript and then loaded in the browser individually along with dependencies with ESM export and import syntax. In case of any change made in the file, Snowpack rebuilds that single file.
The unbundled development renders several advantages compared to the traditional bundled development. The single builds in the unbundled development are faster, predictable, easy to configure & debug, and deterministic.
Here’re the steps involved in its working -
👉 Scanning of your website/application for all used npm packages.
👉 Reading the installed dependencies from your directory.
👉 Separate bundling of your dependencies into single .js files.
👉 Each of these files can be run in the browser directly and imported via ESM import statements.
Every file is built individually and cached indefinitely.
This is the real power of unbundled development as the file will neither be built twice nor will be downloaded again by the browser (not unless it changes). If you never change a file, you don’t have to rebuild it, ever.
While almost all the JavaScript community is using the bundled development for like forever, this new approach of unbundled development is rather thrilling and inviting.
From Snowpack 1.0 to Snowpack 2.0
The sole purpose behind designing Snowpack 1.0 was very simple — install npm packages to run directly in the browser. This very concept was formulated to remove the requirement of bundlers in JavaScript packages and it will accelerate the web development process.
And, you know what? It actually WORKED.
Many developers turned to Snowpack to install their dependencies and reduce the excessive use of tools for building websites. In a very short span of time, it emerged as a whole new type of dev environment much faster and light-weight.
Snowpack 2.0 was released on 27th May 2020 and the new version is quite an improvement, I must say, with faster dev environment, custom routing, and other amazing and out-of-box features.
“It removes the bundler from your dev environment, leveraging native ES Module (ESM) support to serve built files directly to the browser. This isn’t just a faster tool, it’s a new approach to web build systems.”
Getting Started with Snowpack
Snowpack can be installed both via npm or yarn let’s see how -
#Using npm
npm install –save-dev snowpack
#For latest updated version
npm i snowpack@latest --save-dev
#Using yarn
yarn add –dev snowpack
The simplest way to get started with Snowpack is by using Create Snowpack App (CSA) which initializes the starter application with Snowpack-dev environment -
npx create-snowpack-app new-dir --template @snowpack/app-template-NAME [--use-yarn | --use-pnpm]
Check out the docs site for more. Click here.
In Short -
As you know that Snowpack is a newbie in the community of web frameworks, it has the potential to replace Webpack in the future and may eliminate the need for bundlers at all.
But as we all are very well aware that it is not something that can easily be replaced, after all, Webpack is a very important tool in the JavaScript ecosystem and is ahead of Snowpack for so many years.
However, in this technical era where we’re used to doing everything easily, I’m sure, Snowpack will get its chance as well (considering its easy-to-use working approach).
Thanks for reading this far!!