A fairer comparison between Webpack and Vite, some Vite caveats, and the overall developer experience.

This is part of a three-article series about migrating our React+TypeScript codebase from Webpack to Vite. Part 1 is about why we decided to migrate, Part 2 is about how we did it.

This article is about a React and TypeScript project migrated from Webpack to Vite and ESBuild.
This article is about a React and TypeScript project migrated from Webpack to Vite and ESBuild.

Putting Webpack on a diet

As said in the previous articles, Vite is faster than Webpack, but it does fewer things. Earlier in this series, I told that our custom Webpack configuration leverages babel-loader, ts-loader, and fork-ts-checker-webpack-plugin that compiles TypeScript and runs ESLint at the same time. …


The meticulous work behind migrating our codebase to Vite, helpful to fail as soon as possible or to succeed in the most brilliant way.

This is part of a three-article series about migrating our React+TypeScript codebase from Webpack to Vite. Part 1 is about why we decided to migrate, Part 3 is about post-mortem considerations.

This article is about a React and TypeScript project migrated from Webpack to Vite and ESBuild.
This article is about a React and TypeScript project migrated from Webpack to Vite and ESBuild.

Migrating the codebase

I could summarize the migration with the following steps:

  1. Compatibility: includes studying Vite, playing with it, and simulating our scenario outside the actual codebase.
  2. Feasibility: does our project works under Vite? Let’s migrate the codebase in the fastest way possible.
  3. Benchmarking: is Vite worthwhile? Are…


What is Vite? Why did we consider it? Is it faster than Webpack? Is it mature enough?

This is part of a three-article series about migrating our React+TypeScript codebase from Webpack to Vite. Part 2 is about how we did it, Part 3 is about post-mortem considerations.

This article is about a React and TypeScript project migrated from Webpack to Vite and ESBuild.
This article is about a React and TypeScript project migrated from Webpack to Vite and ESBuild.

From Webpack’s slowness to Vite

It’s always the same story: you start working on a branch, run yarn start and wait for two minutes. Then you save a file and wait for 20 or 30 seconds before the app gets refreshed. Then you switch multiple times among the branches you’re working on, and you need to relaunch the…


I’m always eager to explore learning paths (you can read more about it in my Choose what NOT to study and focus on one thing at a time article), but I was still missing re-implementing APIs. An article by Kent C. Dodds inspired me, and here we are.

A lens looking at internals.
A lens looking at internals.
Photo by Shane Aldendorff on Unsplash

We use Recoil at work; it’s a core element of WorkWave RouteManager's next architecture. Recoil has good ease of use, and it removes every distinction between local and global state management. It’s not perfect yet but relatively stable.

Please note: This article remained unpublished for eight months. I should have rewritten it…


Writing a book containing a whole course that helps the instructor in case of jams and allows the attendees to follow the course at their own pace. Why?

Me teaching at the Italian ReactJSDay conference. Thanks to Jaga Santagostino for the photo.
Me teaching at the Italian ReactJSDay conference. Thanks to Jaga Santagostino for the photo.
Me teaching at the Italian ReactJSDay conference. Thanks to Jaga Santagostino for the photo.

In late 2019, I taught my first Front-end testing course. I talked for four hours, driving the attendees through an unusual path: starting from the top of the Testing Pyramid instead of from the bottom. I would have started from a low-quality E2E test going through all the UI Testing Best Practices to become a UI testing winner.

My main doubts were: what allows me to track down the journey I want…


Being a jack-of-all-trades does not pay in terms of satisfaction nor deep knowledge, here you can find my experience as a front-end developer that chosen to focus on one thing for at least one month.

Me speaking at Milano Front-end.
Me speaking at Milano Front-end.
Me speaking at Milano Front-end. Thanks to Jaga Santagostino for the photo.

As a front-end engineer, I am used to reading a lot of articles, study something new almost every day, and suffer from FOMO. It is a good part of my job but as a result, a lot of time I am driven to know just the surface of a lot to topics, deepening none of them.

Back in January 2019, I needed to introduce a…


A series of best practices that ease the test writing and debugging phases while using Puppeteer and other browser automation tools.

A toolbox leans on an engine to fix.
A toolbox leans on an engine to fix.
Photo by Tekton on Unsplash

I’m working on a big UI Testing Best Practices project on GitHub, I share this post to spread it and have direct feedback.

Before moving to Cypress, I was used to writing UI tests with Puppeteer. Understanding what was happening in the browser, which test was running, and debugging the tests were not easy tasks, hence I started applying a series of solutions that helped me through the whole process.

Tools like Cypress and TestCafé get the following list…


Cypress 4.5.0 is out with a long-awaited feature: first-class support for framework’s components render.

The Cypress and the React logos.
The Cypress and the React logos.
Thanks to Dmitriy Tishin for the hero image creativity.

I’m working on a big UI Testing Best Practices project on GitHub, I share this post to spread it and have direct feedback.

UPDATE: Cypress 7 is out with a brand-new Component Test support, check it out! And other exciting news is on the way thanks to the Storybook 6.2 release!

Two months ago, I wrote the “Testing a Virtual List component with Cypress and Storybook” article. This is an extending article now that unit testing React component is possible with Cypress.

The goal of the…


The challenges coming from integrating the tools, the current status of integration, and some best practices to properly test a rendered component.

The Cypress and Storybook logos.
The Cypress and Storybook logos.

I’m working on a big UI Testing Best Practices project on GitHub, I share this post to spread it and have direct feedback.

UPDATE: After this experimental approach, take a look at my “Unit Testing React components with Cypress” article, things got simplified and more effective with Cypress 4.5.0 release!

UPDATE 2: Cypress 7 is out with a brand-new Component Test support, check it out! And other exciting news is on the way thanks to the Storybook 6.2…


Why is testing a web application so hard? Why generic browser automation tools do not fit well the UI/E2E testing needs? Why does Cypress outstand?

A generic features comparison is not enough to understand what are the main UI Testing pains and how Cypress removes them.
Read it here or on dev.to.

Finding the solution to the magic cube.
Finding the solution to the magic cube.
Photo by Olav Ahrens Røtne on Unsplash

I’m working on a big UI Testing Best Practices project on GitHub, I share this post to spread it and have direct feedback.

This post is at the base of my talk at the CityJSConf, London, March 27th, 2020.

Testing a front-end application brings some challenges that the “classic” tests have not: you need to orchestrate a real browser. Browsers are heavy applications by definition, and you need to launch them, manage them…

Stefano Magni

I’m a passionate, positive-minded Senior Front-end Engineer and Team Leader, a speaker, and an instructor. Working remotely since 2018.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store