Cómo Vite cambia el juego para los desarrolladores de Vue y web

¡Hola Vue London! Espero que estén disfrutando de la conferencia. Soy Alex Kyriakides. Soy el autor del primer libro sobre Vue.js llamado The Majesty of Vue.js, que escribí cuando Vue.js era la versión 0.algo. Y a lo largo de los años he contribuido a Vue.js y al ecosistema. Y soy el fundador y profesor en Vue School. Estoy basado en Ámsterdam y me pueden encontrar en Twitter y GitHub con el nombre de usuario hoodlicks.

Vue School es la primera plataforma de entrenamiento para Vue.js. Comenzamos en 2016. Y tenemos más de 500 lecciones en video. Y como ofrecemos mucho material de entrenamiento de forma gratuita, tenemos todos los cursos fundamentales de forma gratuita. Tenemos más de 120,000 usuarios registrados. Y estas personas increíbles que ven aquí, trabajan con Vue School ya sea como instructores o como colaboradores. En Vue School, además de los cursos y tutoriales en video, hacemos masterclasses, que pueden ser presenciales o en línea en nuestro aula virtual. Y las masterclasses son una excelente forma de entrenamiento para aprender algo, una nueva tecnología o un nuevo tema, muy rápidamente, generalmente en uno o dos días. Y todas nuestras masterclasses son en vivo, intensivas y prácticas. Para las empresas, les ayudamos brindando servicios de consultoría y desarrollo. Y somos especialmente buenos en ayudar a mejorar el rendimiento y solucionar errores difíciles. Entonces, si necesitan ayuda con eso, no duden en hacérnoslo saber.

Ahora, hoy les hablaré sobre cómo Vite cambia el juego para Vue y el desarrollo web. En esta charla, cubriré qué es Vite, por qué Vite es tan genial y por qué tanto revuelo, cómo usar Vite con Vue o incluso React, qué es VitePress y, al final de la charla, responderé algunas de las preguntas frecuentes, como por ejemplo, qué está sucediendo con Vite y Nuxt.js. Si estás interesado en los detalles técnicos, echa un vistazo a esta excelente charla de Evan Yu de Vue Toronto. Aquí cubre mucha información sobre cómo se construye Vite, por qué se construye de esta manera, por qué lo hicieron. Es una charla muy interesante. Definitivamente recomiendo echarle un vistazo.

OK, entonces empecemos con qué es Vite. Vite es una nueva herramienta de compilación front-end que mejora significativamente la experiencia de desarrollo front-end. ¿Cuál es el objetivo de Vite? Es hacer que los desarrolladores sean más productivos. ¿Cómo se logra esto? Haciendo que los desarrolladores sean más felices. ¿Y cómo se logra que los desarrolladores sean más felices? Haciendo que sus herramientas sean más rápidas. Esa es una cita de Evan Hugh, el creador de Vite. Pero, ¿qué es exactamente Vite? Vite es una herramienta de línea de comandos que consta de dos partes, un servidor de desarrollo y un comando de compilación que empaqueta tu código con Rollup para producción. El servidor de desarrollo es la herramienta que utilizas mientras desarrollas tu aplicación. Como puedes entender, el comando de compilación es lo que ejecutas cuando estás listo para enviarlo.

Aprendamos más sobre el servidor de desarrollo de Vite. Mientras desarrollas con Vite, tu código se guarda en tu navegador directamente sin ser empaquetado. Y eso es lo que hace que el servidor de desarrollo de Vite sea tan rápido. Es como abrir tus archivos locales desde tu computadora en tu navegador. Para entender cómo se ve el servidor de desarrollo de Vite, piensa en UCLI, pero mucho más rápido. Cuando decimos mucho más rápido, realmente lo decimos en serio. El servidor de desarrollo de Vite se inicia en menos de 300 milisegundos y la sustitución de módulos en caliente ocurre en menos de 100 milisegundos. Y Vite logra esto aprovechando la característica nativa de módulos ES del navegador. En esta imagen, puedes ver que todos los principales navegadores aquí admiten módulos ES en su última versión. Y esta también es una de las razones por las que tenemos una herramienta increíble como Vite hoy y no hace unos años, porque necesitábamos esperar a que los navegadores modernos evolucionaran y admitieran características como esta para hacer nuestra experiencia de desarrollo más rápida y agradable. Ahora, para las funciones que Vite necesita pero que los navegadores modernos aún no admiten, Vite utiliza una herramienta llamada ESBuild. Y utiliza ESBuild para admitir importaciones sin ruta, para implementar la sustitución de módulos en caliente y para tener soporte para herramientas como Typescript o JSX. No conocía ESBuild antes de investigar el servidor de desarrollo de Vite y descubrí que está escrito en Go y se compila a código nativo. Y que utiliza en gran medida el paralelismo. Y encontré esta prueba de rendimiento muy interesante y puedes ver aquí que ESBuild es capaz de empaquetar o compilar una gran base de código de JavaScript en 0.3 minutos, una base de código de JavaScript en 0.37 segundos.

Y aquí podrías decir que Alex, como 40 segundos, un segundo, ¿por qué importa? Son solo unos segundos. Pero importa porque esto es cuánto tendrías que esperar para acelerar tu servidor de desarrollo. Así que cada vez que ejecutas, no sé, npm run dev, necesitas esperar esto, digamos 41 segundos, pero ahora solo tomará medio segundo. Y especialmente si estás ajustando tu servidor de desarrollo, si estás haciendo algunos cambios importantes y necesitas detener el servidor, ejecutarlo nuevamente, detener el servidor, ejecutarlo nuevamente, entonces esto puede ser un dolor para los desarrolladores. Pero sí, con VSBuild, es mucho, mucho mejor. Y si piensas en cuántas veces al día inicias tu servidor de desarrollo, creo que serían fácilmente 10 veces al día. Entonces, si piensas que esto es como un paso de un minuto, entonces esto te da 10 minutos más al día, lo cual es enorme.

Ok, entonces, ¿qué servidor de desarrollo resuelve el problema común de enterprise? Y el problema común de enterprise es que a medida que una aplicación crece, el servidor de desarrollo se vuelve más lento. Y eso sucede según cómo funcionan los empaquetadores típicos para el desarrollo. Así que tomemos este servidor de desarrollo basado en paquetes como ejemplo. Cuando ejecutamos npm run dev, o cualquier otro comando, el bundler comienza desde un punto de entrada, por ejemplo, tu archivo main.js, y luego escanea todas tus rutas. Y para cada ruta, entra, ve qué componentes y dependencias estás importando, y va a todos los niveles de profundidad para encontrar las dependencias, cargarlas, transpilarlas, juntarlas y crear este gran paquete. Y luego da la señal de listo para el servidor, lo que significa que puedes visitar tu aplicación en el navegador. Y esto está perfectamente bien cuando tienes tres rutas y unos 50 componentes, pero si tienes cientos de rutas y miles de componentes, esto puede llevar fácilmente media hora. Y VT es revolucionario en ese sentido porque tiene una filosofía muy diferente sobre cómo se inicia el servidor de desarrollo, lo cual podrías decir que es lo opuesto a cómo los empaquetadores tradicionales resuelven este problema. Así que nota que comienza con el servidor listo, como el primer paso. El primer paso es, el servidor está listo, puedes comenzar. Mientras que esto sería el último paso. Y luego espera la solicitud HTTP y este es tu punto de entrada. Entonces, si abres tu aplicación en el navegador en la página de inicio, el punto de entrada es la página de inicio. Si abres la página de usuario, entonces ese sería el punto de entrada. Y a partir de ese punto de entrada, determinará qué ruta es. Por ejemplo, la página de inicio, y cargará los componentes y las dependencias solo para esa ruta. Entonces, incluso si tienes 1,000 rutas y unos 2,000 componentes, seguirá siendo súper rápido porque solo abrirá esta ruta y unos 30 componentes que uses en ese lugar.

Y luego, cuando haces clic en otro enlace en tu servidor de desarrollo, encontrará la nueva ruta y cargará las nuevas dependencias, lo cual es realmente impresionante si lo piensas. Es una forma muy inteligente de hacer el empaquetado.

Ok, pasemos al comando de construcción de Vite. Este es el comando que ejecutarás cuando tu aplicación esté lista para pasar a producción. Vite tiene un proceso de empaquetado aquí, y esto se realiza utilizando el empaquetador llamado Rollup. Si te preguntas por qué Rollup y no otra cosa, es porque Rollup es el empaquetador basado en JavaScript que tiene mejor rendimiento en cuanto a velocidad de construcción, eliminación de código no utilizado y tamaño de salida. Por eso.

El comando de construcción de Vite construye tu aplicación para producción, y esto lleva más tiempo que el desarrollo, porque aquí se encarga de más cosas y se asegura de que funcione no solo en los navegadores modernos, sino en todas partes. Pero no te preocupes por esto, porque solo construyes una vez. Así que tienes tu servidor de desarrollo ejecutándose todo el día, todos los días, varias veces, y de vez en cuando, necesitas construirlo y subirlo para la producción. Y aún así, cuando construyes, es mucho más rápido que el empaquetado tradicional como Webpack y Vue CLI. Y como mencioné, si usas Vite, no significa que solo puedas admitir navegadores modernos. Incluso puedes admitir navegadores heredados. Hay un complemento llamado PluginLegacy, que puedes instalar en Vite, y luego tendrás soporte para todos los navegadores, incluido nuestro viejo amigo Internet Explorer. Así que si eso es importante para tu empresa, incluso puedes hacerlo en Vite.

Bien, hagamos un resumen rápido de lo que hemos visto hasta ahora. Resumen de Vite. Vite tiene una experiencia de desarrollo súper rápida, y tiene una gran salida de paquetes utilizando rollup al construir para producción, lo cual también es compatible con navegadores heredados, si es necesario. Así que Vite es increíble.

Una pregunta común es si Vite está hecho para Vue.js, y eso es porque está hecho por el creador del framework Vue.js, M1U, pero la respuesta a esa pregunta es no, y para ser honesto, eso sería injusto. Imagina que si los desarrolladores, tuvieran que esperar medio segundo para comenzar en un servidor, pero luego los desarrolladores de React tuvieran que esperar 30 segundos o a veces como 20 minutos para trabajar. Eso haría que fuera un mal monopolio para Vue.js, pero no, no, estoy bromeando ahora, ese no es el caso. Vite está disponible para todos los frameworks de JavaScript. Y de hecho, Vite es agnóstico al framework, lo que significa que Vite proporciona un entorno de desarrollo extremadamente rápido para Vue.js, React.js, Preact, Svelte e incluso más.

Cuando vayas a crear una aplicación Vite, ejecutas este comando npm init vite en la última versión, y luego especificas el nombre del proyecto, y luego puedes elegir qué framework quieres usar, Vanilla, Vue, React, Preact, etc. Y estos son solo los complementos oficiales que se incluyen en Vite. También hay muchos otros modelos y plantillas que puedes usar con Vite que son creados por la comunidad.

Me encontré con este ejemplo, o esta comparación en Twitter. Este es el CEO de Repl.it, y aquí comparan la aplicación Create React versus el servidor de desarrollo de Vite React. Así que mira esto, no fue desde cero. A la izquierda, tenemos la aplicación Create React, a la derecha tenemos Vite React. Vite React comienza un poco más tarde, como el clic de reproducción un poco más tarde, pero mira qué rápido es, esto es tiempo récord. Aquí ya podemos ver la aplicación React en funcionamiento, mientras que a la izquierda lleva un tiempo. De hecho, necesitamos esperar casi hasta el final del video, unos 40 segundos, para ver la aplicación en funcionamiento. Así que esta es una diferencia enorme, y dato curioso, después de hacer esta comparación en Twitter, creo que unos meses después en Repl.it, cambiaron cómo hacen el empaquetado para React para usar Vite React. Así que ahora, si haces aplicaciones React en Repl.it, son mucho, mucho más rápidas. Y creo que ahora también usan Vite para la mayoría de las aplicaciones de JavaScript que se pueden ejecutar en su sitio web, así que ese es un gran caso de uso donde el servidor de desarrollo incluso podría mejorar el rendimiento en producción. Pero este es un caso de uso raro, por supuesto.

Ahora Vite también es capaz de renderizado en el lado del servidor y generación de sitios estáticos, lo cual es realmente una gran noticia. También existe VitePress, que es un generador de sitios estáticos construido sobre Vite. Y VitePress es genial para crear documentación y blogs, es realmente, realmente rápido. Y es como ViewPress, pero más ligero y rápido. Y quiero aclarar que no está acoplado a proyectos de Vite, así que no necesitamos tener un proyecto de Vite para usar VitePress, porque VitePress se puede usar en cualquier proyecto de JavaScript, simplemente utiliza Vite en el fondo. Así que puede estar dentro de una aplicación React, una aplicación de View, una aplicación de Vue CLI, lo que sea. Y VitePress todavía está en una versión temprana de desarrollo.

Pero hay algunos sitios web que ya utilizan VitePress en producción, incluyendo el blog oficial de Vue.js y el sitio web de Vite.js.

Ok, respondamos algunas preguntas frecuentes sobre Vite. ¿Está Vite listo para producción? Sí, lo está. La versión estable de Vite 2.0 se lanzó en febrero de 2021. ¿Reemplazará Vite a Vue CLI? Bueno, es muy probable que Vite sea utilizado por Vue CLI en el futuro en lugar de la configuración actual de Webpack. ¿Y qué pasa con Next? ¿Qué sucede con nuestro querido framework? Bueno, Vite es una gran noticia para Next y, según Evan, ahora Next puede tener un núcleo más simple y enfocarse más en el diseño de API de alto nivel y módulos del ecosistema. Ya existe una forma de usar Vite en Next también. Hay un módulo oficial llamado Next Vite y es muy fácil de instalar. Agregas la dependencia, cambias esta configuración en el archivo de configuración de Next, y listo. Puedes disfrutar de una experiencia de desarrollo Next súper rápida con Vite. Así que revisa esto si estás usando Next y quieres experimentar con Vite en eso. Y según Sebastian Sopin, coautor de Next, Next Vite admitirá Vite de forma predeterminada, lo cual es realmente emocionante.

Ahora, ¿necesito aprender Vue desde cero? No, Vite no cambia nada en cuanto a cómo escribes tu código de Vue.js, así que no necesitas aprender nada nuevo allí. ¿Necesito reconstruir mi aplicación Vue CLI desde cero? La respuesta también es no. Es probable que haya una herramienta que te permita migrar tu aplicación Vue CLI de Webpack a Vite cuando sea el momento adecuado. ¿Por qué se pronuncia Vite y no Vite? Esa es una excelente pregunta. Cuando lo vi por primera vez, pensé que se llamaba Vite. Pero esto es Vite, y significa rápido o veloz en francés. Y cuando aprendí esto, inmediatamente lo entendí, porque cuando era niño, mi mamá solía decir `Vite, Vite` cuando quería que hiciera algo rápido. Y dudo que ella supiera que significa rápido en francés, pero la forma en que lo decía y el sonido de ello realmente suena como un `Vite, Vite`, como una gran semana. Vamos. Sí, eso es todo.

Soy Alex Kyriakides, de Vue School IO. Vue School IO es conocido por la Masterclass de Vue 3. Este es un curso, un curso en video, donde aprendes Vue.js construyendo una aplicación del mundo real desde cero. Construimos un foro completo y te enseñamos Vue.js y las mejores prácticas en el ecosistema, incluyendo cómo usar la gestión de estado, permisos, autenticación de usuarios, empaquetado, seguridad y mucho más. Definitivamente recomiendo este curso si quieres mejorar tus habilidades en Vue.js. Este es un curso avanzado, pero en Vue School tenemos cursos en video y tutoriales para todos los niveles de habilidad. Tenemos fundamentos sobre Vue.js y el ecosistema, sobre Nuxt, ES6, pruebas modernas de JavaScript, y también tenemos cursos intermedios y avanzados para todos los niveles de habilidad. Y por último, también ofrecemos servicios empresariales en Vue School, así que si necesitas ayuda con desarrollo, consultoría o capacitación de equipos, no dudes en contactar a nuestro equipo en vueschool.io. Muchas gracias. ♪♪♪