Nuxt on the Edge

Hola a todos. Estoy muy contento de estar aquí. No tendré mucho tiempo, así que me sumergiré directamente. 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 en Nuxt Labs, y hacemos cosas como consultoría y auditorías. También es bueno si deseas 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á usando Nuxt y Nuxt Content con Live Edition.

Nuxt es un framework web para crear aplicaciones de vista full stack. Entonces, la pregunta que le hiciste a Daniel sobre la experiencia full stack está definitivamente en nuestra hoja de ruta, pero tuvimos que estabilizar el framework, hacerlo un buen framework para el desarrollo front-end antes de sumergirnos en la experiencia full stack. 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 de sitios en el edge, sistema de hooks, enrutador del sistema de archivos auto-importación, si eres perezoso como yo. Obtención de datos, middleware, plugins, layouts, transiciones, API del servidor, TypeScript, gestión de estado. Tenemos una gestión de estado por defecto, pero obviamente, puedes usar PNU de UX. Tenemos el componente island que es experimental pero muy prometedor respecto a los componentes del servidor. El sistema de capas, no sé si algunos de ustedes han usado capas internamente. Pocas personas, básicamente es una aplicación Nuxt que puedes subir a 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 desplegado en el Edge? Uno, dos, bien. Cinco personas de 10 personas. Es un entorno limitado y se ejecuta en nodos CDN. Ha sido impulsado por Cloudflare workers hace unos años y, básicamente, cuando despliegas 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 barato de alojar. Se ejecuta en milisegundos desde tu usuario final dondequiera que estén en el mundo. Tienes cero milisegundos de inicio de llamada, ningún servidor que mantener, se escala automáticamente, y es asequible en comparación con, no es una estafa, pero el Lambda sin servidor 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 por mes. Pero Cloudflare worker no es el único. Hoy, tenemos dnodeploy.legon.app, que también es de código abierto.

Te recomiendo encarecidamente que revises Vercel Edge function basado en Cloudflare, Netlify Edge function, Edge.io, StackPath y muchos más están por venir. Pero tiene limitaciones. Es diferente de Node y el navegador. Principalmente utiliza el motor V8 para analizar tu código JavaScript. Hace seis años no podías usar Window en Node. Y no puedes usar el sistema de archivos en el navegador. Cuando trabajabas en plugins, era una experiencia difícil. Pero hoy, la gente está más acostumbrada a crear plugins universales de JavaScript. Es similar para el Edge Runtime. Tienes más limitaciones, pero tienes más ventajas. Es un compromiso.

Y ahora mismo, el tamaño total está limitado a 5 megabytes. Pero gracias a Nitro y Next, simulamos y rellenamos y la mayor parte del entorno de Node y del navegador que podemos hacer para producción con AMP, parte de la comunidad NGS. Y producimos una salida optimizada, como digo, de unos 3 megabytes para el proveedor total.

También vemos bases de datos llegando al Edge basadas principalmente en réplicas y proxy HTTP. Escalar desde Cloudflare D1 y el reciente, Torso. Postgre con Neon. Versel en Neon, Superbase, aunque ofrecen más que solo Postgre. MySQL con plan scale, HyperDB para un enfoque híbrido, KV con redis y almacenamiento de Cloudflare.

Voy a profundizar porque no tenemos mucho tiempo. Estoy tratando de hacer una demostración en vivo para ti. No es tan impresionante como hacer Next en vivo. Estoy celoso de Daniel. Lo que he hecho es que tengo un proyecto simple de Next 3. ¿Todos pueden ver la pantalla o debo hacer zoom? Bien. Y tengo una capa de espacio Next, que es básicamente un paquete NPM. Y es una aplicación simple de Next. Así que, añadí algunas utilidades como la sesión de usuario. Y algunas utilidades del servidor que puedo usar en mis rutas. Y me proporciona una base de datos SQLite en desarrollo. Y puedo usar Drizzle para especificar tablas.

