Tackling the ever-evolving fast-paced web development landscape, progressively complex build tools are essential. Vercel developed their new bundler technology, Turbopack, in 2021, and only after rigorous testing and multiple iterations, they finally brought out a stable version during NextConf 2024.

In the words of RauchG, “Make it Work, Make it Right and then Make it Fast”, and the iterations they went through with Turbopack are exactly that. They first built a version with creators of Webpack to get the fundamentals “Work”, then they brought in Rust-based SWC that compiles typescript to make it “Right”. Only then, did Vercel ship out the stable version of Turbopack that is “Fast”.

Apologies for the gross simplification of the 3-year process, but to get to the point of State Machines and to understand their implementation, the history needed to be cut short.

When I saw the NextConf 2024, the only thing that quite mesmerized me more than the partial rendering was the incremental caching done by Turbopack during development. The world needs insanely fast build times and Vercel delivered it. Turbopack was once deemed much slower than Webpack, which it replaces in the NextJS versions making it their default bundler, and that was experimental… until now.

Understanding State Machines

Every computer science graduate has come across this term and ignored it for most of their lives. A REST application, when made with HATEOAS, is a good example of a state machine. It correctly describes the state of the application or a resource at the given time and flows from one state to the other.

What is a state machine?

A state machine is a behavioral model. It consists of a finite number of states and is therefore also called a finite-state machine (FSM). Based on the current state and a given input the machine performs state transitions and produces outputs

Read more about state machines here in the article written by Yotam Bloom.

Now that, you have an understanding of state machines, let’s dive into what could’ve happened with Turbopack and how it could have achieved phenomenal speeds during build timings.

What is simplification?

The article above is an example of how you could simplify your code by utilizing state machines and hence streamlining the development of your React application. But is that all that simplification means? Reducing code? No. If you think that, that’s a gross “over-simplification” of things.

Simplification is the process of distilling something complex into its most essential and clear components, making it easier to understand, use, or communicate. This often involves restructuring, rephrasing, and sometimes omitting non-critical elements while maintaining the core meaning or functionality.

How does simplification relate to Turbopack and its performance?

It is evident that Turbopack heavily relies on caching. What exactly is caching and rehydrating? It is storing the state of the application in a logical space, and retrieving it when necessary.

Turbopack initially builds the application and stores the build result along with the files it had built in its cache. Once the user makes any change to the project, it rebuilds what is only changed. This is caching, and finite-state-machine in play.

Building initially creates a state for that application. Changing the code triggers a rebuild that inherently creates another state for that application, while only building what has changed from the previous state. Reverting a change also causes the machine to create another state which could be similar to what was already created, but only moves in the forward direction of the graph.

By storing the entire application build for each state, we increase the simplification of building while only diff-ing the changes before building. The reference point for each build is the latest state, rather than building from the diff of the entire graph.

Conclusion: State Machines: The Backbone of Turbopack’s Speed

By leveraging the principles of finite-state machines, Turbopack revolutionizes the way builds are handled. Each state serves as a precise snapshot, enabling efficient caching and incremental builds. This forward-moving architecture ensures that only the necessary changes are processed, drastically reducing build times and enhancing developer productivity.

The brilliance of Turbopack lies not just in its Rust-based engine or its caching mechanism, but in its seamless use of state machines to simplify and optimize the development process. This is how Vercel has achieved the seemingly impossible — blazing-fast performance that sets a new standard for modern bundlers.

Turbopack 2024: Understanding State Machines for Optimum Performance was originally published in KridWorks on Medium, where people are continuing the conversation by highlighting and responding to this story.