Skip to content

RFC 2.0: Consider using esbuild and Ava instead of Vite #6716

Closed as not planned
@KeyboardSounds

Description

@KeyboardSounds

Topic

Proposal: Use esbuild instead of Vite, which provides a similarly good developer experience with less complexity, fewer extraneous features that we won't use, and no need to add Rollup as an extra dependency.

More detail

Do we need Vite's extensive featureset? Is using something more minimal going to cause fewer issues and still meet p5.js's needs? Let's discuss whether we should use esbuild instead.

At the time of writing, the RFC 2.0 proposal suggests using Vite and Vitetest for building and testing p5.js. (at the Vite is a comprehensive tool that provides an excellent developer experience out of the box. However, that comprehensiveness leads to complexity that can make it harder to fix when something breaks. The horrors of fixing broken Webpack setups comes to mind, although Vite seems significantly more stable.

An alternative to Vite is esbuild. It sets out to do the bare minimum to build a project, while retaining flexibility to accomodate many workflows. The developer experience is slightly less smooth — there's no Hot Module Refreshing (HMR), for example — but it compensates for these by being extremely fast. If rebuilding is almost instant, does HMR matter? While there are Rollup plugins available, having multiple build inputs and outputs is well-supported without them.

If we choose to use esbuild instead, it doesn't make sense to use Vitest, and so we'll need another test runner. Ava looks good, but there are many other options.

Comparison

Some criteria for choosing a build and test system:

  • Speed
  • Easy to configure
  • Easy to understand
  • Easy to fix
  • Introduce as few new dependencies as possible
  • The ability to rerun only the tests that recently failed or have changed

Vite and Vitest

Pros:

  • Large and rapidly growing community
    • Well supported, easier to find solutions to problems
    • Developers coming from other projects are more likely to be familiar with Vite
  • Fast loading of code changes [https://vitejs.dev/guide/features.html#hot-module-replacement]
  • Test runner that is developed as part of the same project and designed to work with Vite means that build and test processes are easier to integrate
  • Lots of features such as Static Asset Handling, dependency pre-bundling

Cons:

  • Complexity - even though Vite is relatively easy to configure, it does a lot behind the scenes, which can make it harder to troubleshoot problems than more minimal tools. Even though build problems are relatively rare, they can be nightmarish to debug.

esbuild

Pros:

  • Very, very fast. Possibly the fastest available build tool?
  • Flexible enough that we might not need to use Rollup as well
  • Watch mode - because esbuild is so fast, watch mode is also fast even without HMR
  • Well supported — most projects don't use esbuild directly, but most modern build tools use it internally (including Vite)

Cons:

  • No HMR
  • No integrated test runner

ava

Pros:

  • Watch mode automatically only reruns the tests that have been changed
  • Magic assert makes it easier to see why tests are failing

Cons:

  • Less popular than Vitetest, so there's a greater risk of it becoming unmaintained - but it's been around for 10 years, and the repo shows a healthy amount of activity
  • No HMR, so responding to code changes will be slower than Vitest (although probably not by much)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Completed

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions