©2024 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Curso de Vite
Aprende a usar Vite, la increíble herramienta frontend que estaba faltando.
Material disponible
El desarrollo frontend se ha ido complicando a lo largo de los años, desde que existe la necesidad de compilar los assets, como el Javascript o CSS de preprocesadores.
Casi todos los frameworks tienen herramientas para compilación ya listas y muchas veces nos solucionan la vida, pero personalizarlas no siempre es sencillo. Incluso, si estamos haciendo un proyecto completamente nuestro, lidiar con la configuración de herramientas como Webpack es a menudo complejo y laborioso.
Vite viene al rescate, ofreciendo una herramienta frontend que cubre todas las etapas del desarrollo y compilado para producción, aportando sencillez y en muchos casos "cero configuración", pero además mejorando el flujo de trabajo de forma sensible. Con Vite crear un servidor de desarrollo es inmediato y consigue ser 10 a 100 veces más rápido que otras alternativas como el servidor de desarrollo de Webpack, lo que mejora la experiencia del desarrollador en el día a día.
Llevar a producción es también muy sencillo y, de casa, te ofrece utilidades como el "code splitting", que configurarlas en otros proyectos requiere diversos cuidados y avanzadas configuraciones.
Además Vite no se ha casado con ninguna librería o framework. Puedes usarlo con Vue, React, Lit, Svelte, pero también con CMS y frameworks backend como WordPress o Laravel. La comunidad se ha volcado en Vite ofreciendo diversos paquetes para adaptarlo a casi cualquier ámbito que puedas imaginar.
Casi todos los frameworks tienen herramientas para compilación ya listas y muchas veces nos solucionan la vida, pero personalizarlas no siempre es sencillo. Incluso, si estamos haciendo un proyecto completamente nuestro, lidiar con la configuración de herramientas como Webpack es a menudo complejo y laborioso.
Vite viene al rescate, ofreciendo una herramienta frontend que cubre todas las etapas del desarrollo y compilado para producción, aportando sencillez y en muchos casos "cero configuración", pero además mejorando el flujo de trabajo de forma sensible. Con Vite crear un servidor de desarrollo es inmediato y consigue ser 10 a 100 veces más rápido que otras alternativas como el servidor de desarrollo de Webpack, lo que mejora la experiencia del desarrollador en el día a día.
Llevar a producción es también muy sencillo y, de casa, te ofrece utilidades como el "code splitting", que configurarlas en otros proyectos requiere diversos cuidados y avanzadas configuraciones.
Además Vite no se ha casado con ninguna librería o framework. Puedes usarlo con Vue, React, Lit, Svelte, pero también con CMS y frameworks backend como WordPress o Laravel. La comunidad se ha volcado en Vite ofreciendo diversos paquetes para adaptarlo a casi cualquier ámbito que puedas imaginar.
Qué aprenderé en el Curso de Vite
- Iniciar proyectos con Vite
- Configuración del servidor de desarrollo de Vite
- Configuración del proceso de build
- Uso de Vite con diversos stacks de tecnologías
Objetivos del curso
Ofrecer el conocimiento necesario para trabajar con Vite y realizar los pasos relativos al desarrollo de los componentes frontend de los proyectos, en aplicaciones con diversos stacks de tecnologías frontend y backend. Mostrar de manera práctica diversas configuraciones para la personalización de Vite.
Por qué debes aprender Vite
Cuando conozcas Vite vas a querer tenerlo a tu lado. Es una herramienta muy ágil que mejorará sensiblemente tu experiencia de desarrollo en todas las áreas frontend y que puedes aplicar fácilmente a numerosos stack de tecnologías. Además es muy sencillo de aprender y usar!! no se puede pedir más!
Qué tengo que saber
Se asumen conocimientos de desarrollo frontend, aunque no es un curso de desarrollo de aplicaciones, sino de tooling. Entendemos que las personas tienen una idea de trabajo con Javascript y sus particularidades, así como CSS, entender qué son los preprocesadores y otras herramientas habituales de la web. También suponemos que los estudiantes tienen un conocimiento básico del uso del terminal de línea de comandos.
Clases y contenidos
Primeros pasos con Vite
En este vídeo vamos a ver cómo usar Vite de una manera práctica y resumida. Estudiaremos cómo crear un nuevo proyecto con Vite y cómo arrancar el servidor de desarrollo, así como llevar a producción el código con el comando de build. Durante el vídeo también explicaremos rápidamente algunos detalles interesantes sobre Vite y qué ventajas aporta con respecto a otras herramientas frontend anteriores.
Después de haber hecho un "Hola mundo" en Vite en el vídeo anterior, en esta ocasión queremos ir un poco más allá, aunque todavía estemos en "modo demo" de lo que Vite nos puede ofrecer. Se trata de abrir un proyecto de una SPA donde estamos usando Vite, para mostrar cómo una compilación con prácticamente nada de configuración es capaz de compilarse con "code splitting" y mostrar también lo rápido que se levanta el servidor de desarrollo.
Desarrollo de componentes con Vite
- Qué es Vite
- Por qué Vite
- Primeros pasos
- Desarrollo, producción con Vite
En esta clase vamos ver cómo se instala un plugin en Vite y cómo crear el archivo de configuración vite.config.js para especificar qué plugins se van a usar con sus personalizaciones. Veremos cómo usar el plugin que nos permite aumentar la compatibilidad del código Javascript para que funcione en navegadores antiguos, que no soportan módulos ES6.
En este vídeo veremos un ejemplo de configuración de Vite en modo "Library", que es el que usaríamos para un proyecto que pensamos podrá usarse como librería desde otros desarrollos. Veremos cómo configurarlo y cómo excluir dependencias en la librería, como publicar en npm y cómo usar la biblioteca desde otros proyectos
- Configuración del proyecto
- Routing
- Code Splitting
- Build
- Configuración de Vite en Laravel
- Compilación de diversas librerías CSS y JS
En este bloque vamos a ver cómo se realiza la migración de de Mix a Vite. Es decir, en un proyecto Laravel que ya tenemos en marcha desde hace tiempo y donde estamos usando Laravel Mix, que está basado en Webpack, queremos migrarlo para comenzar a usar Vite para el trabajo con los assets del lado del frontend.
Vamos a estudiar Vite en el entorno de una aplicación VueJS. Explicando cómo le puede sacar mayor partido a Vite junto con el framework progresivo Vue.
En esta clase veremos cómo configurar Vite para un sitio que incluye distintas páginas, como un sitio web tradicional y no tanto como una app. Además veremos cómo trabajar con un sistema de templates llamado Handlebars, que nos permitirá la posibilidad de mejorar el código de la aplicación por medio de templates e interpolación de variables de datos.
Usar el plugin vite-plugin-pwa para construir una Progressive Web App, de manera extremadamente sencilla. Veremos cómo hacer la generación del código del service worker, del manifest, cómo cachear archivos de la app para trabajar offline y poder instalar la aplicación en dispositivos. Finalmente realizaremos las modificaciones oportunas para detectar cambios en el service worker, de modo que podamos ofrecer un aviso al usuario que permita actualizar el navegador y descargar el código nuevo de la PWA.
En este vídeo aprendemos a manejar variables de entorno en un proyecto frontend en el que usamos Vite como herramienta. Veremos cómo vite ayuda en la gestión de las variables de entorno y cómo organizar el acceso a éstas.
Cambio de Create React App por Vite
En esta clase vamos a ver el setup de Vite para el desarrollo de aplicaciones con React.
Valoraciones
Alba Carreño
Muy bien, la verdad! superó mis expectativas
Oscar Alonso Doral
Me hubiera gustado incidir más en la configuración de vite
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.