What is PARCEL and why you should care
A couple of weeks ago I discovered Parcel - a relatively new JavaScript bundler which requires zero configuration. It's really fast and fun to work with!
What is a bundler?
If you don't know the term, I'll try to explain this in plain English. Back in the day, when the web development was based on vanilla JS or JQuery the developers didn't need fancy tools. It was enough to write your JS in a file and load that file in index.html. The way we - web developers - are writing code today has changed with the rise of web frameworks; now, the browsers don't understand all the high level code we are writing, hence a transformation is needed. This transformation is made by the bundler.
Why another bundler?
If you are a web developer, you might ask why in the world do we need another bundler? Webpack is doing a great job, and it's not the only one out there.
- Well, first of all, you don't need to write any configuration; it works like magic - you should try it yourself.
- Parcel has a built in development server which supports hot module replacement out of the box. This means that as soon as you save your new changes, Parcel rebuilds the changes and sends them to the browser.
- Another cool out of the box feature is code splitting and it is useful for lazy loading. Say your app have 3 pages, one being the registration page and the other two being accessible only when the user is logged in. Instead of having one single giant bundle and loading it all at once, you could make one bundle only for the registration component. Assuming the user isn't logged in, when he/she will access your application, the browser will load the registration bundle only, which will result in a faster loading time and improoved UX.
- Parcel does all of this FAST.
What about production?
If you want your production bundle, instead of running parcel watch index.html you run parcel build index.html. This command will generate a production ready, minified bundle.
Why should you try it
You can try it in a couple of scenarios:
- You don't have your boilerplate ready and you want to sketch something really fast.
- You are a beginner and you don't want to deal with Webpack. (BTW, when you feel confident enough you should definitely try Webpack. Challenges are good for growing)
- You want to teach someone some frontend concepts and you want to skip configuration
Quick React + Parcel example (5 minutes ⏱)
I'll present a React example, since currently React is my weapon 
Parcel works with Vue as well, but Vue it's not my thing.
Mandatory Steps
Create project folder and initiate package.json
mkdir react-parcel
cd react-parcel
npm init -y
Install React and Parcel
npm i -S react react-dom
npm i -D parcel
Create index.html
<!DOCTYPE html>
<html>
<head>
<title>React + Parcel</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
Create index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
class Hello extends Component {
render() {
return <h1>Hello {this.props.name}!</h1>
}
}
ReactDOM.render(<Hello name="world" />, document.getElementById("app"));
Now you're ready to run ./node_modules/.bin/parcel index.html. You should be able to access localhost:1234 in the browser and see your app. Change the name prop and save. Your changes will be visible in the browser.
That's all you have to do! Now you can focus on writing code.
Optional - recommended steps
Add a script line in package.json
...
"scripts": {
...
"dev": "./node_modules/.bin/parcel index.html"
}
...
From now on, you can run npm run dev and have the development server ready.
Add Babel
Install Babel and some useful Babel presets by running npm i -D babel-cli babel-presets-env babel-presets-react.
Babel needs to know about these presets, so we need to create .babelrc with the following content:
{
"presets": ["env", "react"]
}
Conclusion
I like trying new tools, but I like to find useful tools better. Parcel is one of them. You should definitely play with it, be it in a simple playground, or in a side project. Give it a try 
I hope you found this article useful!
