Aprende cómo construir una aplicación Vue implementada en el edge para brindar una experiencia ultrarrápida a tus usuarios finales.
Nuxt en el Edge
Video Summary and Transcription
Nuxt es un marco web con muchas características, incluyendo renderizado del lado del servidor, renderizado del lado del cliente, generación de sitios estáticos, renderizado en el edge y más. El Edge es un entorno limitado que se ejecuta en nodos CDN, como la red de Cloudflare. Las opciones de base de datos en el Edge incluyen Postgre con Neon, Versel en Neon, Superbase, MySQL con escala de plan, HyperDB y KV con redis y almacenamiento de Cloudflare. El orador demuestra cómo crear una demostración con una tabla de votos, manejar solicitudes de API, agregar autenticación, guardar votos y mostrar resultados. La hoja de ruta hacia un Nuxt 3 de pila completa con una experiencia en el edge está en progreso. Copilot es una herramienta útil para los desarrolladores. La integración de SSO con GitHub y la mejora de la experiencia del desarrollador son consideraciones importantes para Nuxt 3.
1. Introducción a Nuxt y Edge
Hola a todos. Voy a hablar sobre Nuxt en el edge y lo que significa. Nuxt es un marco web con muchas características, incluyendo renderizado del lado del servidor, renderizado del lado del cliente, generación de sitios estáticos, renderizado en el edge, sistema de hooks, enrutador del sistema de archivos, auto-importación, obtención de datos, middleware, complementos, diseños, transiciones, API del servidor, TypeScript, gestión del estado, componente isla, sistema de capas, preprocesador para Stylus y SAS, ecosistema de módulos, pruebas, procesadores y más. El Edge es un entorno limitado que se ejecuta en nodos CDN, como la red de Cloudflare con aproximadamente 200 nodos. Es rápido, económico, escalable y asequible en comparación con el servidor sin servidor Lambda. Otra opción es dnodeploy.legon.app, que es de código abierto.
Hola a todos. Estoy muy contento de estar aquí. No tendré mucho tiempo, así que iré directamente al grano. Voy a hablar sobre Nuxt en el edge y lo que significa. Estoy en Inoox, también conocido como Sebastian Chopin, que es mi nombre real. Soy CEO de Nuxt Labs y hacemos cosas como consultoría y auditorías. También es bueno si quieres migrar de Nuxt 2 a Nuxt 3. También desarrollamos Volta, que es una gestión de proyectos construida sobre GitHub y nos ayudó a desarrollar Nuxt 3 y convertirlo en una versión estable. Y recientemente, Nuxt Studio está utilizando Nuxt y Nuxt Content con Live Edition. Nuxt es un marco web para crear aplicaciones de vista de pila completa. Entonces, la pregunta que le hiciste a Daniel sobre la experiencia de pila completa definitivamente está en nuestro plan de trabajo, pero tuvimos que estabilizar el marco, convertirlo en un buen marco para el desarrollo front-end antes de sumergirnos en la experiencia de pila completa. También tenemos muchas características. En caso de que no conozcas Nuxt, tenemos renderizado del lado del servidor, renderizado del lado del cliente, generación de sitios estáticos, renderizado en el edge, sistema de hooks, enrutador del sistema de archivos, auto-importación, si eres perezoso como yo. Obtención de datos, middleware, complementos, diseños, transiciones, API del servidor, TypeScript, gestión del estado. Tenemos una gestión del estado predeterminada, pero obviamente puedes usar PNU of UX. Tenemos el componente isla que es experimental pero muy prometedor en cuanto a los componentes del servidor. El sistema de capas, no sé si algunos de ustedes han utilizado capas internamente. Algunas personas, básicamente es una aplicación Nuxt que puedes publicar en NPM y puedes extender. Tenemos preprocesador para Stylus, SAS, el ecosistema de módulos, como has escuchado, pruebas, procesadores y muchas otras características que no te mostraré hoy.
El Edge, ¿quién ya ha implementado en el Edge? Uno, dos, ok. Cinco personas de cada 10 personas. Es un entorno limitado y se ejecuta en nodos CDN. Fue impulsado por los trabajadores de Cloudflare hace unos años y, básicamente, cuando implementas tu código, se replica en la red. Aquí, es la red de Cloudflare y hay alrededor de 200 nodos. Renderiza rápidamente tu código y es muy económico de alojar. Se ejecuta en milisegundos desde el usuario final, esté donde esté en el mundo. No tienes llamadas de inicio de milisegundos, no hay servidor que mantener, se escala automáticamente y es asequible en comparación con, no es un engaño, pero el servidor sin servidor Lambda que puede costarte mucho dinero. Aquí, estamos hablando de 50 centavos por millón de solicitudes y tienen un nivel gratuito para 100,000 solicitudes al mes. Pero el trabajador de Cloudflare no es el
2. Introducción a las Funciones de Edge
Se recomienda revisar Vercel Edge function, Netlify Edge function, Edge.io, StackPath y más. Tiene limitaciones y es diferente a Node y al navegador. Mayormente utiliza el motor V8 para analizar el código JavaScript. Los complementos eran desafiantes en el pasado, pero ahora las personas están más familiarizadas con la creación de complementos JavaScript universales. El tiempo de ejecución de Edge tiene limitaciones pero también ventajas, lo que lo convierte en un compromiso.
3. Base de datos y Demo en Vivo
El tamaño total está limitado a 5 megabytes, pero con Nitro y Next, podemos simular y rellenar la mayoría del entorno de Node y del navegador para producción con AMP. Las opciones de base de datos en Edge incluyen Postgre con Neon, Versel en Neon, Superbase, MySQL con escala de plan, HyperDB y KV con redis y almacenamiento de Cloudflare. Se mostrará una demostración en vivo utilizando un proyecto simple de Next 3 con una capa de espacio Next, utilidades y una base de datos SQLite. Se utilizará la herramienta Drizzle para especificar tablas.
4. Creación de Demo y Tabla de Votos
Vamos a hacer una pequeña demostración con esto. El CSS es aburrido. Pero para poder votar, necesitaré que las personas inicien sesión. Voy a crear mi tabla de votos. Tiene un ID y un ID de usuario.
5. Creación de Tabla de Votos y Ruta de API
Se requieren campos de ID de usuario, nombre de usuario y elección final. Se crea un índice para asegurar que cada usuario solo pueda votar una vez. Se crea una ruta de API llamada vote.get para manejar las solicitudes GET y recuperar los datos de la tabla de votos. La tabla se ordena por ID de voto en orden descendente. Se utilizarán las herramientas de desarrollo de Next para el desarrollo.
6. Creación de solicitud POST y realización de llamada a la API
Tenemos una pestaña de ruta similar a Postman donde podemos llamar directamente a la API. Para actualizar la tabla de la base de datos del servidor, necesitamos ejecutar una consulta. Después de crear la migración y iniciar el servidor, podemos recuperar los votos. Ahora, creemos una solicitud POST para habilitar la votación. Obtenemos el cuerpo y la elección, y realizamos una verificación. Nitro proporciona un servidor HTTP extremadamente rápido con funciones importadas automáticamente. Realicemos la solicitud POST ahora.
7. Adding Authentication and User Session
Para agregar autenticación, crea una solicitud out.get y usa el método mágico para recuperar el usuario de GitHub. En Vue, usa la sesión del usuario para manejar usuarios conectados y proporcionar un botón de cierre de sesión. Si está conectado, muestra un mensaje de bienvenida con el inicio de sesión del usuario. De lo contrario, llama a la API para iniciar sesión con GitHub.
8. Handling API Out and Saving Votes
Al hacer clic en API out, el usuario es redirigido desde GitHub y se establece la sesión del usuario. Luego, el voto se guarda en la base de datos y se produce un error si el voto no es único.
Un poco de CSS. De acuerdo. Entonces, ¿qué sucede ahora cuando hago clic en API out? Todavía estoy en slash API slash out. He sido redirigido desde GitHub. Tengo el código aquí. Cinco minutos. Muy bien. Es molesto. Volviendo a la ruta out, lo que quiero tener es si esto es de la biblioteca, pero si no tengo ningún usuario de GitHub, significa que he sido redirigido a GitHub. La primera vez que visito esa ruta. Luego me redirige a esta ruta. Tengo mi usuario de GitHub. Voy a establecer la sesión del usuario dando el usuario de GitHub y regresar, enviar, redirigir a la página de inicio. Obviamente, si actualizo. No importa. Intentémoslo de nuevo en esto. Iniciar sesión. Luego tengo mi usuario. Si echo un vistazo a mi aplicación, el valor de la cookie en realidad se guarda y se crea, y es por eso que tenemos esta variable de entorno para desencriptar la sesión en el lado del servidor, pero en realidad tiene todo lo que establecí dentro de este objeto. Entonces, lo que necesito hacer aquí es asegurarme de que no pueda votar si no está autenticado. Así que puedo obtener la sesión haciendo requireUserSession, y ahora lo que quiero es guardar el voto en mi database. Entonces, const vote useDB.insert tableVote.value. Así que obtengo el ID de usuario que es mi session.user.id. Entonces, ID de usuario, nombre de usuario, session.user.login y la elección. Quiero que devuelva el objeto al insertar la fila y devolvérmelo a mí. Y luego puedo devolver el voto. Veamos cómo se ve. Café. De acuerdo. Si intento guardarlo de nuevo, obtengo este error de restricción única porque no puede guardar este índice único.
9. Updating Votes and Displaying Results
Necesito usar onConflict para actualizar la elección del ID de usuario objetivo. Después de actualizar, puedo listar el voto usando useFetch para el renderizado en el lado del servidor. Para votar, puedo llamar a la solicitud post directamente en el lado del cliente. Después de actualizar, el recuento de votos se actualiza y es reactivo. Antes de publicar la demo, incluiré el total de votos y la elección del usuario.
Necesito usar este onConflict para actualizar. Entonces, el objetivo es en realidad el ID de usuario. Y quiero establecer la elección. Intentémoslo de nuevo. No crea ninguna nueva entrada, pero está actualizando mi información en la tabla, en la entrada, y puedo tener mi lista de votos. Eso parece estar bien, para el lado de la API.
Listemos el voto ahora. Entonces, estoy obteniendo la actualización del voto desde useFetch. Voy a usar useFetch porque cuando haces el renderizado en el lado del servidor y quieres obtener los data de una página, useFetch lo hará durante el lado del servidor, almacenará los data en el payload, por lo que durante la hidratación, no realizamos ninguna llamada a la API, sino que lo obtenemos directamente de el payload inyectado en el HTML, ahorrando una solicitud HTTP. Entonces, aquí, vamos a mostrar nuestro voto. Sí. Eso hará el trabajo. Prefiero los emojis, sin embargo. Emoji. De acuerdo. Tengo mis votos.
Ahora lo que quiero hacer es votar. Lo hicimos con las DevTools. No necesito usar fetch porque es una acción que se realiza en el lado del cliente. Puedo llamar a vote. Es una solicitud post y el cuerpo. No necesito JSON stringify porque dollar fetch lo hará por mí. Una vez hecho, simplemente actualizaré. Haré la llamada a la API nuevamente. Actualizaré este valor reactivo. Y ahora es reactivo. Lo que quiero antes de publicar mi demo es tener el total de votos. De lo contrario, es bastante inútil. Primero tendré la elección del usuario. Digamos que funciona.
10. Mostrando ID de usuario y Configuración de la Base de Datos
Se muestra el ID de usuario, el total y la elección del usuario. Se utiliza PG para una mejor experiencia de usuario. En el montaje, se simula una conexión de socket. La cuenta de GitHub está vinculada a Cloudflare para el despliegue. Se crea y vincula una base de datos D1. Se utiliza la consola para las migraciones.
ID de usuario. Const total. Total T. Vamos a mostrarlos aquí. Total café. Total té.
De acuerdo. Y por último, porque soy exigente, me gustaría tener PG para brindar una buena experiencia de usuario. Así sabes lo que has seleccionado sin mirar la actividad.
¿Funciona eso? Clase. Elección del usuario. Elección del usuario. Sí. Un minuto. Digamos que está bien para esto. En el montaje. Vamos a fingir que tenemos una conexión de socket, pero no así. Set interval. Normalmente deberías mantener el intervalo. Límpialo cuando desmontes. Pero digamos que no tengo tiempo ahora mismo. Empuja el tiempo. Entonces, en Cloudflare. Vinculé esta cuenta de GitHub que acabo de empujar ahora mismo. Se va a desplegar. En mis ajustes, creé una base de datos D1. Que vinculé aquí. Ahora mismo no tengo ninguna tabla. Entonces, lo que puedo hacer es usar la consola. Ir a mi migración.
11. Cloudflare KV Demo and Voting
Tengo mi tabla de votos. Volviendo al despliegue. Puedo mostrarte otra demostración usando Cloudflare KV. El código es de código abierto. Puedes editar esta página y se guardará automáticamente en Cloudflare KV. Si quieres intentar votar, puedes ir a View-London.pages.dev. También intentaré votar. Veamos si algunas personas tienen tiempo para votar. Podemos tener los votos de ustedes en nuestra base de datos. Muchas gracias.
Toma esta primera declaración. Más adelante pensaré en una forma de automatizar esto. Pero hasta ahora, esa es la única forma. Migración u obtener cualquier forma. Así que no es tan malo hacerlo manualmente.
Entonces, tengo mi tabla de votos. Volviendo al despliegue. Potencialmente puedo mantener eso durante el Q&A. No sé sobre el tiempo.
Lo que puedo hacer es mostrarte otra demostración que he hecho usando Cloudflare KV. El código también es de código abierto. Puedes editar esta página. Se guardará automáticamente en Cloudflare KV. Y si actualizas, automáticamente tendrás los data. Y también diviértete generando esta imagen. Si cambias el título. Usando nuestros data, tenemos otra demostración usando tareas pendientes. Carga completa. Actualiza. Si quieres intentar votar, puedes ir a View-London.pages.dev.
También intentaré votar. Estoy en Londres, así que diré T. Veamos si algunas personas tienen tiempo para votar. Sí, está funcionando. Podemos tener en nuestra database los votos de ustedes. Así que muchas gracias. Tienen respaldo, Cloudflare tiene respaldo y más. Pero hasta ahora la demostración está aquí. Es de código abierto. También tengo otras demostraciones que vincularé en el archivo leeme.
12. Roadmap to Full Stack Nuxt 3
Se está trabajando en la hoja de ruta para un Nuxt 3 de pila completa, con un enfoque en una experiencia de edge-first y compatibilidad con cualquier entorno. El objetivo es eliminar la necesidad de gestión manual y proporcionar una experiencia de pila completa sin problemas. El objetivo es tener algo prometedor para finales de año.
Y muchas gracias. Eso fue impresionante. Wow, oh Dios mío. Pensé que me iba a gustar, pero lo llevaste a otro nivel. También llegaron muchas preguntas interesantes. Pero la primera es sobre Nuxt, trabajas en Nuxt. ¿Cómo se ve la hoja de ruta para un Nuxt 3 de pila completa? ¿Qué tan cerca está actualmente? ¿Es algo en lo que estás invirtiendo mucho tiempo? Veo esa sonrisa. Bueno, he estado experimentando durante meses. Quiero encontrar una forma en la que la experiencia de pila completa sea edge-first. Así que no tendrás que gestionar nada. Como cuando generas estáticamente, no tienes que preocuparte. Quiero algo que pueda funcionar en cualquier entorno. Y tengo que pensar en la experiencia de pila completa incluso si estás generando estáticamente tus aplicaciones. Pero diría que, para finales de año, podríamos tener algo prometedor.
13. Desarrolladores y Copilot
Los desarrolladores son buenos, y sus herramientas los hacen aún mejores. Copilot fue impresionante y útil. Ahorra tiempo y no te reemplaza. Demuéstralo un par de veces, entrena en lo que quieras.
Genial. Una cosa que también encontré, al menos para mí personalmente como desarrollador, es que los desarrolladores son buenos, y sus herramientas los hacen aún mejores. La forma en que estabas usando Copilot también fue impresionante. Solo la forma en que te estaba ayudando. ¿Eres un gran fan de Copilot? Esta es otra pregunta que surgió. Es bastante útil, tengo que decirlo. Tal vez porque repetí la demostración cinco veces. Captó parte de lo que estaba tratando de hacer, pero te ahorra tiempo. No te reemplaza, pero te ahorra tiempo, así que me gusta. Eso es algo inteligente, en realidad. Haz la demostración un par de veces, entrena un poco en lo que quieres y luego... No, no, fue la primera vez. Genial, genial.
QnA
Next Server Actions and Vision
¿Hay planes para Next Server Actions? Creé un RFC sobre Next en 2019 sobre funciones del servidor. Veo la ventaja de los componentes del servidor y la obtención de datos en las partes del componente. Tendría que probar y ver la mejor experiencia de desarrollo antes de lanzar. Es difícil responder cómo ha cambiado mi visión de Next. Intento obtener la experiencia del usuario y usarla yo mismo. Estoy contento con el camino que hemos tomado y cometiendo los errores correctos. El proceso de integración de SSO fue impresionante. Pensar en Nuxt y las herramientas que los desarrolladores integran con SSO fue importante.
Tenemos otra pregunta que llega. ¿Hay planes para algo como Next Server Actions? En realidad, creé un RFC sobre Next, creo que fue en 2019, sobre funciones del servidor. Todavía estoy indeciso. Veo la ventaja de los componentes del servidor. Tenemos obtención de datos en las partes del componente. Tiene que ser cuidadosamente elaborado. Hasta ahora, puedes crear rutas de API en Next, incluso cuando haces renderizado del lado del servidor, llamamos directamente a esa función en lugar de hacer una solicitud de API. Tendría que probar y ver cuál es la mejor experiencia de desarrollo antes de lanzar cosas como esta. Bueno, bueno. Y pensando en el pasado, porque has estado trabajando en Next durante un tiempo, así que pensando en cuando comenzaste y tu visión de Next, ¿cómo ha cambiado desde que comenzaste a trabajar en ello? Es difícil responder, sinceramente. Obviamente, cuando... Cuando estás dentro del marco y estás respondiendo a los problemas, es una mentalidad diferente a cuando realmente lo estás usando... Así que estoy tratando de hacer ambas cosas. Obtener la experiencia del usuario, porque pueden tener muy buenas ideas para llevarte por nuevos caminos. Y usarlo también es importante, porque si te importa la experiencia del desarrollador, también tienes que probar cuál es la experiencia actual del desarrollador. Si pudieras volver a ti mismo cuando escribiste tu primera línea de código para Nuxt y darle a esa versión de ti mismo un consejo para el camino por delante, ¿qué habría sido sobre el progreso y la forma en que Nuxt ha cambiado? Creo que no diría nada. Gran pregunta. Lo siento, también lo lancé ahí. Estoy muy contento con el camino que hemos recorrido. Siempre refactorizamos el código en algún momento. Creo que cometimos los errores correctos para corregirlos más tarde. Eso es increíble. Cometer los errores correctos también. Y una cosa que me impresionó mucho es SSO en 3 minutos también. Eso fue impresionante. Un gran reconocimiento para ti también. Y todo ese proceso de no solo construir. A menudo, cuando la gente hace demostraciones, construyen algo pequeño que no es algo que realmente vaya a funcionar en producción a gran escala. Pero eso fue así. ¿Cuál fue ese proceso en términos de no solo integrarlo, sino toda la experiencia de pensar en Nuxt y pensar en todas las herramientas que los desarrolladores van a integrar con SSO?
Developer Experience and SSO Integration
¿Cómo abordaste el tema de la experiencia del desarrollador y cómo la mejoraste? Integrar SSO con GitHub se ha vuelto fácil, pero aún no hay una solución oficial en Nuxt 3. El ponente planea hacer la integración y proporcionar utilidades para crear rutas de API personalizadas. Las pruebas, el desarrollo de aplicaciones y la refactorización son cruciales para una buena experiencia del desarrollador. Gracias por su tiempo y aplausos para Sebastian.
Estoy improvisando un poco en esta pregunta aquí. Pero, ¿cómo abordaste el tema de la experiencia del desarrollador y cómo la mejoraste? No estoy seguro de haber entendido la pregunta. Mi pregunta era que hiciste que fuera muy, muy fácil integrar SSO con GitHub. Y luego vimos cómo lo hiciste. ¿Es eso algo que ha sido intencional y por diseño y algo que pretendes tener en Nuxt y todas las herramientas que admiten Nuxt también?
Bueno, no es tan difícil de integrar de cierta manera. Pero aún no tenemos una solución oficial en Nuxt 3 hasta ahora. Y por eso estoy planeando hacer la integración yo mismo, porque puede ser una pesadilla tener un sistema HOT básico. Así que primero quiero proporcionar las utilidades. Para que puedas tener la libertad de crear tus propias rutas de API como desees, pero seguir utilizando las utilidades que te ahorran tiempo. Es un proceso largo. Y creo que por eso todavía no tenemos una solución HOT oficial. Las pruebas, la creación de una aplicación y la refactorización creo que son clave para una buena experiencia del desarrollador.
Increíble. Muchas gracias por tu tiempo. Realmente te apreciamos. Aparentemente, una de las preguntas en este momento es quién rompió la aplicación. Así que creo que vas a agarrar tu computadora y ver si puedes arreglarlo. Pero todos den un gran aplauso a Sebastian. Muchas gracias.