Nuxt en el Edge

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

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.

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.

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.

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.

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.

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.

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?

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.