Creando un nuevo meta-marco basado en Vue desde cero con codificación en vivo.
This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.
Creando un nuevo meta-marco basado en Vue desde cero con codificación en vivo.
This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.
NUXT es un framework para construir aplicaciones web, construido sobre Vue.
En NUXT 3, se redujo el tiempo de inicio de 300 milisegundos a cinco y el tamaño del paquete se redujo de 52 MB a tres en módulos de nodo del servidor.
Nitro es el nombre dado al nuevo servidor en NUXT, diseñado para optimizar la construcción de aplicaciones en entornos serverless y en el borde.
Nitro permite la construcción eficiente sobre él, facilitando la creación de aplicaciones con herramientas modernas y técnicas de optimización.
Sí, NUXT es una excelente opción para construir aplicaciones sin renderizado en el servidor, ofreciendo componentes autoimportables, seguridad de tipo y otras utilidades integradas.
Migrar una aplicación de Vue a NUXT generalmente implica eliminar código redundante y aprovechar las optimizaciones y utilidades que NUXT ofrece automáticamente.
VueX y Pinia son bibliotecas de gestión de estado en Vue. Pinia es el sucesor recomendado de VueX en el ecosistema de Vue 3, proporcionando herramientas avanzadas para gestionar estados.
Sí, NUXT está diseñado para ofrecer una experiencia de backend completa, incluyendo autenticación y manejo de sesiones, similar a lo que ofrecen frameworks de pila completa como Laravel.
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.
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.
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Comments