March 12, 2018

Meet Parcel: Because you don't have time for Webpack

I’m not a front-end developer; I often find myself having to work on front-end tasks, or rig up small prototypes.. but that certainly doesn’t make me a front-end developer.

Back in 2016 I found myself spending a month working on a React SPA: after a 3 year hiatus of not doing anything front-end related - largely out of choice - I was absolutely stunned with just how archaic the tooling was, not to mention of inefficiences of npm dependency management… 700mb of dependencies for a SPA and numerous dependencies loaded multiple times: it was an “eye opener”.

In the 3 years I had frantically avoided front-end development, there had been a progression from the seemingly simple concept of using “task runners” - i.e grunt and then gulp - which could be tedious to configure, but were at least simple, to using “module bundlers”… enter Webpack.

Webpack is a nightmare

Webpack can be utterly overwhelming, and despite reading the - often inaccurate - documentation, the only way I’ve actually been able to use it properly, is via pre-existing templates - or scaffolding tools like vue-cli. This is quite a common attitude if Reddit and Twitter posts are anything to go by!

Naturally, relying on a tool that is most easily used via the configuration written by someone else, for another project, isn’t ideal. In fact, it seems plain wrong.

Alas, Webpack’s strength is arguably it’s complexity: after all, configurational complexity is often the price to pay for flexibility. For a lot of scenarios though, Webpack is simply too much. Time spent configuring tooling and workflow, is time that could be spent actually writing code or experimenting.

This is why ParcelJS looks interesting.

ParcelJS: Because you don’t have time for Webpack.

ParcelJS is billed as a “blazing fast, zero configuration web application bundler” - and if that’s not a refreshing change from Webpack, then I’m not sure what is! Despite being the subject of some hype during December - where there was a flurry of social media postings and discussions online - ParcelJS had completely passed me by… until very recently that is.

Parcel contains an impressive array of built-in features - usable completely out of the box; including the standard development server and automatic file watching built in 1, as well as automatic support for code splitting, and transformations for tools such as Sass and Typescript.

For times when your use case is a little more complex though, Parcel also offers a simple API for programmatic use as well as simple mechanisms for writing plugins, asset types, and packagers.

It’s not exactly a “Webpack Killer” - but it is a simple tool that you could, in theory, use to scale as the complexity of your workflow scales. I’ve used it for some simple Vue based prototypes lately, and it’s certainly made a life a lot easier.

If - like me - you’re not the biggest fan of front-end development, and that’s intensified by the loathsome (and complex) tooling required, then Parcel may just be a good fit for your requirements.

© Fergus In London 2019

Powered by Hugo & Kiss. Source available on Github.