Supporting Vite JS - ‹div›RIOTS

We are proud to announce our sponsoring of Vite and a sneak peek to browser-vite - our contribution to the Vite ecosystem.

As of this week, we are:

Gold sponsor of Vite via Evan You, creator of Vuejs and Vite.
Bronze sponsor of Patak, which has been doing fantastic work for the Vite community.

What is Vite

Vite is “Next Generation Frontend Tooling” from Evan You.

It has 2 modes: dev server and build.

The dev server is instant, has super-fast hot module reload, and has lots of batteries.

The build is optimized for production and powered by rollup.

You get the best of both worlds: Really fast feedback loop in dev mode and an optimized build for production.

What makes Vite special

Vite is not the only “nextgen tooling” for front-end. Snowpack, WMR or @web/dev-server have pioneered some of the innovations in Vite. But Vite took it to the next level and quickly created an amazing community around it.

Some of the special features of Vite:

Framework agnostic: Plays nice with Vue, React, Svelte, Lit, Preact or SolidJS.
Super fast dev mode: Thanks to on-demand compilation via esbuild
Universal plugins: Vite runs a Rollup-superset plugin shared between dev and build.

Vite is taking over the frontend tooling space

Chris Coyier wrote about it recently, the number of projects growing around Vite is impressive.

Chris mentioned:

but you can also add:

And probably others…

We are also moving to Vite… in many ways :)

1/ Apps documentation → VitePress

We recently moved all our product documentation to VitePress. Check Backlight.dev documentation or Design System Mastery for the best demos.

2/ Apps Build → Vite

Backlight.dev, WebComponents.dev and Components.studio are built with Webpack. We are migrating toward a full Vite build to take advantage of instant startup.

3/ Our in-browser compiler → browser-vite

Since 2019, we created our own in-browser compiler for the web. It powers WebComponents.dev and Components.studio.

For Backlight.dev, we created a brand new version of our in-browser compiler using Vite. To make it run in the browser, we created browser-vite - a patched version of Vite running in a WebWorker. We compile code using esbuild-wasm (The WebAssembly version of esbuild) and even support Vite HMR 🤯.

The results are astonishing, and we will share more about them in later posts.

We will roll out the new compiler on WebComponents.dev and Components.studio very soon. Fasten your seat belt!

Meanwhile, you can check browser-vite on GitHub.

Closing thought

As described above, Vite is taking an essential part of our product development tooling but also inside our products themselves.

We see a lot of teams embracing Vite in the future. We are proud to help the Vite ecosystem with our contribution.

Today we are officially supporting Vite, but we will continue to provide feedback, contribute code/plugins, and develop browser-vite in the open.

Stay tuned here for more Vite and browser-vite content from ‹div›RIOTS 🤘