Video Summary and Transcription
NUXT es un marco para construir aplicaciones web que ha experimentado cambios significativos con la introducción de Nitro, un nuevo servidor. La charla abarca temas como la construcción de un marco con Nitro, la renderización de una aplicación de vista, la configuración de Nitro y Vite, e integrar Nuxt con un proyecto existente de Vue 2. La colaboración entre Nuxt y Chrome ha dado lugar a mejoras de rendimiento, y el futuro de Nuxt y Nitro parece prometedor con nuevas ideas y extensiones en desarrollo.
1. Introducción a NUXT y Nitro
Soy miembro del equipo principal de NUXT y he trabajado en proyectos como Magic Regex y Fontane. Ayudé a construir Nuxt, un framework para construir aplicaciones web. Tuvimos la oportunidad de repensar Nuxt y realizar cambios significativos. Quiero mostrar Nitro, nuestro nuevo servidor, y demostrar cómo construir Nuxt desde cero sobre él.
♪♪ Podemos continuar. Soy miembro del equipo principal de NUXT, junto con otros compañeros aquí. Ya han escuchado a Lucy. Sebastien hablará en un momento, Alex también. También estoy involucrado en otros proyectos como Magic Regex, Fontane, que hace que tu cambio de diseño desaparezca si tienes fuentes web personalizadas. Elk, que es un cliente para Mastodon, y también tengo un sitio web. Así que siéntete libre de echar un vistazo a cualquiera de ellos que te pueda interesar.
Este es mi entorno. Si alguna vez me envías un mensaje en Twitter o Discord o cualquier otro lugar, probablemente esté sentado en este escritorio. Probablemente uno de mis tres gatos me esté impidiendo trabajar. No sé si alguna vez has experimentado que has cambiado tus prioridades del día en función de lo que hace tu mascota, porque yo sí lo he hecho al 100%. Como, hay momentos en los que simplemente no puedo programar porque en realidad tengo un gato aquí. Así que lo único que puedo hacer es leer problemas de GitHub o algo así, pero lo siento, me estoy desviando.
Así que ayudé a construir Nuxt, que es un framework para construir aplicaciones web, y está construido sobre Vue, por supuesto. ¿Puedo ver una muestra de manos, quién ha usado Nuxt? Ok. Bueno, eso nos saltará las próximas diez diapositivas. Recientemente, tuvimos una - bueno, hace un par de años. Tuvimos una oportunidad significativa de repensar qué era Nuxt, qué haríamos con él. Quiero decir, la filosofía principal, la idea de que podrías empezar con las mejores prácticas incorporadas y personalizar a medida que avanzas, eso seguía ahí, pero muchas cosas estaban cambiando.
Así que el cambio de Vue 2 a Vue 3, hubo un cambio incompatible en PostCSS, cambios drásticos en Webpack, al mismo tiempo, justo cuando estábamos a punto de estar listos con Webpack, Evan, por el amor de Dios, lanza Vite. ¿De qué se trataba eso? Pero soy un gran fan, pero muchas oportunidades para repensar. Y junto con eso, tuvimos cambios filosóficos, como pasar de un enfoque de singleton donde todo está definido centralmente y disponible para ti, a un enfoque componible donde realmente puedes incorporar las características que deseas y necesitas y solo esas se incluyen en el paquete, una idea de que puedes compartir lógica entre componentes, muchas cosas que realmente nos hicieron pensar en lo que queríamos que Nuxt hiciera. Y no voy a hablar mucho de eso, en realidad. Me voy a centrar en la siguiente parte, que hicimos, que fue en realidad, creemos, el servidor y cómo podríamos escribir un servidor diseñado para el mundo serverless, para un mundo de computación en el borde, para un mundo donde no necesariamente tienes un contenedor Docker siempre encendido o un servidor que está constantemente listo para devolver respuestas, pero tal vez necesites iniciar algo. Nos movimos, por cierto, en Nuxt 2 de 300 milisegundos llamados Start a cinco en Nuxt 3, y pasamos de 52 MB de tamaño de paquete a tres en módulos de nodo del servidor en Nuxt 2 a Nuxt 3. Así que hicimos cambios enormes, pero en particular, lo que quiero hablar hoy es mostrar Nitro, que es el nombre que le hemos dado a nuestro nuevo servidor. Lo hemos lanzado para que cualquiera pueda construir sobre él, y quiero mostrarte cómo sería construir Nuxt desde cero en unos pocos minutos. Realmente quiero intentar hacer esto, y pido disculpas si es posible que me extienda. Voy a construir Nuxt desde cero sobre Nitro, impulsado por muchas y muchas herramientas, que te mostraré a medida que avancemos. Así que aquí vamos.
2. Construyendo un Framework con Nitro
Sumergámonos y construyamos un framework impulsado por Nitro. Instalamos Nitro y H3, un framework de servidor como Express. Creamos un servidor web que devuelve una respuesta JSON. Proporcionamos seguridad de tipo en las solicitudes a través de la aplicación y la hacemos eficiente. En NUX, la llamada fetch funciona de manera isomórfica.
Sumergámonos y construyamos un framework impulsado por Nitro. Entonces, lo primero que debemos hacer, este es un repositorio vacío, básicamente, no hay mucho allí. Voy a instalar Nitro y H3, que es el framework de servidor, un poco como Express en el que construimos, y lo iniciamos.
Bien, así que de entrada tenemos un servidor web en ejecución. Vamos a localhost 3000, no hay nada allí. Creemos una ruta raíz, foo. Nitro y Nuxt, tenemos muy clara la idea de ser lo más minimalistas posible y lo más intuitivos posible. Así que podemos hacer algo como esto. Y en realidad, si accedemos a ese punto final, lo haré en esta terminal aquí, que parece ser pequeña. Si accedo a localhost, ¿cuál era eso, foo, obtengo una respuesta JSON. Acabo de devolver un objeto. También, en la medida de lo posible, intentamos importar automáticamente cosas, y lo hacemos en un patrón que comenzamos con Nuxt. Proporcionamos nuestra propia configuración de TS para que tu editor sepa, tu IDE sepa qué está disponible tanto en términos de, bueno, en términos de todo lo que ponemos a disposición, ya sea alias de tipo, rutas de búfer, o hacer que tu editor sepa qué se puede importar automáticamente y qué no. También podemos hacer cosas realmente geniales como esta. Digamos que, veamos, duplico esto, como otro, otro controlador. En realidad puedo obtener type safety en las solicitudes en toda mi aplicación, por lo que conoce las rutas que existen, conoce los tipos de retorno para esos data, y así puedo hacer algo como esto y obtener una type safety completa, y es bastante divertido. Y lo que también notarás, tal vez no, es que esta cosa del signo de dólar fetch, cuando se usa en un contexto de servidor, en realidad no llega a la capa de red, solo hace una llamada a función. Entonces, en la medida de lo posible, estamos tratando de hacerlo lo más eficiente posible. En NUX, como sucede, cuando ejecutas esa llamada fetch, hará una solicitud al servidor, por lo que funciona de manera isomórfica.
3. Rendering a View App
Hemos configurado un servidor que se recarga automáticamente a medida que realizamos cambios. Vamos a manejar rutas que no son del servidor y renderizar una aplicación de vista. Instalaremos Vue y un complemento, crearemos una aplicación de vista, la importaremos y la renderizaremos como una cadena. Por último, devolveremos el HTML renderizado.
Bien, así que tenemos un servidor en funcionamiento, que se recarga automáticamente en segundo plano a medida que realizamos cambios. He implementado sitios web que se centran exclusivamente en el servidor y que utilizan solo Nitro, y funciona muy bien, pero hagamos algo relacionado con la vista.
Así que agreguemos un controlador que maneje todas las rutas que no son del servidor. Tal vez tengamos algunas rutas del servidor como información de bar, pero tal vez también queramos renderizar una aplicación de vista, algo de HTML. Y podríamos hacer algo como esto, vamos a renderizar algo de HTML. Y si accedemos a esa otra página, veremos que se devuelve HTML. Pero sería muy lento si escribiera todo. Hagámoslo con Vue. Así que instalemos Vue. Y un complemento V para ello. Y creemos una aplicación de vista.
Bien. Esto solo dirá... En realidad, importaré algo para que sea un poco más bonito. Y simplemente diré, hola, Vue.js London. Bien. Y lo que realmente queremos hacer es importarlo y renderizarlo como una cadena y devolverlo. Así que hagámoslo. Obtendremos create app de Vue. Necesitamos poder renderizarlo como una cadena. Así que haremos render to string. Y también necesitamos importar la propia aplicación. Y básicamente, oops. Lo que queremos hacer es crear la aplicación. Queremos poder renderizarla como una cadena. Oh sí, compilarla. Cuando funcione bien, ¿verdad? Es realmente bueno. Bien, y luego queremos devolver eso. Así que básicamente queremos devolverlo aquí. Y luego tenemos un poco de HTML sucediendo.
4. Configurando Nitro y Renderizando una Página Completa
No funcionará porque Nitrode no entenderá View, así que necesitamos agregar alguna configuración. Vamos a usar un complemento V. Ahora tenemos una plantilla y queremos renderizar más que solo la aplicación de vista. Vamos a usar una característica de Nitro llamada la capa de almacenamiento. Vamos a extraer este archivo index.html desde aquí, usar el almacenamiento y obtener el index.html raíz. Y eso es lo que podemos devolver, reemplazar la plantilla. Y eso debería renderizarme una página completa.
No funcionará porque Nitrode no entenderá View, así que necesitamos agregar alguna configuración. Y podemos hacerlo así. Oh, TypeScript puede ayudarnos aquí. Queremos rollup-config, y vamos a pasar un complemento. Y estoy haciendo trampa, esto no es realmente lo que probablemente deberías hacer, pero vamos a usar un complemento V. Solo pásalo así. Probemos eso. ¡Yay, está funcionando! Tenemos algo de HTML que regresa. ¿Qué te parece eso?
Bienvenidos. ¡Whoo! Gracias. Gracias. Gracias. Gracias. Gracias. Todos ustedes están como, vamos, Daniel. Hacemos esto todo el tiempo.
Ok, probablemente necesitamos una plantilla para poner eso. Así que diremos, hola Londres. Y vamos a tomar ese texto aquí, algo básico. Ponlo como nuestro... Ahí vamos. Ahora tenemos una plantilla y realmente queremos renderizar más que solo la aplicación de vista que va a devolver, porque todo lo que va a renderizar son los componentes. Queremos una página web completa.
Entonces vamos a usar una característica de Nitro llamada la capa de almacenamiento. Ahora, la capa de almacenamiento de Nitro es un almacén KV que es agnóstico del proveedor, por lo que funciona con Redis, con memoria, funciona con VSL KV, funciona con bases de datos en el borde, como PlanetScale, CloudFlare, KV Storage, muchas otras cosas, pero también funciona con el sistema de archivos. Así que vamos a extraer este archivo index.html desde aquí, usar el almacenamiento y obtener el index.html raíz. Y eso es lo que podemos devolver, reemplazar la plantilla. ¿Y qué puse ahí? Esto. Ok, eso debería renderizarme una página completa.
5. Renderizado del lado del cliente con Vite
Es lo mismo, pero en realidad se ejecuta un sitio HTML completo. Queremos que funcione también en el lado del cliente para tener interactividad. Necesitamos agregar Vite y cambiar la configuración de Nitro. Vamos a usar algo llamado DevHandler, que inicializa Vite en el servidor. Vamos a crear un servidor de desarrollo, hacerlo un tipo de aplicación personalizada y usar una utilidad de H3 para obtener nuestros middlewares. Deberíamos poder acceder a Vite Client.
Genial. Entonces no se ve diferente, ¿verdad? Es lo mismo, pero en realidad se ejecuta un sitio HTML completo, lo cual es genial.
Ahora, lo que realmente nos gustaría hacer es que esto no solo se renderice en el servidor. Queremos que funcione también en el lado del cliente para tener interactividad, para que las cosas también funcionen bien allí.
Así que hagámoslo. Vamos a necesitar agregar Vite. Ahí vamos. Entonces... Vamos a necesitar cambiar un poco la configuración de Nitro aquí. Vamos a usar algo llamado DevHandler, y eso es, vamos a... Básicamente, vamos a inicializar Vite para que se ejecute también en el servidor. Le daremos una ruta, que será __vite. Así sabemos que es para Vite y no para otra cosa. Y le daremos un controlador. Vamos a usar algo llamado un controlador de eventos perezoso, lo que significa que la primera vez que se acceda, se inicializará, pero no antes de eso. Hay muchas utilidades realmente útiles como esta agregadas por Nitro en toda tu aplicación. Así que si estás usando Vue, Nuxt, puedes hacer lo mismo.
Y... Me estabas diciendo que he estado hablando durante 15 minutos. Increíble, increíble. Bueno, vamos a crear un servidor de desarrollo aquí. Lo crearemos, lo haremos un tipo de aplicación personalizada. Necesitamos importar esto. Lo haremos un tipo de aplicación personalizada. Y necesitará tener el modo de middleware, el modo de middleware, y creo que también necesitaremos pasar una base. Genial. Y usaremos otra utilidad aquí de H3 para obtener nuestros middlewares. Bien, parece correcto. Veamos, ¿eso va a funcionar? Deberíamos poder acceder a Vite Client.
6. Configuración de Nitro y Vite
Tenemos Vite funcionando, pero lo que no tenemos es ningún tipo de recarga en caliente o algo así, no está realmente conectado. Así que movamos esto a un lugar diferente llamado App, el punto final del servidor. Necesitamos un Cliente 1 2 para manejar el lado del cliente. Usaremos create SSR App para hidratar la vista renderizada en el lado del servidor. Crearemos la App y la montaremos, y configuraremos Nitro para capturar todo con el controlador en la aplicación del cliente. Solo necesitamos decirle a Vite que procese también la vista.
De acuerdo, y nos está devolviendo algo. Así que, gracias. Creo que deberíamos poder agregar un script aquí. Y Vite Client, y creo que eso debería cargarnos.
Un servidor Vite, conectado. Excelente. Así que tenemos Vite funcionando, pero lo que no tenemos es ningún tipo de recarga en caliente o algo así, no está realmente conectado. Todo lo que está haciendo es que el servidor está ahí.
Así que movamos esto a un lugar diferente. Movámoslo a, lo llamaremos App, y llamaremos a esto el punto final del servidor. Necesitamos un Cliente 1 2, que manejará lo que sucederá en el lado del cliente. Vamos a usar create SSR App, que hidratará una vista renderizada en el lado del servidor. Y haremos lo mismo. Crearemos la App, pero luego la montaremos así. ¿Qué está pasando ahí? De acuerdo, parece bien. Y tendremos que agregar lo mismo a nuestro script, así que ahora tenemos esto. De acuerdo. No. No funciona. Intentémoslo de nuevo. Oh, ¿por qué no funciona? Porque me moví a alguna otra carpeta. Configurémoslo.
Así que tendremos que decirle a Nitro que esto existe. Tenemos este nuevo controlador llamado, queremos que capture todo. Y el controlador estará en la aplicación del cliente. Nuestro servidor en el lado de Nitro. Se guarda mientras escribo, así que se muere. Oh, error. En realidad está bien. Solo necesitamos decirle a VIT que también debe procesar la vista.
7. Construyendo Nuxt con Nitro
Hemos construido Nuxt en pocos minutos. Todo está impulsado por Nitro en el fondo. Nitro se puede utilizar para construir frameworks como AnalogJS y Nuxt. Proporciona todas las primitivas necesarias.
Por el amor de Dios. De acuerdo, ahí vamos. Veamos. ¿Realmente está funcionando o solo parece que sí? Sí lo está. Parece. Increíble. Así que, ahí lo tienes. Hemos construido Nuxt en pocos minutos. Y trágicamente, no tengo tiempo para mostrarte ninguna de las, bueno, te mostraré algunas cosas, te mostraré algunas cosas. Pero soy consciente de que probablemente necesitamos terminar. Y básicamente tenemos Vites configurados, y todo está impulsado por Nitro en el fondo. Si quieres explorar Nitro, es posible construir un framework sobre él, AnalogJS, que es un framework para Angular, también está construido sobre Nitro. Obviamente, Nuxt también lo está, y daríamos la bienvenida a otros frameworks para hacer lo mismo tipo de cosas. Proporciona todas las primitivas que puedas necesitar.
8. Authentication, Deployment, and Conclusion
NUXT cuenta con autenticación, soporte de almacenamiento y la capacidad de implementar en varios destinos. Puedes definir reglas raíz por punto final, especificando ISR o renderizado en el servidor. Ponte en contacto conmigo para obtener ejemplos de código. Visita nux.com para NUXT y nitro.andreas.org para la documentación de Nitro. Mantente actualizado con NUXT en Twitter. Pronto llegará una versión menor de 3.5 con características emocionantes. Gracias por la oportunidad de estar aquí en Londres. Construir frameworks y explorar los bloques de construcción es divertido con NUXT.
Así que tenemos autenticación, por ejemplo. Puedes usar la sesión para crear una sesión persistente almacenada en las solicitudes a través de cookies. Mencioné obviamente el almacenamiento, el soporte KV. Tiene soporte para implementar en cualquier destino serverless o no serverless que puedas imaginar desde Docker a Basel a Netlify sin configuración, a Cloudflare, a Lagon, un nuevo runtime. Y puedes definir reglas raíz individualmente por punto final. Por lo tanto, puedes especificar que algunos sean ISR, algunos se rendericen en el servidor y otros no. Cualquier cosa que puedas imaginar, es posible hacerlo.
Por favor, haz un seguimiento. Ponte en contacto conmigo si quieres. Subiré este código y tal vez un poco más si tengo tiempo, a Daniel Rowe de Vue.js Live, para que puedas ver cómo podría ser construir un framework serverless en Nitro. Y si quieres probar NUX, lo cual espero mucho que hagas, y probar Nitro en un entorno de framework de producción completo, visita nux.com. Y la documentación de Nitro está en nitro.andreas.org. Y sigue la cuenta de NUXT en Twitter, y tenemos una versión menor de 3.5 con algunas características increíbles, incluidas las reglas raíz tipadas, que Eduardo demostró anteriormente hoy, que saldrá hoy o mañana. Eso debería ser bastante divertido de ver. Pero eso es todo por ahora, y por favor, hazme preguntas en un momento.
Ha sido un verdadero placer y una delicia estar aquí en Londres. Muchas gracias. Gracias. Gracias, Daniel. Esto fue increíble. No sé qué está pasando aquí hoy, pero la gente está construyendo frameworks en vivo, construyendo DOM virtuales en vivo. No sé. ¿Es esa una nueva tendencia o algo así? Siéntete libre. Bueno, creo que es divertido. ¿Verdad? Es solo para explorar los bloques de construcción. Porque creo que a menudo no se ve lo que sucede bajo el capó con algo como NUXT. Así que NUXT, comienzas. Se clona en tu directorio de trabajo y básicamente solo tienes una aplicación única.vue archivo. Así que no puedes ver realmente. Y debería funcionar sin problemas.
9. NUXT para aplicaciones sin renderizado en el servidor y curva de aprendizaje
NUXT es una buena opción para construir aplicaciones sin renderizado en el servidor. La curva de aprendizaje para los desarrolladores de Vue que hacen la transición a NUXT no es pronunciada, ya que la mayoría del código se puede reutilizar. La comunidad de Discord es un gran recurso para cualquier pregunta o soporte.
Todo esto. Hay tipos y todo eso. Así que creo que a veces es divertido levantar el telón y ver qué está pasando.
Estoy totalmente de acuerdo. Ahora vamos a profundizar en algunas preguntas. La primera es, ¿debemos usar NUXT si no necesitamos renderizado en el servidor? Sí, absolutamente. Por cierto, creo que lo más importante es usar la herramienta adecuada para el trabajo. No soy una persona que solo usa una herramienta. Y espero que si somos artesanos, básicamente todos seamos carpinteros. Estamos haciendo cosas. Así que usa la herramienta que te haga más productivo y te permita hacer lo mejor posible la cosa que estás haciendo. Pero no hay razón para que NUXT no sea una muy buena opción para construir una aplicación sin renderizado en el servidor. Cosas como componentes autoimportables, la type safety de NUXT, muchas de las utilidades que proporciona. Desde componentes integrados hasta manejo de errores y cómo configurar y establecer el suspense y el enrutamiento, y todo eso es algo en lo que simplemente no necesitas pensar si estás renderizando en el servidor.
¿Qué dirías sobre la curva de aprendizaje de NUXT en caso de que, no sé, sea un desarrollador de Vue. Conozco Vue bastante bien, pero quiero empezar a usar NUXT. Si tomas una aplicación de Vue que has construido y quieres convertirla en una aplicación de NUXT, la mayoría de lo que harás es eliminar código. Así que debería funcionar sin problemas. Deberías poder arrastrarlo y tu aplicación vue de tu aplicación no-NUXT se convierte en la aplicación vue de tu aplicación NUXT, y debería funcionar. Así que la curva de aprendizaje, todo lo que sabes es relevante, pero es posible que no necesites hacer tanto como antes. Debería hacerlo por ti. Lo mejor, por supuesto, si tienes preguntas, es ir a Discord, que es discord.nuxtjs.org. Siempre estoy allí. Puedes preguntarme cualquier cosa. Y hay una gran community de personas que son realmente serviciales. Así que la curva de aprendizaje no debería ser demasiado difícil. Pero si lo es, hay mucha gente allí para ayudar. De acuerdo, perfecto. Así que tenemos el soporte. Vamos a profundizar en la siguiente pregunta.
10. Nuxt Free como un framework de pila completa
Nuxt Free puede proporcionar una experiencia de backend completamente funcional para la autenticación y el trabajo con dependencias externas. No se limita a ser un backend de soporte para aplicaciones frontend. El equipo principal de Nuxt, con experiencia en Laravel, tiene como objetivo proporcionar todas las utilidades necesarias para los módulos de autenticación y está abierto a construir cualquier característica que falte.
¿Es Nuxt Free capaz de proporcionar una experiencia de backend completamente funcional en cuanto a autenticación, trabajo con dependencias externas y multiprocesamiento, como por ejemplo Django? ¿O está destinado a ser un backend de soporte principalmente para aplicaciones frontend? Creo que no es casualidad que gran parte del equipo principal de Nuxt provenga de un entorno de Laravel. Así que hemos experimentado algo similar a un framework de pila completa con eso. Creo que definitivamente queremos que Nuxt tenga todo lo que necesitas, y no que tengas que usarlo como un framework de pila completa. Por lo tanto, nuestro enfoque en KVStore, en la capa de base de datos, en la capa de base de datos, estamos proporcionando las utilidades básicas como Soporte de Sesión, que necesitan los módulos de autenticación. Actualmente hay un excelente módulo de autenticación desarrollado por Sidebase que tiene adaptadores para cientos de diferentes... Yo diría que sí, y si hay algo que falta, avísanos, porque nos encantaría construirlo.
11. Using Webpack with Nuxt Free
No diría que es imprudente usar Webpack con Nuxt Free. La mayoría de los desarrolladores que usan Nuxt utilizan VEET, lo cual refleja el amor del ecosistema frontend por VEET. Si eres más productivo con Webpack o tienes herramientas que solo funcionan con Webpack, Nuxt proporciona un constructor para ello. VEET es rápido y ofrece una gran experiencia para los desarrolladores, pero aún existen muchos proyectos heredados de Webpack. La creación de VEET por parte de Evan retrasó NUXT 3, pero valió la pena al final.
De acuerdo, lo pregunté en Discord. Genial. La siguiente pregunta es, ¿es imprudente usar Webpack con Nuxt Free? No diría que es imprudente. Usa la herramienta que te guste y te haga más productivo. Diría que la gran mayoría de los desarrolladores que usan Nuxt utilizan VEET. Es algo así como el 95% de todas las descargas de Nuxt se hacen con el constructor de VEET, y solo aproximadamente el 5% se hace con el constructor de Webpack. Pero creo que eso refleja probablemente el hecho de que el ecosistema frontend ama VEET en este momento. Hay mucho desarrollo sucediendo allí, muchos complementos se están construyendo para VEET. Obtienes mucho soporte allí. Creo que la mayoría de las personas que comienzan un nuevo proyecto piensan en construir sobre VEET. Si eres más productivo con Webpack, si tienes herramientas que solo funcionan con Webpack, proporcionamos un constructor para que puedas usarlo. Depende de ti. Estoy completamente de acuerdo sobre VEET. Cuando lo probé por primera vez, no podía creerlo. Sí. Es muy rápido, la experiencia del desarrollador. Pero probablemente, sí, hay muchos proyectos heredados de Webpack. Sé que si tienes una configuración personalizada de Webpack, no puedes cambiar nada. No puedes dejarlo ir. Es como el Anillo Único. Esta configuración de Webpack es mía. Perdonamos a Evan por hacer VEET, aunque hizo que NUXT 3 tardara más, pero valió la pena al final.
12. VueX vs Pinia with NUXT
Prefiero usar Pinia ya que es el sucesor natural de VueX en el ecosistema de Vue 3. Tiene excelentes herramientas de desarrollo y ofrece una solución sencilla para la gestión del estado. Mientras que Nuxt proporciona utilidades como useState para sistemas de estado simples, Pinia es una opción confiable para la gestión de estado más compleja.
De acuerdo. Tenemos el siguiente. ¿Prefieres VueX o Pinia con NUXT? Yo usaría Pinia. Creo que Pinia es el sucesor natural de VueX en el ecosistema de Vue 3, así que usaría Pinia. Tiene excelentes herramientas de desarrollo. El tipo que lo escribió no es malo tampoco, pero sí, es bueno. Me encanta que no tengamos muchas opciones aquí, solo una biblioteca de gestión de estado. No como React y una nueva biblioteca cada mes. Es posible que no necesites Pinia, debo decirlo. Nuxt proporciona utilidades como useState que permiten mover el estado del servidor al cliente sin reinicializarlo y permiten compartir el estado entre componentes. Entonces, si tienes un sistema de estado realmente simple, es posible que no necesites agregar dependencias externas, pero cuando lo hagas, elige Pinia. Genial.
13. Integrando Nuxt con un Proyecto Existente de Vue 2
Si heredaste un proyecto de Vue 2, integrar Nuxt debería estar impulsado por las necesidades comerciales. Considera la capacidad de tu equipo, el valor que la aplicación aportará a tu empresa y cuánto tiempo planeas mantenerla. Si la aplicación funciona bien y no requiere cambios, puede que no valga la inversión de tiempo. Sin embargo, si tienes el tiempo y los recursos, puede ser una decisión beneficiosa.
El siguiente punto es, si heredaste un proyecto de Vue 2, ¿vale la pena el esfuerzo de integrar Nuxt? Esta pregunta siempre debe estar impulsada por las necesidades comerciales, así que ¿cuál es tu capacidad en términos de tu equipo? ¿Cuál es el valor que la aplicación aportará a tu empresa? ¿Cuánto tiempo planeas mantenerla? Por ejemplo, si solo tienes que mantener una aplicación funcionando sin problemas y no necesita cambios, es posible que no te beneficies de invertir tiempo en hacer cambios en ella. Dicho esto, si fuera yo y tuviera el tiempo para dedicarle, definitivamente lo haría, pero eso no significa que siempre sea la decisión correcta. Realmente tienes que, pero quiero decir, es una decisión empresarial para cualquier adopción tecnológica, para cualquier migración, como reescribir algo, migrar algo, estas no son decisiones sin costo. Así que.
14. Colaboración de Nuxt con Chrome
Nuxt está colaborando con Chrome para mejorar el rendimiento. Han implementado algunas cosas que han beneficiado a Nuxt, como el soporte mejorado de mapeo de código fuente y la solución de problemas comunes con las trazas de pila asíncronas. El equipo de Chrome DevTools, específicamente el equipo Aurora, está trabajando con Nuxt.js y otros frameworks para asegurar la aplicación de las mejores prácticas. La colaboración ha llevado al desarrollo de Fontaine, una solución para calcular métricas de fuentes y mejorar la carga de fuentes web.
Sí, sí, definitivamente. De acuerdo. El siguiente punto es, he visto en la conferencia Google I.O. que Nuxt está colaborando con Chrome para mejorar el rendimiento. ¿Puedes decirnos qué está sucediendo? Eso suena como una especie de sociedad secreta. Bueno, sí, nos reunimos en una habitación oscura. Sí, el equipo de Chrome ha sido genial. Hemos implementado algunas cosas que han beneficiado a Nuxt, creo que también han beneficiado más en general. Así que estamos haciendo cosas interesantes con los mapas de código fuente, por ejemplo. Esto es en el lado de DX, Chrome DevTools. Verás un mejor soporte de mapeo de código fuente con Nuxt y Vite y la última versión de Chrome. En cuanto a información más precisa, verás tu código, verás un mejor contexto. Así que hay un problema común con las trazas de pila asíncronas donde se pierde el contexto anterior. En realidad, podemos resolver eso, y hemos hecho cosas geniales con ellos para eso. Tienen un equipo, el equipo Aurora, dentro del equipo de Chrome DevTools, y están buscando asegurarse de que se apliquen las mejores prácticas en cosas como la carga de scripts y la carga de fuentes a los principales frameworks. Así que están trabajando con nosotros, están trabajando con Angular, están trabajando con Nuxt.js, y honestamente es un placer trabajar con ellos. Siempre es agradable tener personas que te desafíen, que propongan ideas interesantes y nuevas y diferentes. Fontaine surgió de una conversación allí. Por cierto, si revisas el readme, daré crédito porque no fui yo quien tuvo la idea. Fue Katie Hempenius, su trabajo, básicamente para calcular métricas de fuentes y permitir menos de esa basura cuando se carga tu fuente web personalizada. Y así hay muchas oportunidades como esa para incorporar buenas ideas porque, supongo, sí, tienen a gente talentosa trabajando allí.
15. Futuro de Nuxt y Nitro
El futuro es prometedor para Nuxt y Nitro. Hay muchas ideas buenas en camino, incluyendo tres nuevos RFC relacionados con Nuxt Script, Nuxt Font y Nuxt Assets. La comunidad ha desarrollado nuevas extensiones de VS Code como Nuxta para Nuxt, que te permite agregar módulos y modificar la configuración de Nuxt desde la barra lateral de VSCode. El futuro guarda emocionantes posibilidades.
Genial, me alegra que estén haciendo todo eso. Especialmente para los mapas de código fuente porque, sí, cuanto mejores sean los mapas de código fuente, más fácil es depurar todo, así que sí. Estoy seguro de que no tienen ningún error. Nunca. Yo tampoco. Genial.
El siguiente es una pregunta personal. ¿Qué extensiones de VS Code utilizas? Puedo compartir mi configuración de VS Code con cualquiera que lo desee, así que avísame. Pero probablemente tengo bastantes. Pero obviamente tienes que obtener Vola, ya sabes. Sí, sí, seguro que tienes muchas, así que no sé. Tal vez algunas estén en ese mismo GitHub. Yo lo haría. En el README. Sí, algunas que recomendaría. Hay una nueva extensión BetaTSErrors, que es bastante buena. Console Ninja es bastante divertida. Te permite rastrear, como, los registros de la consola del navegador en tu IDE. Eso es realmente bueno. Hay una nueva extensión llamada Nuxta para Nuxt. N-U-X-T-R. Hecha por algunas personas de la community, pero utilizando herramientas como Magicast y otras bajo el capó. Eso te permite agregar modules, modificar tu configuración de Nuxt, todo desde la barra lateral de VSCode. Honestamente, hay tantas. Increíble. Y la última pregunta es, ¿qué depara el futuro para Nuxt y Nitro? Me gustaría decir que el futuro es prometedor. Así que estamos... Entonces, ¿qué depara el futuro? Creo que no quiero robar mucho protagonismo a Sebastian, quien va a pintar un poco de una visión de algunas cosas interesantes que puedes hacer. Pero tenemos un buen equipo, y hay muchas buenas ideas que están por venir. Así que, en la próxima semana o algo así, probablemente verás tres nuevos RFC relacionados también con el equipo Aurora y lo que hemos estado haciendo con ellos para Nuxt Script, Nuxt Font y uno que creo que te parecerá realmente interesante, Nuxt Assets, que es bastante genial. Sí. Hay mucho por venir. Increíble. Muchas gracias, Daniel. Así que, el futuro es prometedor. Den un aplauso a Daniel y al futuro prometedor.
Comments