Construyendo para el Edge - Creando un marco de próxima generación

Rate this content
Bookmark

Creando un nuevo meta-marco basado en Vue desde cero con codificación en vivo.

32 min
12 May, 2023

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.

Available in English

1. Introducción a NUXT y Nitro

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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.

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

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance