Optimizando la experiencia del desarrollador con Nuxt 3: un recorrido por las formas en que la nueva versión de Nuxt ahorrará tiempo y facilitará tu vida. Exploraremos el nuevo isomorphic fetch con nitro, nos sumergiremos en el enrutamiento dinámico más potente de Nuxt 3 y, en el camino, conoceremos una serie de otras características que te darán superpoderes.
Optimizando la experiencia del desarrollador con Nuxt 3
Video Summary and Transcription
Esta charla discute la optimización de la experiencia del desarrollador con Nuxt 3. Destaca las mejoras en la documentación, la importación automática de bibliotecas, la experiencia del desarrollador en el servidor y la implementación. Nuxt 3 introduce una solución unificada para el esquema, la documentación y los valores predeterminados, así como importaciones automáticas para facilitar el acceso a los componentes. También presenta un framework de servidor más rápido llamado H3 y permite realizar solicitudes de red eficientes con isomorphic fetch. La implementación se simplifica con un único punto de entrada y soporte para diversas plataformas. El objetivo es hacer que Nuxt 3 sea increíble y retroportar características a las aplicaciones de Nuxt 2.
1. Introducción a la Experiencia del Desarrollador con Nuxt 3
Hola, soy Daniel Rowe y hablaré sobre la optimización de la experiencia del desarrollador con Nuxt 3. La experiencia del desarrollador es un tema cercano a mi corazón. Cuanto más creamos oportunidades para la creatividad y reducimos las limitaciones, mejor experiencia del desarrollador vemos. Nuxt es un framework de vistas, un framework de JavaScript, adecuado para alguien sin conocimiento de él.
Hola, soy Daniel Rowe y hablaré sobre la optimización de la experiencia del desarrollador con Nuxt 3. La experiencia del desarrollador es un tema cercano a mi corazón y creo que eso es probablemente cierto para la mayoría de nosotros aquí hoy. ¿No es cierto? Las herramientas que usamos tienen la capacidad de hacer nuestra vida dolorosa o hacerla mágica.
En este momento estoy hablando en mi papel como miembro del equipo de framework de Nuxt en sí, lo que significa que tengo la oportunidad de mantener y trabajar en el framework junto con una gran comunidad de personas que contribuyen y hacen posible Nuxt. En mi rol anterior, sin embargo, fui CTO de una startup tecnológica. Nuestro producto principal se construyó en Nuxt, por lo que realmente he experimentado Nuxt desde ambos ángulos, tanto como usuario frustrado por los problemas y tratando de resolverlos, como también contribuyendo y solucionando problemas, que fue mi primera forma de contribuir a la comunidad de Nuxt. Pero, por supuesto, ahora también tengo la perspectiva de trabajar en el equipo de Nuxt y realmente voy a estar pensando en la experiencia del desarrollador desde ambas perspectivas hoy.
Esto es donde estoy ubicado. Estoy en el noreste del Reino Unido, ya hace frío y fresco, definitivamente es otoño y aquí es donde me siento la mayoría de los días. Miro mi escritorio y veo a mi gato, uno de mis gatos, tengo tres, pero esa es Lily en la foto, y tengo una taza de café si es por la mañana o una taza de té si es por la tarde, y aquí es donde me gusta estar. Me gusta sentarme y programar o charlar, resolver problemas e intentar mejorar las cosas. Aquí es donde me siento más en la zona. Así que tengo una pregunta para ti, ¿cuándo te has sentido más productivo, más en la zona, en ese estado de flujo del que a veces hablamos como desarrolladores? Tómate un momento, llámalo una pausa, y ve si puedes congelar ese momento en tu cabeza. Puede haber sido que te enfrentabas a un problema. Tenías una gran idea que estabas implementando. Habías estado buscando un error durante mucho tiempo y finalmente lo encontraste. Tal vez hayas publicado una biblioteca y estés viendo cómo llegan las estrellas de GitHub, o hayas visto tu primer PR fusionado. Sea cual sea la razón, parece que estás en la cima del mundo. Así que cuanto más he pensado en mis propios momentos de estar en la zona o hablar con otros que han tenido la misma experiencia, creo que hay muchas cosas que influyen en ellos y es un tema enormemente complejo. Obviamente queremos replicarlo. Es adictivo. Es un momento maravilloso en el tiempo y depende de muchas cosas. Desde tu propio bienestar personal, hasta cuánto has dormido, cuánta cafeína has ingerido, hasta cómo te tratan las personas o si te están dando el valor que te mereces, cómo te sientes contigo mismo. Pero hay algunos factores comunes, creo, cuando se trata de pensar en las herramientas que usamos, que es especialmente, por supuesto, el tema en el que estoy pensando hoy, las formas en que las herramientas que usamos pueden promover ese momento en la zona, pueden promover nuestra experiencia como desarrolladores, y creo que se trata especialmente de estos dos ejes. Por un lado, las limitaciones, las cosas que nos frenan, y por otro lado, la creatividad, las cosas que intentamos hacer, esa sensación de visión o energía o impulso que tenemos. Y ahora, cuando hablo de limitaciones, no me refiero a las limitaciones con las que trabajas cuando intentas encontrar una solución a un problema, como un problema empresarial. Estoy hablando de la limitación que es más como una burocracia que simplemente te detiene, que te impide implementar la idea que podrías tener. Obviamente, eso puede ser una simplificación excesiva, pero creo que se ve una gran experiencia del desarrollador cuando tienes esa creatividad, cuando fluyes, tienes una idea increíble y hay muy poco o nada que te impida realizarla. Así que cuanto más creamos oportunidades para la creatividad y reducimos las limitaciones, creo que vemos una mejor experiencia del desarrollador y eso es realmente donde Nuxt siempre ha buscado posicionarse. No te preocupes si no sabes qué es Nuxt, Nuxt es un framework de vistas, un framework de JavaScript. Es un framework progresivo que
2. Mejoras en NUXT 3
NUXT es un framework progresivo que elimina mucha redundancia y te permite enfocarte en tus ideas. Con NUXT 3, hemos realizado mejoras en la documentación, la importación automática de bibliotecas, la experiencia del desarrollador en el servidor y el despliegue.
NUXT 3 sigue el mismo camino. Con NUXT 3, hay muchas cosas de las que hablar, muchas formas en las que hemos intentado mejorar la experiencia del desarrollador, pero hoy quiero centrarme en cuatro en particular. Quiero enfocarme en cómo hemos buscado mejorar la documentación, porque eso puede parecer algo menor, pero creo que es una forma profunda en la que hemos buscado cambiar la documentación, hacer que NUXT sea más fácil de usar para los desarrolladores. Quiero enfocarme en cómo estamos importando automáticamente bibliotecas, funciones auxiliares y componentes. Quiero hablar sobre nuestra experiencia del desarrollador en el servidor. Esta es realmente una forma completamente diferente de abordar la funcionalidad del lado del servidor, y quiero hablar sobre el despliegue y cómo hemos buscado que la experiencia del desarrollador de tomar una aplicación y desplegarla sea sencilla y asombrosa. Primero, profundicemos en la documentación. Y cuando hablo de documentación, permíteme usar el ejemplo del esquema de configuración de Nuxt. El esquema de configuración de Nuxt es un ejemplo de algo para lo que necesitamos una gran documentación. Si vas a la documentación actual de Nuxt2, verás que hay páginas y páginas y páginas de información sobre cómo configurar Nuxt, no es que tengas que hacer esto, pero cuando se trata de tomar el control total de tu aplicación Nuxt, hay muchas formas que proporcionamos para hacerlo. Y eso es parte de lo que significa tener un framework progresivo. Tenemos que dar opciones porque el framework hace mucho trabajo pesado para los usuarios. Pero en el momento en que tienes algo que requiere mucha configuración, significa que es
3. Esquema, Documentación e Importaciones Automáticas
Con Nuxt 3, tenemos una solución unificada para el esquema, la documentación y los valores predeterminados. Incluimos la documentación directamente en el esquema mismo, asegurando que cualquier cambio en el código se refleje en la documentación. El archivo de esquema de configuración proporciona información completa, incluyendo tipos y resolutores de JSDoc. El proyecto sin tipos, lanzado bajo una licencia abierta, se puede utilizar en cualquier framework. Además, Nuxt 3 introduce importaciones automáticas, lo que permite acceder fácilmente a los componentes en el directorio de componentes.
4. Beneficios de usar Nuxt
Al usar Nuxt, puedes utilizar fácilmente componentes, funciones auxiliares y bibliotecas. Nuxt genera automáticamente las importaciones requeridas en función de tu uso, lo que permite una organización eficiente del código y elimina importaciones innecesarias.
5. NUXT 3 Server Framework and Isomorphic Fetch
NUXT 3 introduce un nuevo framework de servidor llamado H3, que es ultra minimalista y más rápido que otros frameworks. Proporciona utilidades para manejar solicitudes y es multiplataforma. La utilidad de fetch isomórfico permite realizar solicitudes de red eficientes. El servidor de NUX 3 se genera como un solo archivo, independiente de NUXed, y maneja la carga de código y la representación de respuestas de manera eficiente.
Y esto es un poco de cómo se ve. Lo primero que cualquier solicitud encontrará es este orquestador impulsado por H3 que decidirá qué partes del código son necesarias para renderizar una respuesta a esa solicitud en particular. Entonces, si es solo uno de los puntos finales de la API, no cargaremos todo el paquete de vista, no cargaremos el renderizador de vista ni nada por el estilo. Solo cargaremos el código que se necesita. Si es una página, por ejemplo, en tu aplicación de vista que podría ser cargada, y esa página podría tener una dependencia y podría querer hacer una solicitud a una de las API con las que comparte espacio en ese servidor, donde no tiene sentido enviar esa solicitud a la capa HTTP y hacerla como una solicitud HTTP adecuada. Además, eso sería terriblemente ineficiente en algo como una función serverless. Realmente no quieres volver a golpear el punto final. El código está ahí. Solo necesita cargarse en memoria. Y este fetch, esta función $fetch, fetch isomórfico del que estamos hablando, le dice a H3 que cargue este código y nos dé la respuesta. Es una forma increíblemente eficiente de obtener una respuesta de un punto final serverless. Y
6. Serverless Endpoint and Deployment in Nuxt 3
Puedes crear un punto final serverless que devuelva un número. TypeScript conoce el tipo de retorno de fetch isomórfico. Puedes acceder a los objetos de solicitud y respuesta predeterminados en Node. Esto permite una interacción fácil con los parámetros y devoluciones directas en JSON. El servidor de Nuxt 3 mejora drásticamente la experiencia del usuario. El despliegue en Nuxt 3 se simplifica con un único punto de entrada y tiempos de compilación rápidos.
7. Deployment and Feedback
NUXT3 permite el despliegue en una amplia gama de destinos, incluyendo Cloudflare, los service workers del navegador y Deno. El nuevo servidor NUXT, Nitro, puede ser desplegado en casi cualquier lugar. NUXT3 tiene soporte de configuración cero para plataformas como Netlify y Vercel. También es compatible con Cloudflare, Azure functions, Azure Static Web Apps y Firebase con una configuración mínima. Queremos hacer que Nuxt 3 sea lo más increíble posible y retroportar características a las aplicaciones de Nuxt 2. Consulta la documentación en nuxtest.org y síguenos en Twitter. Contáctame directamente si necesitas ayuda.
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