Dismiss

Subscribe to the newsletter

April 22, 2021

2 responses

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:

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.

Leave a reply

Sign in or Sign up to leave a response.

2 responses

Ahmed
Icons/flag
Icons/link diagonal

Good to know about Vite, I should give it a go.
Dealing with webpacker and tailwind is absolutely painful. Compiling time takes around 1-3 minutes. Sometimes I waited 5 minutes, which is enough time to drink a coffee cup.

BTW, like your new music intro.

wangxiaobo
Icons/flag
Icons/link diagonal

hello, I am from china, I am very happy to find your blog, and I learn more skills in this. I want to look for remote work with ruby on rails because My location is a remote provincial capital city in China, there is no relevant work,and the salary is low. now, I learning English.

Est. reading time: 4 minutes
Stats: 419 views

Categories

Collection

Part of the Ruby on Rails collection