A tour of my new Vite Ruby on Rails application template

As I took a quick break from my other series (Let's Build for Ruby on Rails developers, and Tailwind Components) I recently came across a new gem called Vite Ruby. This video walks through what the gem entails and tours a new Ruby on Rails application template I've created for free use!

P.S. I believe I'm pronouncing "Vite" wrong so forgive me in advance. It should be "vit". 😆

What is Vite?

Vite is a new way to think about the front-end. We're at the dawn of some big changes for frontend tooling. ESM modules are now supported in the browser which means tools like Vite can exist.

From Vite's website the summarized version of what is and why it exists is as follows:

Vite (a French word for "fast", pronounced /vit/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its Plugin API and JavaScript API with full typing support.

Why Vite?

I'd recommend reading the more in-depth reasoning here. My summarized take is that as applications scale, build/preprocessing times do along with it. Your build step is often a time suck and makes the developer experience quite poor. Vite is another approach to solving this pain by supporting native ESM modules and skipping the build step tools as Webpack requires after each change.

Vite also allows for on-demand changes so when you modify some javascript only the portion you modified is changed, unlike the Webpack story where your entire project needs to recompile.

The TL;DR; – It's faster and easier to manage than something like Webpack.

What is Vite Ruby?

Vite Ruby is an alternative to Webpacker which is a Rails default as of version 6.1

Webpacker has brought us ES6 support for a while now that allows us to use modern JavaScript to no avail. This works great out of the gate but as your Ruby on Rails app and JavaScript grows you might start to notice sluggish performance.

Vite Ruby is a new gem with a different approach.

• Processes files on demand
• Hot Module Reloading is actually instant
• There's virtually no configuration required.

My new Vite Rails Application Template

My new template is heavily inspired from a previous template I used which sported Tailwind CSS and a few gems.

That previous template has served me well but I'm excited about the Vite version for its speed and quick setup. Bundled with the template is a new CSS framework called WindiCSS. It's essentially a clone of Tailwind CSS with less config overhead and more advanced features.

Here's a quick summary of why Windi CSS exists:

If you are already familiar with Tailwind CSS, think about Windi CSS as an on-demanded alternative to Tailwind, which provides faster load times, fully compatible with Tailwind v2.0, and with a bunch of additional cool features.

"When my project became larger and there were about dozens of components, the initial compilation time reached 3s, and hot updates took more than 1s with Tailwind CSS." - @voorjaar

Installation

Defer to the readme for the most up-to-date guide.