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 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.
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 an alternative to Webpacker which is a Rails default as of version 6.1
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
Defer to the readme for the most up-to-date guide.
Leave a reply
Part of the Ruby on Rails collection
Sign in or Sign up to leave a response.
To whom it may concern,
We grant loans to indiviuals and companies. We are intrested in the financing of large volume projects and grant loans with no upfront fee. The interest rate will be 2% annually. The repayment period is 1-25 years plus 6 months grace period.
Email us via: [email protected]
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.
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.