DEV Community

Cover image for The JavaScript Time Machine
Omher
Omher

Posted on

The JavaScript Time Machine

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
Enter fullscreen mode Exit fullscreen mode

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 πŸ’©
The vanilla way The vanilla way The vanilla way

πŸ‰ 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:

Tool Types

🚚 Package Manager 🚚

npm yarn pnpm bower
The vanilla way The vanilla way The vanilla way The vanilla way
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 RequireJS

JSPM

  • JSPM provides a module CDN and package management JSPM

πŸ‘Ÿ Task Runners πŸ‘Ÿ

Why use a task runner?
In one word: automation. The less work you have to do
when performing repetitive tasks

GruntJS GulpJS
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 Browserify lets you require('modules') in the browser by bundling up all of your dependencies
Rome Rome is a formatter, linter, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS
SWC SWC is an extensible Rust-based platform for the next generation of fast developer tools.
Parcel The zero configuration build tool
Vite Next Generation Frontend Tooling
Webpack webpack is a static module bundler for modern JavaScript applications
RollupJS Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex
Man Shrugging ???

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)