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

Rate this content
Bookmark

En esta charla aprenderás qué es Vite, por qué es tan genial y por qué quieres usarlo lo antes posible. También aprenderás cómo usar Vite con Vue.js o React, y qué es Vitepress y cómo usarlo.

Alex Kyriakidis, fundador de Vue School, también responderá las preguntas más frecuentes sobre Vite, incluyendo su uso en producción, Vite y los runners de prueba, qué significa para Nuxt y muchas más.

22 min
21 Oct, 2021

Video Summary and Transcription

Vue School ofrece material de entrenamiento gratuito, masterclasses y servicios de consultoría. Vite es un cambio de juego para el desarrollo de Vue y web, mejorando significativamente la experiencia de desarrollo. Aprovecha la característica nativa de los módulos ES del navegador y utiliza ESBuild. El servidor de desarrollo de Vite es mucho más rápido que otros bundlers. Vite proporciona un entorno de desarrollo extremadamente rápido para varios frameworks y admite renderizado en el servidor y generación de sitios estáticos. Vite está listo para producción y es probable que sea utilizado por Vue CLI en el futuro.

Available in English

1. Introducción a Vue School y Vite

Short description:

¡Hola Vue London! Soy Alex Kyriakides, autor de The Majesty of Vue.js. He contribuido a Vue.js y fundé Vue School. Ofrecemos material de entrenamiento gratuito, masterclasses y servicios de consultoría para mejorar el rendimiento y solucionar errores.

¡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.

2. Vite: Un Cambiador de Juego para Vue y Desarrollo Web

Short description:

Hoy hablaré sobre cómo Vite cambia el juego para Vue y el desarrollo web. Vite es una nueva herramienta de compilación front-end que mejora significativamente la experiencia de desarrollo. Consiste en un servidor de desarrollo que guarda el código directamente en el navegador, lo que lo hace increíblemente rápido. Vite aprovecha la característica nativa de módulos ES del navegador y utiliza ESBuild para funciones que aún no son compatibles con los navegadores modernos.

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.

3. Rendimiento del Servidor de Desarrollo y Filosofía de VT

Short description:

Y esto es enorme si lo comparas con los otros empaquetadores. Es aproximadamente 25 veces más lento que ESBuild. El servidor de desarrollo se vuelve más lento a medida que una aplicación crece. VT es revolucionario en ese sentido porque tiene una filosofía muy diferente sobre cómo se inicia el servidor de desarrollo.

con los otros empaquetadores, pero observa que tarda aproximadamente cinco veces más cuando ESBuild se ejecuta con un solo hilo, sin paralelismo. Pero la siguiente opción más rápida después de ESBuild con un solo hilo es Rollup con Terser. Y esto tarda 36 segundos. Es aproximadamente 25 veces más lento que ESBuild. Y luego Webpack es un poco más lento, 41 segundos. Y la solución más lenta aquí tomaría 120 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.

4. Comando de construcción de Vite y soporte de navegadores heredados

Short description:

El comando de construcción de Vite construye tu aplicación para producción, se encarga de más cosas y garantiza que funcione en todos los navegadores. Es más rápido que el empaquetado tradicional y admite navegadores heredados con el complemento PluginLegacy.

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.

5. Características de Vite y VitePress

Short description:

Vite proporciona un entorno de desarrollo extremadamente rápido para Vue.js, React.js, Preact, Svelte y más. También hay muchos otros modelos y plantillas que puedes usar con Vite que son creados por la comunidad. Vite también es capaz de renderizado en el lado del servidor y generación de sitios estáticos, y existe VitePress, un generador de sitios estáticos construido sobre 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.

6. Vite, Next y Vue School

Short description:

Vite está listo para producción y es probable que sea utilizado por Vue CLI en el futuro. Vite es una gran noticia para Next, y hay un módulo oficial llamado Next Vite que te permite disfrutar de una experiencia de desarrollo Next súper rápida. No necesitas aprender Vue desde cero ni reconstruir tu aplicación Vue CLI. Vite significa rápido o veloz en francés, y se pronuncia como Vite. Vue School IO ofrece la Masterclass de Vue 3, cursos en video, tutoriales y servicios empresariales para todos los niveles de habilidad.

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. ♪♪♪

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Top Content
Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.