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.

FAQ

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.

Daniel Roe
Daniel Roe
32 min
12 May, 2023

Comments

Sign in or register to post your comment.

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

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.

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

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix es un nuevo marco de trabajo web de los creadores de React Router que te ayuda a construir mejores y más rápidos sitios web a través de una sólida comprensión de los fundamentos de la web. Remix se encarga de las tareas pesadas como la renderización del servidor, la división de código, la precarga y la navegación, y te deja con la parte divertida: ¡construir algo increíble!
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
Los tutoriales interactivos basados en la web se han convertido en un elemento básico de los frameworks de front end, y es fácil ver por qué: a los desarrolladores les encanta poder probar nuevas herramientas sin el problema de instalar paquetes o clonar repositorios.Pero en la era de los meta-frameworks full stack como Next, Remix y SvelteKit, estos tutoriales solo llegan hasta cierto punto. En esta charla, veremos cómo nosotros, en el equipo de Svelte, estamos utilizando la tecnología web de vanguardia para repensar cómo nos enseñamos mutuamente las herramientas de nuestro oficio.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Explica sobre la refactorización del código base de NuxtJS y los desafíos que enfrenta para implementar Vue 3, Vite y otros paquetes.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 puede sonar aún nuevo para muchos usuarios, pero en realidad ya ha sido lanzado hace más de un año. ¿Cómo evolucionó Vue 3 durante este período? ¿Por qué tardó tanto en ponerse al día el ecosistema? ¿Qué aprendimos de este proceso? ¿Qué viene después? ¡Discutiremos estas preguntas en esta charla!

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
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
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
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.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
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.
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
JSNation 2022JSNation 2022
141 min
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento