Welcome to Part 2!
'' == false // true  == false // true null == false // false undefined == false // false  ==  // false  == ! // true
===) then it's all good, right?
And they've succeeded. Kind of.
Ok, so why does this matter?
Let's—as an example—take a seemingly simple use case. You—a Django developer—want to add a React front end to your app. So you go to the React docs for creating a new React app. There in the "Recommended Toolchains" section you see this:
Well that's a lot of options! Ok, well whatever, you're integrating with an existing codebase so let's see what the "More Flexible Toolchains" link has to say.
At this point you might be thinking something like this:
"Hmm. Do I want the power of webpack with the simplicity of presets? What's webpack again? I've heard of that... Anyway, that sounds complicated so maybe not Neutrino. I'm not building a monorepo, so maybe let's nix Nx. Fast and zero configuration sounds good. Maybe Parcel then? Although Razzle also is apparently zero-configuration and more flexible than Next.js... Wait, what's Next.js, again?"
—You, a confused Django developer
Repeat after me: it's not your fault.
I don't have time to figure all this stuff out" and then just drop another inline
<script> into their app and call it a day.
But it doesn't have to be this way.
Ironically, the React docs on "creating a toolchain from scratch"—the option that sounds the most complex—are actually the best place to start if you want to understand JavasScript toolchains from first principles:
It's just three things!
Let's get into those in a little more depth.
The package manager
The first part of the toolchain is the package manager.
This is the thing that allows you to import and use packages that other people have built—basically
It's the modern-day equivalent of adding
<script src="some-library.js"> to your pages.
Either way, they are mostly compatible with each other. You can just pick one and move on. It doesn't matter.
If you aren't sure which to use, just go with npm. It's more popular and will do everything you need. The rest of this guide will assume you're using npm throughout.
The bundler's job is to take your code—the libraries you're using from the package manager plus any code that you've written—and, well bundle it up. Bundlers take code spread across a bunch of places and mash them together so you only have to drop small number of files on your site—making it more performant.
The final component of the pipeline is the compiler—also sometimes called a transpiler.
Putting it all together
Ok—that was a lot of information really quickly so let's summarize.
- We'll manage our library imports using npm.
- Babel—managed by webpack—will compile our code, so we can take advantage of newer features and syntaxes and make them usable by older browsers.
Now that we know what we want, we can finally take steps to get this set up in our Django project.
Subscribe for Updates
Sign up to get notified when I publish new articles about building SaaS applications with Django.
I don't spam and you can unsubscribe anytime.