Amp up your React workflow with these "Gen Z" toolings
Tags: webdev, javascript, vite, react
Published: 2022-06-28 18:29:28

When I started learning React, Create React App was my go-to for quickly scaffolding new projects. There was a certain simplicity to it which made it easy to set up projects without writing complex configurations. Or in other words, I was too dumb to understand the Webpack and Rollup configurations. 

As I started using CRA for more projects, I realized it was not as fast as I wanted it to be. This became more evident in larger projects where I had lots of dependencies. npm was another culprit who ate Giga bytes of storage on my machine and took ages to finish installing the dependencies.
The whole thing had become a mess, so I decided to look for other alternatives. Little did I know I was sitting under a rock for this long. There were so many options to choose from on the tooling side. I felt like I had aged 40 years suddenly. Then I realized time works differently in JS land. It's said that a new framework gets born every time you blink an eye.



![New JS Frameworks Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqc6czzyurpjo1bhulut.png)


To recap, these were the tools I was currently using.

-  [Create React App](https://create-react-app.dev/) for development
- [npm](https://www.npmjs.com/) as package manager
- [jest](https://jestjs.io/) for running tests

And these were the things I was looking for

- A faster build and development system while still having the simplicity of CRA

- A faster, efficient package manager which doesn't eat up my storage

- A faster test runner/ framework?

Luckily, I've found solutions to all the three problems, and I've to say that my new workflow is "blazingly fast" 🔥
I never felt so alive!



### [Vite](https://vitejs.dev/) for development

CRA uses Webpack under the hood, creating a "bundle" when we run the `npm start` command. During this time,  Webpack crawls through our project and its dependencies and creates a single Javascript file(in most cases), which contains all the necessary code and starts the development server. The main drawback with the above approach is that Webpack would need to recreate the bundle whenever there's some change in our project code. Optimization techniques like Hot Module Replacement (HMR) try to solve these issues in one way or another. Still, the takeaway here is that as you keep adding 'xstate', `styled-components`, `lodash`, or whatever it is you're adding these days, you end up with a boatload of dependencies, and the bundling starts slowing down gradually till it kills the DX making you rage quit your project for good. Jeez, What a nightmare!

Luckily, Vite solves this issue by leveraging native ES Modules in the browser, using more faster bundler like [esbuild](https://esbuild.github.io/) and doing something called [pre-bundling](https://vitejs.dev/guide/dep-pre-bundling.html)

I don't want to dive into the specifics here, but the basic idea here is that vite improves the dev server start time by dividing the modules in an application into two categories: `dependencies` and `source code`. Since the dependencies don't change that often, they can be bundled once and kept in a separate cache. And since everything is served as native ES Modules, we get additional benefits like HTTP caching.

Want more reason to switch to Vite?

Apart from the performance, another reason why I love using vite is its OOTB support for TypeScript, SASS, LESS, SCSS, and a lot more. If you were to use LESS with CRA, you'd end up with solutions like `craco` and `react-rewired`, which are honestly not that fun to use. Vite also supports a robust plugin system to add additional loaders.

Even more?

Here's a tweet from the [creator](https://twitter.com/youyuxi) himself asking the React team to update the new docs to recommend Vite over CRA

{% embed https://twitter.com/youyuxi/status/1540359515819847680 %}

Seriously, switch to Vite; you won't regret it.

You can get started simply by running.

`npm create vite@latest my-react-app -- --template react`


### [pnpm](https://pnpm.io/), the npm killer?

![Narcos Waiting Meme about Node Modules install time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyc5p153gusu3z87ffkm.png)

![Meme about node_modules size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rkb7p731dxaccrf97ei.jpeg)

`node_modules` eating up your disk space has become such a meme that even people from the non-tech community know about it at this point. Seriously though, my sheer frustration with npm and node_modules was enough to stop the project I was working on and throw away my old Mac. And when I did buy the shiny new M1 Macbook Pro, I decided to give my project another try. After all, I can't justify my reasoning for spending 2000$ just to watch Netflix, right?

This time I wanted to switch things a bit, and that's when I found [`pnpm`](https://pnpm.io/), the long-lost cousin to `npm`. I was sold the moment I saw the caption on their website
> Fast, disk space efficient package manager

I decided to give `pnpm` a try on my good ol' project.

`npm install -g pnpm`
`cd my-react-project`
`pnpm install`
`pnpm start`

To my surprise, everything went smoothly and started working without any issues. The installation was fast, and the node_modules folder this time was less chunky.

Again, I won't try to explain the how's and what's here; head over to [pnpm](https://pnpm.io/motivation) site to understand how exactly it solves this problem. But in a nutshell, pnpm avoids cloning copies of the same dependencies multiple times; instead, it keeps a content-addressable store to only keep the changed files of the newer version. This is what makes it fast and efficient.

There are many other features supported by `pnpm` like workspaces, hoisting, overrides ... 


If you're starting a new React project, you can use `pnpm` and `vite` together using
`pnpm create vite.`


### [vitest](https://vitest.dev/)

I never had that much of a problem with `jest`, to be honest. Sure, doing the initial configuration and setting up `ts-jest` for Typescript projects has been a pain point sometimes, but it was never enough to hate it. The APIs are great, I love writing snapshot testing and unit testing with it. The only reason I moved from `jest` to `vitest` is because of `vite` itself. 
Here's a direct excerpt from the `vitest` site talking about the motivation behind its creation

>in a world where we have Vite providing support for the most common web tooling (typescript, JSX, most popular UI Frameworks), Jest represents a duplication of complexity. If your app is powered by Vite, having two different pipelines to configure and maintain is not justifiable. With Vitest you get to define the configuration for your dev, build and test environments as a single pipeline, sharing the same plugins and the same vite.config.js.

This! This is the exact reason I switched to `vitest`. Since I already started using `vite` for projects and since vite and vitest go well hand in hand, I didn't need these complicated jest config files and `ts-jest` just to run my tests. I can run my tests without writing any additional configuration. And it provides first-class support for TypeScript.

To get started with `vitest`, go to your project and 

`npm install -D vitest`

or with pnpm

`pnpm add -D vitest`

Once it's installed, update the "test" script in `package.json` to use `vitest` instead of `jest`, and you're done!

I've created a sample repo with React, pnpm, vite and vitest configured. You can check it out [here](https://github.com/hemandev/genz-tooling)

There, you're back with the cool kids again. But don't get too ahead of yourselves. Better and better things are coming. The only thing you can do is to keep on learning.


_"once you stop learning, you start dying" - Albert Einstein_