Curso de Vite

Aprende a usar Vite, la increíble herramienta frontend que estaba faltando.
Material disponible
Intermedio
11 Clases 9 h
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.

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

Presentación primeros pasos con Vite

Introducción práctica a Vite Gratis

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.

Demo de Vite al usarlo en una aplicación compleja SPA Gratis

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.

CALENDARIO DE SESIONES ONLINE EN VIVO

Vite
  • Qué es Vite
  • Por qué Vite
  • Primeros pasos
  • Desarrollo, producción con Vite
Instalación y configuración de plugins en Vite Gratis

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.

Vite con compilación modo library

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

Vite para SPA
  • Configuración del proyecto
  • Routing
  • Code Splitting
  • Build
Vite en Laravel
  • Configuración de Vite en Laravel
  • Compilación de diversas librerías CSS y JS
Migrar una aplicación Laravel con Mix para comenzar a usar Vite

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.

Vite en aplicaciones Vuejs

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.

Crear un sitio multi-pagina y sistema de templates con Vite

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.

Crear una PWA con Vite

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.

Cursos que también te pueden interesar

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 190 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete