Mira el video si prefieres:
Comencemos diciendo que Vite es una palabra francesa que se pronuncia /vit/, muy similar a la palabra Vue pero que todo mundo dice /viu/.
Evan You, el creador de estas dos increíbles herramientas, tiene esta pequeña atracción por usar palabras francesas con V.
Vite es una herramienta para desarrollar sitios web con facilidad y hacer build de tu proyecto rápidamente.
Pero no es igual a otras que seguro ya conoces como create-react-app, Browserify o Webpack, Vite es diferente. 👩🏼🎤
Vite está enfocada en ofrecer no solo una solución extremadamente rápida para el empaquetado de tus aplicaciones web, sino que también está muy interesada en ofrecer una experiencia excepcional para el desarrollador.
En mi canal ya hemos hablado bastante del DX (developer experience) y de la importancia de disfrutar de la programación en el día a día en tu trabajo como desarrollador. Bueno, pues la filosofía de Vite, gira entorno a ofrecer una experiencia “Lightning fast” ⚡️
Me ha resultado más que interesante descubrir que la motivación que tuvo Evan para crear esta herramienta fueron sus ganas de no salir del Flow.
El Flow es ese estado místico metafísico, donde puedes encontrarte a ti mismo plenamente concentrado, completamente abstraído en la actividad creativa que como programador es posible alcanzar, donde el mundo exterior deja de existir. 🧘🏻
Y digo místico porque el Flow es un estado que incluso antes de tener ese nombre, ha intrigado a escritores, poetas y artistas de todas las diciplinas en siglos pasados, pero que en la actualidad ya muy pocos podemos alcanzar. 🤳🏼 Sobre todo por el uso indiscriminado (abuso) de la tecnología y el smart phone, con hábitos que interrumpen cualquier forma de concentración que podamos alcanzar. 📵
¡Pero hey! en esta entrada no quiero hablarte del mal uso de la tecnología, eso lo dejamos para mi podcast que si aún no lo has escuchado, pues te dejo un enlace para que lo descubras. 🎧
Lo que me llamó la atención fue que Evan estaba cansado de que cada que hacía un cambio en la aplicación que se encontraba escribiendo, el proceso de “building” tomaba mucho tiempo; había que esperar mucho para que un pequeño cambio se reflejara en el navegador, y esta espera de varios segundos lo sacaba de su estado de Flow. 😡
Convirtiendo su trabajo en improductivo y tedioso.
Hoy en día con Vite los cambios son “Snappy”, instantáneos, gracias al HMR (Hot Module Replacement).
⚡️ ¿Qué nos ofrece Vite?
Vamos a enlistar solo algunos de los muchísimos beneficios que esta herramienta nos ofrece, hablemos de su increíble comunidad open source y de paso te voy a revelar algunos de los secretos y hacks que más me gustan a mi de esta herramienta.
Vite consiste de dos partes principales:
- Un servidor web para desarrollo con muchas ventajas sobre las alternativas, pues está basado en los “ES Modules”, ahora nativos en el navegador, lo que les permite un reemplazo de módulos en extremo veloz (Hot Module Replacement HMR).
- Y un proceso para crear el build de producción con “zero config” (cero configuración). Podemos conseguir un bundle altamente optimizado, incluyendo nuestros assets estáticos gracias a Rollup.
Esto nos permite comenzar un proyecto en cualquiera de nuestras herramientas favoritas como Vue, React, Svelte, Solid, Qwik, Preact, Lit, Vanilla y hasta Angular. No estamos atados, lo que nos permite ampliar nuestra carrera profesional sin cambiar de builder. ✅
Pero Vite no se queda solo con herramientas para el front-end, también soporta server side rendering (SSR), ofreciendo una gama de herramientas espectacular para el desarrollo web moderno. 🤯
Vite está basado en una arquitectura super inteligente de plugins lo que lo convierte en una herramienta altamente extensible, además de que su API para plugins está escrita en JavaScript. Esta es una de las razones de que Vite tenga tantas opciones, pues la misma comunidad open source de JS. se ha encargado de agregar todos los colores y sabores a una velocidad vertiginosa. 🏎️
🤼 ¿Qué hay de su comunidad open source?
Vite y su creador Evan You, han demostrado que se puede competir contra los gigantes que mueven las masas, como Facebook y React, desde detrás de un monitor como desarrollador independiente, gracias a internet. 🤓🛜
Cómo sabes, el open source es: comunidad global, (esto también te lo platico en el episodio de mi podcast sobre open source) lo que agrega transparencia y profesionalismo a nuestro código, pues no podemos esconder nuestra mugre debajo de la alfombra, lo que nos obliga a ser mejores desarrolladores. 💪🏻
Y aunque existen empresas muy “vivas” que se aprovechan de la comunidad open source para popularizar sus productos con fines comerciales como lo hace Vercel con Next.js, que respeta poco al desarrollador.
Vite nos recuerda que la comunidad libre e independiente, aún existe. Y pues para mis pulgas esto por su puesto que me encanta a mi y a millones de desarrolladores al rededor del mundo, casi 8 millones de usuarios al mes en npm, para ser específicos. 📦
🫨 Bueno pero, ¿por qué tanto alboroto?
Vite ofrece una experiencia tan avanzada y moderna a la hora de desarrollar, que los developers lo aman, y las empresas, startups y proyectos open source de nueva generación como Astro o Qwik, han comenzado a construir encima de esta herramienta, evitando la creación por su cuenta de herramientas para el bundling y la administración de paquetes y dependencias, lo que los libera para concentrarse en la construcción de sus herramientas disruptivas, delegando por completo a Vite el trabajo duro del entorno de desarrollo, que a su vez, Vite hace de maravilla. Sin mencionar que las empresas que lo adoptan se preocupan por la experiencia de sus desarrolladores, conservándolos por más tiempo al permitirles disfrutar de su trabajo. 😍
Además Vite también ha motivado la creación de nuevas herramientas y frameworks, pues por su arquitectura de plugins es absurdamente fácil construir nuestro propio framework en cuestión de horas, incluso estoy pensando en hacer un video para crear nuestro propio framework web con Vite. ¿Te gustaría ver ese video? No dejes de decírmelo en los comentarios.
👀 Uno de los secretos de Vite que más me gustan, es que nos ofrece una versión escrita en Rust, lo que hace que la herramienta sea todavía más veloz 😯
🤓 Vamos a alimentar al nerd de tu interior
Como en este canal, nos encanta codear, vamos a comenzar un proyecto muy simple con Vite utilizando nada más que HTML y JavaScript sin framework, y de paso vamos a instalarle TailwindCSS para los estilos. 👩🏻💻
Si estás comenzando tu carrera como programadora(or) web, este es un excelente entorno de desarrollo, moderno, increíblemente rápido y que seguro vas a disfrutar.
Requisitos
Recuerda que para poder usar la terminal de nuestra computadora, necesitamos tener instalado Node.js que actualmente se encuentra en su versión 21.2.0.
Lo puedes descargar desde el sitio oficial, pero aquí te dejo un video por si quieres aprender a administrar diferentes versiones.
Usando Vite ¡desde ya!
Para usar Vite solo tenemos que ejecutar el comando para crear un nuevo proyecto.
npx create-vite@latest
Puedes ejecutar este comando sin el latest, pero yo prefiero siempre usar la ultima versión.
Eso es todo, este comando nos llevará de la mano en la creación de nuestro nuevo proyecto, gracias a su CLI (Command Line Interface) interactivo:
Podemos seleccionar entre todos los frameworks más populares, pero también podemos comenzar un proyecto solo con VanillaJS, lo que nos permite tener simplemente un archivo HTML y JS.
Observemos el nuevo proyecto
Vite crea por nosotros un archivo llamado main.js que contiene una lógica super simple que dibuja una pantalla interactiva con un contador y agrega un archivo counter.js que contiene la implementación de este contador (observa la linea 24).
Una aplicación sin framework, solo con VanillaJS. ¿Genial no?
export function setupCounter(element) { let counter = 0 const setCounter = (count) => { counter = count element.innerHTML = `count is ${counter}` } element.addEventListener('click', () => setCounter(counter + 1)) setCounter(0) }
Vamos a agregar Tailwind a Vite
Nuestro proyecto es simple pero moderno, vamos entonces a agregar una de las herramientas más modernas para trabajar con estilos sin tener que salir del HTML.
Me refiero a: TailwindCSS. ⛵️
En nuestra terminal o en la terminal de VSCode, vamos a instalar las siguientes bibliotecas:
➜ npm i -D tailwindcss postcss autoprefixer
Estas herramientas se agregarán a nuestro archivo package.json en la sección de dependencias de desarrollo, pues solo se usarán al momento del proceso de building, y no serán parte de nuestro código final de producción. Por eso la flag -D.
Ahora vamos a inicializar el archivo de configuración de TailwindCSS:
➜ npx tailwindcss init -p
La flag -p es importante, pues es la encargada de inicializar postcss también.
➜ npx tailwindcss init -p Created Tailwind CSS config file: tailwind.config.js Created PostCSS config file: postcss.config.js
¡Perfecto! Ahora podemos modificar nuestro archivo style.css con las directivas de Tailwind y usarlo en el HTML:
@tailwind base; @tailwind components; @tailwind utilities;
El ultimo paso es indicar los archivos en donde escribiremos utilidades de TaiwlindCSS en su archivo de configuración:
// tailwind.config.js /** @type {import('tailwindcss').Config} */ export default { content: ["./**/*.{js,html}"], // Archivos con extensión .js o .html theme: { extend: {}, }, plugins: [], };
Observa la llave content. Donde hemos dicho que: todas las carpetas que contengan archivos con cualquier nombre, pero con extensión .js y .html.
De esta forma, si vamos a nuestro archivo HTML o al archivo main.js y agregamos un par de directivas de Taiwlind, los estilos correspondientes se agregarán.
import "./style.css"; import javascriptLogo from "./javascript.svg"; import viteLogo from "/vite.svg"; import { setupCounter } from "./counter.js"; document.querySelector("#app").innerHTML = ` <div> <a href="https://vitejs.dev" target="_blank"> <img src="${viteLogo}" class="logo" alt="Vite logo" /> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" /> </a> <h1 class="text-6xl text-red-500">Hello Vite!</h1> <div class="card"> <button id="counter" type="button"></button> </div> <p class="read-the-docs"> Click on the Vite logo to learn more </p> </div> `; setupCounter(document.querySelector("#counter"));
Observa la etiqueta <h1>. Levanta tu servidor de desarrollo y ve al navegador. 🤩 🥳
🚀 Ya para terminar, hagamos el build.
Supongamos que nuestro proyecto está listo para subirse a nuestro servidor que tenemos en un hosting típico (Godaady, Hostgator) que nos permite subir archivos a un Apache o a un Nginx.
Vamos a crear nuestra versión de producción con Vite:
➜ npm run build > ejemplo@0.0.0 build > vite build vite v5.0.0 building for production... transforming (2) vite/modulepreload-polyfill.js warn - The utility `w-[calc(100%-theme('spacing[some_key][1.5]'))]` contains an invalid theme value and was not generated. ✓ 7 modules transformed. dist/index.html 0.45 kB │ gzip: 0.29 kB dist/assets/index-x-4aClqU.css 32.26 kB │ gzip: 6.48 kB dist/assets/index-SerHyYjy.js 2.62 kB │ gzip: 1.39 kB ✓ built in 5.22s
Se ha creado una carpeta dist que contiene nuestra aplicación, simplificada, comprimida y optimizada, con todo y nuestros assets, lista para subirla a nuestro servidor. 😎
Para comenzar con nuestra carrera como programador(a) web, no está nada mal ser así de profesional al entregar la versión de producción a nuestros clientes, ¿no crees? 🤵🏻♀️
¡Y ya está! Hemos hecho una buena travesía juntos, yo pienso que esto te ha servido y que ahora puedes hablar con más confianza de qué es Vite y por qué es tan popular.
Si es así, no dudes en suscribirte. Y no dejes de explorar la documentación oficial de Vite.
Gracias por tu tiempo.
Abrazo. Bliss.
Enlaces relacionados
© 2016 - 2023 Fixtergeek