DevOps.js

DevOps.js Conf 2021

Parcel 1 was created out of the frustration from configuring slow and hard to configure legacy bundlers like Webpack and in turn started a trend of zero-config tooling. Unfortunately, Parcel 1 had some major design flaws that led to the creation of Parcel 2, a ground-up rewrite of Parcel which aims to resolve those design flaws whilst also creating a bundler that can scale to the size of companies like Atlassian and Adobe and beyond. A new plugin system, bundler targets, optional configuration, stable caches, improved scope-hoisting, improved developer experience and better performance are just a few of the things we’ve been working on for the last 3 years. In this talk I’ll glance over how Parcel works and talk about a couple of the largest and most exciting new features in Parcel 2. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Parcel 2: the Automagical Bundler

Hello everyone, I'm Jasper. I'm a freelance developer and parcel core contributor. And today I'll talk about parcel two. So what is parcel two? Parcel two is a ground up rewrite of parcel one, but now you might be wondering what is parcel one? Parcel one is a fast and scalable zero configuration web application bundler. This means it's basically like webpack or rollup with a big difference between how we actually handle bundling. We try to make it as simple as possible, so no configuration. And we also try to keep it fast and scalable as we use, we're being used at large companies like Atlassian and Adobe. What makes parcel fast? Well, we use caching and workers. So we cache every transpilation result from Babel and other transpilers like TypeScript. And we also use workers to actually parallelize that work between all your CPU cores. And now you might be wondering, is it really zero config? Well, we actually have a config file, but we try to let you not configure it as much as possible. So we try to have good defaults and our production ready out of the box. So you just create your application. And when you're ready, you can just push it to production and everything will be optimized as it should be. Parcel 2 has a lot of new features. I'm going to go through a couple of the most large ones and most interesting ones.

So we've revamped our entire plugin system and added a configuration file. So now our plugin system is very different from parcel 1 as now every step of the pipeline has a different plugin type and interface. So for example, we have transformers, which take one type of file and convert it into another type of file. For example, from modern JavaScript to legacy JavaScript or from TypeScript to JavaScript. We also have, for example, optimizers, which optimize your code or compress it down. For example, we have a Tursr optimizer, which minifies the JavaScript code. We've also added a config file in parcel 2. The config file isn't actually used to configure anything specific in a transformer or any plugin. It's used to define which plugins should run for a certain file type.

As you can see here, for example, this is a TypeScript example where for TS and TSX files, the transformer that runs is the TypeScript TSC compiler instead of Babel. And for validator, we also run a type checker. We've also added targets, which is very useful for things like server-side rendering as you can build a note code and browser code at the same time. But it's also useful for example, if you still support internet explorer without wanting to negatively impact your users that use a modern browser. So you can have two bundles, for example, a modern bundle for Chrome and a legacy bundle for internet explorer and other legacy browsers. We've also introduced diagnostics, which is really helpful if you are trying to debug an error and you don't know what's causing it. So for example, in this screenshot, we added a file called Babel core instead of the package Babel core. And we suggest the nearest matching packages. For example, in this case, we have a Babel core and a Parcel core. And the one that matches the best is Babel core. And that's probably also what you meant. We've also introduced a name pipelines and query parameters, which is very useful for if you want to have a data or JavaScript in different formats. For example, we have JSON imports here. So in one case, you might want a URL of the JSON file. And in another case, you might want the text of the JSON file. So the actual content. And you can use that with a name pipelines. For example, URL colon data.json will return a URL to the JSON file and text colon data.json will return the contents of that JSON file. We can also use query parameters, for example, for optimizing images. In this case, I've taken an example from our image optimizer, which is URL colon for URL import. And then parcel.jpg is a parcel logo image. And then you have query parameters. The format is WebP and the quality is 70%. So that's a pretty heavily compressed image. We've also done a lot more changes than just these few that I've highlighted.















We've improved performance more than 2x. We've made our caches stable, so you don't have to remove the cache now and then. You can leave it there. We've also improved our data structures to use way less memory. And this also helped us scale to the size of, for example, Atlassian. We've also improved code splitting and bundling. So for example, we have an HTTP2 strategy now, which allows you to have more code splitting than before. We've also made scope hosting stable. So now you can safely use it in production. Now we've also improved our monorepo and library support. For example, targets can be used to compile an entire monorepo with a single command.

So to show that parcel is actually really simple, I'm going to go through a little React example. So you first add parcel and React and React DOM for example. And then in the package.json, you have two scripts, dev script, which just starts the index.html entry point using parcel, and then the build command, which runs parcel build and index.html and creates an optimized bundle. So index.html contains a diff with an app ID and a script, which references the index file. And index.tsx just contains a simple hello world application. And then if we're on Yarn dev, it simply works without any configuration and Yarn build creates a production ready bundle without any configuration. This was my talk about parcel. Thank you for listening. You can find me on Twitter at Jasper Dumour, and you can also find parcel on Twitter, parceljs, or have a look at the docs on v2.parceljs.com. Thank you.