Aprende cómo construir una aplicación Vue implementada en el edge para brindar una experiencia ultrarrápida a tus usuarios finales.
This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.
FAQ
Nuxt es un marco web utilizado para crear aplicaciones de vista de pila completa. Ofrece funcionalidades como el renderizado del lado del servidor, del lado del cliente, generación de sitios estáticos y renderizado en el edge, entre otros.
Nuxt Labs ofrece servicios de consultoría y auditorías, y es ideal para migraciones de Nuxt 2 a Nuxt 3. Además, desarrollan herramientas como Volta para la gestión de proyectos sobre GitHub.
El renderizado en el edge se refiere a la ejecución de aplicaciones en nodos CDN cerca del usuario final, lo que reduce la latencia y mejora el rendimiento. Este enfoque fue popularizado por los trabajadores de Cloudflare y permite replicar el código en la red de forma eficiente y económica.
Nuxt incluye características como sistema de hooks, auto-importación, middleware, gestión del estado, TypeScript, y componentes isla experimentales, entre otros.
Volta es una herramienta de gestión de proyectos construida sobre GitHub, diseñada para ayudar en el desarrollo de Nuxt 3 y su estabilización como una versión madura y estable.
El renderizado en el edge ofrece ventajas como baja latencia, no requiere mantenimiento de servidores, se escala automáticamente y es más económico, costando aproximadamente 50 centavos por millón de solicitudes con un nivel gratuito disponible.
El renderizado en el edge presenta desafíos como limitaciones en el tamaño total del código y diferencias en el entorno de ejecución comparado con Node y el navegador, usando principalmente el motor V8 para el análisis del código JavaScript.
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.
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
Short description:
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.
solo uno. Hoy en día, tenemos dnodeploy.legon.app, que también es de código abierto. Recomiendo encarecidamente que revises Vercel Edge function basado en Cloudflare, Netlify Edge function, Edge.io, StackPath y muchos más que están por venir. Pero tiene limitaciones. Es diferente a Node y al navegador. Mayormente utiliza el motor V8 para analizar tu código JavaScript. Hace unos seis años, no podías usar Window en Node. Y no puedes usar el sistema de archivos en el navegador. Cuando trabajabas en complementos, era una experiencia difícil. Pero hoy en día, las personas están más acostumbradas a crear complementos JavaScript universales. Es similar para el Runtime de Edge. Tienes
3. Base de datos y Demo en Vivo
Short description:
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.
más limitación, pero tienes más ventaja. Es un compromiso. Y en este momento, el tamaño total está limitado a 5 megabytes. Pero gracias a Nitro y Next, simulamos y rellenamos y la mayoría 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 dije, alrededor de 3 megabytes para el total del proveedor. También vemos que lasdatabase están llegando a Edge basadas principalmente en réplicas y proxy HTTP. Escalamos desdeCloudflare D1 y el más reciente, Torso. Postgre con Neon. Versel en Neon, Superbase, aunque ofrecen más que solo Postgre. MySQL con escala de plan, HyperDB para enfoque híbrido, KV con redis y almacenamiento deCloudflare. Voy adeep dive porque no tenemos mucho tiempo. Estoy tratando de hacer una demostración en vivo para ustedes. No es tan impresionante como hacer Next en vivo. Estoy celoso de Daniel. Lo que he hecho es tener un proyecto simple de Next 3. ¿Todos pueden ver la pantalla o debo hacer zoom? De acuerdo. Y tengo una capa de espacio Next, que básicamente es un paquete deNPM. Y es una aplicación simple de Next. Entonces, agregué algunas utilidades como 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. Ejecutamos el servidor. Lo que hará es crear automáticamente una tabla. Una configuración de Drizzle. Que me dice que puedo generar SQLite de Drizzle Kit a partir de una migración. Y veamos cómo se ve. Entonces, lo que quiero hacer es, tengo mi página. No es fácil codificar en vivo en eso.
4. Creación de Demo y Tabla de Votos
Short description:
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.
Entonces, café o té. No sé si realmente prefieres té o café. Vamos a hacer una pequeña demostración con esto. El CSS es aburrido. Lo siento. Pero yo votaría por café. Café. Eso no es café. Pero eso funcionaría. Y aquí tendremos té. Dos botones. Hagámoslo así. Normalmente programo más rápido. No te preocupes. Y hagamos que nuestro botón sea un poco más bonito. Borde P4. Si crees que puede ser mejor, no dudes en decirlo. Pero para poder votar, necesitaré que las personas inicien sesión. Porque no quiero que cualquiera vote fácilmente. Entonces lo que voy a hacer primero es tener mi función de voto con un agradecimiento. Mi elección. Esto es Copilot, por cierto. De lo contrario, no sé cómo programar. Voy a crear mi tabla de votos. Entonces, para hacer esto, estoy exportando la tabla de votos. Vamos a llamarla votos. Tiene un ID que es un número entero. Necesito darle el nombre de la columna que es similar. Y clave primaria. Luego lo que quiero tener es el usuario
5. Creación de Tabla de Votos y Ruta de API
Short description:
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.
ID. También es un número entero. No, número entero. ID de usuario. Y no puede ser nulo. A continuación, necesitaré el nombre de usuario. Tampoco puede ser nulo. Y la elección final, que también es un texto. No puede ser nulo. Una cosa que quiero precisar en mi tabla es que solo puedo votar una vez. Para esto, voy a crear un índice. Así que estoy obteniendo esta tabla de votos aquí. Y puedo devolver mis índices. Entonces, el índice de ID de usuario. Debería tener este índice único aquí. Es un poco aburrido. Lo siento por esto. Pero estamos cerca. Y en votes.user ID. Eso está bien. Así que vamos a crear una ruta de API. Si usas esta extensión nexter, puedes crear una nueva ruta de API directamente. Llamémosla vote.get. Al agregar el sufijo .get, solo limito a las solicitudes GET. Así que debería poder devolver useDB. Y tengo acceso a select. Entonces, next space layer administrará automáticamente este objeto de tabla. Y puedo ver mi tabla de votos, que está tipada. Ordenaré por tables.vote.ID porque quiero el último primero y devolveré todo. Tendré que importar esto. Encontraré una forma de importarlo, pero no ahora mismo. Como dije, soy perezoso. Así que voy a usar el Next
6. Creación de solicitud POST y realización de llamada a la API
Short description:
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.
Herramientas de desarrollo. Tenemos una pestaña de ruta, no sé si has visto varias. Entonces, si hago clic aquí, es similar a Postman y puedo llamar directamente a mi API. Dice que no se encontraron data. Entonces, lo que necesito hacer es ejecutar esta consulta cada vez que cambio la tabla de la base de datos del servidor. Entonces, creaste la migración, estamos iniciando mi servidor y puedo obtener los votos. Genial. Pero aún necesito poder votar. Así que voy a crear una solicitud POST. Hagámoslo asíncrono. Primero, obtengo el cuerpo. Espera. Leer cuerpo. Obtengamos la elección. Así. Cuerpo o vacío. Y hagamos algunas verificaciones porque no sé si todos jugarán el juego haciendo clic o haciendo solicitudes a la API. Sí. Te vi. Entonces, si no lo incluye. Devolver. En Nitro, tenemos este H3. H3 es el servidor HTTP. Tenemos debajo del capó. Que es extremadamente rápido. Y tenemos todo lo que se importa automáticamente. Gracias a TypeScript, podemos tenerlo todo. Mala elección. Elige entre café o té.
7. Adding Authentication and User Session
Short description:
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.
Entonces, hagamos nuestra solicitud POST ahora. Cuerpo. Envíalo. Elección. Té. De acuerdo. Funciona. Lo que queremos tener ahora es autenticación. Entonces, para agregar autenticación, voy a crear una solicitud out.get. Punto final. Y para esto, diré usuario, igual a esperar. 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 archivo .auth. Y luego, puedo devolver mi usuario de GitHub. Usuario de GitHub así. Volviendo a Vue. La parte más interesante. Puedo decir usar la sesión del usuario. Dentro, tendré un usuario conectado y borrar. Borrar es un método para cerrar sesión de los usuarios. Lo que puedo hacer es aquí. Muy bien. Ahora. Ahora, vamos. Entonces, si estoy conectado, diré bienvenido usuario.inicio de sesión. Porque es un objeto de GitHub. Y tendré un botón que dice cerrar. Hagámoslo subrayado. Para cerrar sesión del usuario. De lo contrario, llamemos a la API slash out. Iniciar sesión con GitHub en out.
8. Handling API Out and Saving Votes
Short description:
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
Short description:
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
Short description:
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
Short description:
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
Short description:
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
Short description:
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
Short description:
¿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
Short description:
¿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.
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía). En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también. Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso. (Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.
Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.
Tabla de contenidos: - Introducción a Vue3 - API de Composición - Bibliotecas principales - Ecosistema Vue3
Requisitos previos: IDE de elección (Inellij o VSC) instalado Nodejs + NPM
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal. QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala. En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend. Nivel de la masterclass: Intermedio
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
React Summit 2023
Comments