Past, Present, to infinity and beyond
When developing a web application or node.js
application, we run a command something like this or something similar to it:
npm run start
We, developers, forgot that behind the scenes of this small command, it's an ecosystem, and it's running for us a lot of processes; this is what I call build tools.
It doesn't matter if you are running TS
, JSX
, or any language when writing your code; we also forget sometimes that the code we are developing in our local machine is not the same code we will deploy on production.
Take with me a time travel to the build tools history and see how we used to write an application and how these tools are evolving and changing the way we development our apps today
π¦ The vanilla way π¦
In the past, when you were developing a web app, you wrote your code and added a script tag to your HTML file, and you were ready to deploy.
If you want to add a new library, you need to:
- Go to the website of the library,
- Download the library,
- Copy the file to your folders assets
- Add a new script tag to your HTML file
You have to repeat/redo the same steps for every new library/file you want to add, and in addition, sometime you will finish with an HTML file containing an extensive list of scripts tags, which is not very friendly way to do it
Add script Tag | Another script Tag | π© |
---|---|---|
π 2009 The rise of Node.js π
Node.js
was released to the community in 2009; this brought with it the first version of npm
and an easier way to install and maintain packages and their versions, but all the issues for web development were solved?
Not quite, we have to remember that:
JS moduled uses syntax like:
"module.exports" and "require"
the browser did not support that
But also, at the time, a lot of tools started to pop around the community, I divided them into four types:
π Package Manager π
npm | yarn | pnpm | bower |
---|---|---|---|
Default package manager | by Facebook, fix scalability issues npm had | Install only one copy of the package on disk | First package manager for the web |
π Script Loaders π
RequireJS
- Was very popular. The idea was to provide an asynchronous module definition and build on top of that.
- The most significant attraction was
AMD
. It introduced a "define" wrapper. -
AMD
: Asynchronous Module Definition - Now
RequireJS
seems more like a curiosity now
JSPM
- JSPM provides a module CDN and package management
π Task Runners π
Why use a task runner?
In one word: automation. The less work you have to do
when performing repetitive tasks
GruntJS | GulpJS |
---|---|
The JavaScript Task Runner | The streaming build tool |
π¦ Bundlers π¦
π₯ In a nutshell: A bundler is a development tool that combines many JavaScript code files into a single one that is production-ready loadable in the browser.
Also, these tools have been evolving here, and we have so many tools to choose from; here is a list of the most relevant bundles in the community.
Browserify is an exception in the list; this bundler is not in use anymore but was the first released to the community.
Bundler | Comments |
---|---|
Browserify lets you require('modules') in the browser by bundling up all of your dependencies | |
Rome is a formatter, linter, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS | |
SWC is an extensible Rust-based platform for the next generation of fast developer tools. | |
The zero configuration build tool | |
Next Generation Frontend Tooling | |
webpack is a static module bundler for modern JavaScript applications | |
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex | |
??? |
The Future of JavaScript Tooling π οΈ
Is Rust π¦ the future of JS Tooling ?
There is a lot of buzz around Rust in the web development community, and some tools have been developed using Rust.
I think we are still in the early steps to know if this will be the standard for developing JS tooling, it will depend on the adoption and if the web community is ready to learn a new language.
But here are some examples og tools using Rust:
- Next.js 12 uses SWC and Rust
- Deno's linter, code formatter, and docs generator are built using SWC
- Parcel improved overall build performance by up to 10x with SWC Rome will be written in Rust dprint built on SWC, a replacement for Prettier?
Thanks for reading π
Top comments (0)