Así que, vamos a habilitarlo. Ejecutar el servidor. Lo que hará, creará automáticamente una tabla. Una configuración de Drizzle. Diciéndome que puedo generar Drizzle Kit SQLite a partir de una migración. Y veamos cómo se ve. Así que, lo que quiero hacer es, tengo mi página. No es fácil codificar en vivo en eso. Así que, café o té. No sé si realmente prefieres té o café.

Hagamos una pequeña demostración con esto. CSS es aburrido. Lo siento. Pero habría votado café. Café. Eso no es café. Pero eso funcionaría. Y tendremos té aquí. Dos botones. Hagámoslo así. Normalmente codifico más rápido. No te preocupes. Y hagamos nuestro botón un poco más bonito. P4 borde. Si crees que puede ser más bonito, no dudes en gritar.

Pero para votar, necesitaré que la gente inicie sesión. Porque no quiero que cualquiera vote fácilmente. Así que lo que voy a hacer es primero tener mi función de voto con gracias. Mi elección. Esto es Copilot, por cierto. De lo contrario, no sé cómo codificar. Voy a crear mi tabla de votos. Así que para hacer esto, estoy exportando la tabla de votos. Vamos a llamarla votos. Tiene un ID que es un entero. Necesito dar el nombre de la columna que es similar. Y clave primaria. Luego lo que quiero tener es el ID de usuario. También es un entero. No, entero.

ID del usuario. Y no es nulo. Luego necesitaré el nombre del usuario. Tampoco es nulo. Y la elección final que también es un texto. No es nulo.

Una cosa que quiero precisar en mi tabla es que solo puedo votar una vez. Así que para esto voy a crear un índice. Así que estoy obteniendo esta tabla de votos aquí. Y puedo devolver mis índices. Entonces, índice de ID de usuario. Debería tener este índice único aquí. Es un poco aburrido. Lo siento por esto. Pero estamos acercándonos. Y en votes.user ID. Eso es bueno.

Así que vamos a crear una ruta de API. Si usas esta extensión de Nexter, puedes crear una nueva ruta de API directamente. Vamos a llamarla vote.get. Al agregar este sufijo .get, solo estoy limitando a la solicitud get. Así que debería poder devolver use DB. Y tengo acceso a select. Así que la capa de espacio Next administrará automáticamente este objeto de tabla. Y puedo ver mi tabla de votos, que está tipada. Ordenaré por este tables.vote.ID porque quiero el último primero y devolver todo. Necesitaré importar esto. Encontraré una manera de importar esto, pero no ahora mismo. Como dije, soy perezoso. Así que voy a usar las Next Dev Tools.

Tenemos una, no sé si has visto varias pestañas de ruta. Así que si hago clic aquí, es similar a Postman, y puedo llamar directamente a mi API. Así que dice que no se encontraron datos. Así que lo que necesito hacer es cada vez que cambio la tabla del servidor DB, necesito ejecutar esta consulta.

Así que tú creaste la migración, estamos iniciando mi servidor, y puedo obtener los votos. Genial. Pero todavía necesito poder votar. Así que voy a crear una solicitud post. Hagámosla asíncrona. Estoy obteniendo el cuerpo al principio. Espera. Leer cuerpo. Vamos a obtener la elección. Así. Cuerpo o vacío. Y hagamos alguna verificación porque no sé aquí si todos jugarán el juego haciendo clic o haciendo solicitudes API. Sí. Te vi. Así que, si no incluye. Retorno.

Así que, en Nitro, tenemos este H3. H3 es el servidor HTTP. Lo tenemos bajo el capó. Que es extremadamente rápido. Y tenemos todo lo que se auto importa. Gracias a TypeScript, podemos tener todo. Mala elección. Elige entre café o té. Así que, hagamos nuestra solicitud post ahora. Cuerpo.

Envíalo. Elección. Té. Bien. Funciona.

Lo que queremos tener ahora es autenticación. Así que, para agregar autenticación, voy a crear una solicitud out.get. Endpoint. Y para esto, diré usuario, igual a await. Es un método mágico. Para que funcione, esto proviene de la capa. Simplemente necesito crear una aplicación y agregar esta variable de entorno en mi dot auth. Y luego, puedo enviar de vuelta mi usuario de GitHub. Usuario de GitHub así.

Volviendo a Vue. La parte más interesante. Puedo decir usar sesión de usuario. Dentro, tendré un usuario conectado y claro. Claro es un método para cerrar sesión de los usuarios. Lo que puedo hacer es aquí. Muy bien. Ahora. Ahora, vamos. Así que, si estoy conectado, diré bienvenido usuario punto login. Porque es un objeto de GitHub. Y tendré un botón que es claro. Hagámoslo subrayado. Para cerrar sesión del usuario. De lo contrario, llamemos a API slash out. Iniciar sesión con GitHub para salir.

Algo de CSS. Bien. 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.

Entonces, es perturbador. 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 llego a 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 devolver, enviar, redirigir a la página de inicio. Obviamente, si actualizo. No me importa. Intentemos de nuevo en esto. Iniciar sesión. Entonces tengo mi usuario. Si miro mi aplicación, el valor de la cookie está realmente guardado y creado, y es por eso que tenemos esta variable de entorno para desellarlo en el lado del servidor, pero en realidad tiene todo lo que establecí dentro de este objeto.

Así que, 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 realmente guardar el voto en mi base de datos. Así que, const vote useDB.insert tableVote.value. Así que, obtengo user ID que es mi session.user.id. Así que, user ID, user name, session.user.login, y la elección. Quiero que devuelva el objeto al insertar la fila y devolvérmelo. Y luego puedo enviar de vuelta el voto. Veamos cómo se ve. Café. Bien. Si intento guardarlo de nuevo, obtengo este error de restricción única porque no puede guardar este índice único.

Necesito usar esto onConflict para actualizar. Así que, el objetivo es realmente el ID de usuario. Y quiero establecer la elección. Intentemos 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. Así que, estoy obteniendo la actualización del voto desde useFetch. Voy a usar useFetch porque cuando haces renderización del lado del servidor y quieres obtener los datos de una página, useFetch lo hará durante el lado del servidor, almacenará los datos en la carga útil, así que durante la hidratación, no hacemos ninguna llamada a la API sino que lo obtenemos directamente de la carga útil inyectada en el HTML, ahorrando una solicitud HTTP. Así que aquí, mostremos nuestro voto. Sí. Eso hará el trabajo. Aunque prefiero emoji. Emoji. Bien. Tengo mis votos.

Así que 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 de nuevo. 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.

User ID. Const total. Total T. Vamos a mostrarlos aquí. Total café. Total té.

Bien. Y por último, porque soy exigente, me gustaría tener PG para ofrecer 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 por ahora. Al montar. Vamos a simular que tenemos una conexión de socket, pero no así. Establecer intervalo. Normalmente deberías mantener el intervalo. Limpiarlo cuando desmontes. Pero digamos que no tengo tiempo ahora mismo. Tiempo de empuje. Entonces, en Cloudflare. Vinculé esta cuenta de GitHub que acabo de empujar ahora mismo. Se va a desplegar. En mis configuraciones, creé una base de datos D1. Que vinculé aquí. No tengo ninguna tabla ahora mismo. Así que, lo que puedo hacer es usar la consola. Ir a mi migración.

Toma esta primera declaración. Más tarde pensaré en una forma de automatizar esto. Pero hasta ahora, esa es la única manera. Migración u obtener de cualquier manera. Así que no está tan mal hacerlo manualmente.

Así que, 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 otro demo que he hecho usando Cloudflare KV. El código es open source también. Puedes editar esta página. Se guardará automáticamente en Cloudflare KV. Y si actualizas, automáticamente tendrá los datos. Y también es divertido generar esta imagen. Si cambias el título. Usando nuestros datos, tenemos otro demo usando to-dos. Carga completa. Actualizar. Si quieres intentar votar, puedes ir a View-London.pages.dev.

Yo 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 base de datos los votos de ustedes. Así que muchas gracias. Tienen respaldo, Cloudflare tiene respaldo y más. Pero hasta ahora el demo está aquí. Es open source. También tengo otros demos que enlazaré en el read me.

Y muchas gracias. Eso fue impresionante. Wow, oh Dios mío. Pensé que podría gustarme, pero lo llevaste a otro nivel. También están llegando muchas preguntas interesantes. Pero la primera es sobre Nuxt, trabajas en Nuxt. ¿Cómo se ve la hoja de ruta hacia un Nuxt 3 full stack? ¿Qué tan cerca está actualmente? ¿Es algo en lo que estás dedicando mucho tiempo? Veo esa sonrisa. Bueno, he estado experimentando durante meses. Quiero encontrar una manera de que la experiencia full stack sea edge-first. Así 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 full stack incluso si estás generando tus aplicaciones estáticamente. Pero diría que, a finales de año, podríamos tener algo prometedor.

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 fue tan impresionante también. Solo la forma en que te estaba ayudando. ¿Eres un gran fan de Copilot? Esta es otra pregunta que llegó. Es bastante útil, tengo que decir. Tal vez porque repetí la demo cinco veces. Captó algo 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, de hecho. Haz la demo un par de veces, entrena un poco en lo que quieras, y luego... No, no, fue la primera vez. Genial, genial.

Tenemos otra pregunta que llega. ¿Algún plan para algo como Next Server Actions? De hecho, creé un RFC en Next, creo que fue en 2019, sobre funciones de servidor. Todavía estoy en medio. Veo la ventaja de los componentes de 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, aunque cuando haces renderizado del lado del servidor, llamamos directamente a esa función en lugar de hacer una solicitud de API. Tendría que experimentar y ver cuál es la mejor experiencia de desarrollador, antes de lanzar cosas como esta.

Genial, genial. Y piensa hacia atrás, porque has estado trabajando en Next por un tiempo ahora, así que pensando hacia atrás en el momento en que comenzaste y tu visión para Next, ¿cómo ha cambiado desde que comenzaste a trabajar en ello? Es difícil de responder, honestamente. Obviamente, cuando tú... Cuando estás dentro del framework y estás respondiendo a los problemas, es otra mentalidad que 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 de darte algunos 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, ¿cuál 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 la lancé allí. Estoy muy contento con el camino que hemos hecho. Siempre refactorizamos el código en algún momento. Creo que cometimos el error correcto para corregirlos más tarde. Eso es increíble. Cometiendo los errores correctos también. Y una cosa que me impresionó mucho es SSO en 3 minutos también. Eso fue increíble. Un gran saludo para ti también. Y todo ese proceso de no solo ir a construir. Como muchas veces cuando las personas hacen demos, construyes una pequeña cosa que no es algo que realmente va a funcionar en producción a escala. Pero fue así. ¿Cuál fue ese proceso en términos de especialmente 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.

Estoy improvisando un poco con esta pregunta aquí. Pero, ¿cómo pensaste en esa experiencia del desarrollador y 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 te vimos hacer eso. ¿Y es eso algo que ha sido intencional y por diseño y algo que planeas tener en Nuxt y todas las herramientas que también soportan Nuxt?

Bueno, no es tan difícil de alguna manera integrarlo. Pero todavía no tenemos una solución oficial en Nuxt 3 hasta ahora. Y es por eso que planeo hacer la integración yo mismo, porque puede ser una pesadilla tener un sistema HOT básico. Así que primero quiero dar las utilidades. Para que puedas tener la libertad de crear tus propias rutas API como quieras, pero seguir usando 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, hacer una aplicación y la refactorización creo que son la clave para una buena experiencia del desarrollador.

Genial. Muchas gracias por tu tiempo. Realmente te apreciamos. Aparentemente, una de las preguntas ahora mismo es quién rompió la aplicación. Así que creo que vas a agarrar tu computadora y ver si puedes arreglarla. Pero todos den un gran aplauso más para Sebastian.