April 22, 2021•
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 build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.
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.
The TL;DR; – It's faster and easier to manage than something like Webpack.
What is Vite Ruby?
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
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
Defer to the readme for the most up-to-date guide.