Construyendo un Mejor Martillo - La Historia de Nuxt 4

Rate this content
Bookmark

Exploraremos las novedades de Nuxt 4 y las decisiones arquitectónicas que hemos tomado para hacerlo 'un mejor martillo', sin importar el tipo de proyecto al que te enfrentes. Mi objetivo es crear algo útil para cualquier persona, incluso si no utiliza Nuxt. Así que vamos a reflexionar sobre la filosofía del framework e inspirar a las personas con lo que hay debajo del capó.

This talk has been presented at Vue.js Live 2024, check out the latest edition of this JavaScript Conference.

Daniel Roe
Daniel Roe
28 min
25 Apr, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Nuxt es un framework para construir aplicaciones web utilizando Vue y Nitro, impulsado por una vibrante comunidad de código abierto. Nuxt 4 tiene como objetivo hacer que el framework sea más usable y extensible, centrándose en la colaboración en lugar de la competencia. El ecosistema de módulos y la arquitectura modular mejoran la funcionalidad y las opciones de personalización de Nuxt. Nuxt prioriza la elección del usuario y busca la estabilidad y confiabilidad. Nuxt 4 introduce cambios significativos y es esperado con entusiasmo por la comunidad.

1. Introducción a Nuxt y Daniel Rowe

Short description:

Lidero el equipo principal de Nuxt y estoy involucrado en otros proyectos de código abierto como Nitro, PageSpeed.dev, RegExp.dev, Fontane y ElkZone. Estoy hablando de Nuxt, un marco de trabajo para construir aplicaciones web de pila completa utilizando Vue y Nitro.

Es un placer estar aquí hoy y hablar sobre la construcción de un mejor martillo, la historia de Nuxt 4. Mi nombre es Daniel Rowe. Actualmente lidero el equipo principal de Nuxt. También estoy involucrado en otros proyectos de código abierto. Tengo el privilegio de ser un mantenedor de código abierto a tiempo completo.

Además de Nuxt, también estoy involucrado en la construcción de Nitro. PageSpeed.dev es un divertido proyecto para consultar las estadísticas de velocidad de página de Google y las API de Core Web Vitals de una manera compartible. RegExp.dev. Magic RegExp es una biblioteca que hace que las expresiones regulares sean seguras en cuanto a tipos, pero se compila en tiempo de compilación. Fontane ayuda a reducir el cambio de diseño acumulativo en las fuentes web y mejora tus Core Web Vitals. ElkZone es un cliente para Mastodon. FirstCommit.is encontrará el primer commit de alguien en GitHub, y puedes encontrar todo esto y más en mi sitio web, Rowe.dev.

Bueno, aquí es donde estoy parado en este momento. Solo Bali, mi gato, ha sido excluido de la habitación, pero sí, normalmente me impide escribir mucho código cuando estoy en casa. Es extremadamente dulce, pero necesita muchos mimos cuando los quiere. Hoy estoy hablando de Nuxt y de construir un mejor Nuxt y mirando hacia el futuro a Nuxt 4. Y si no estás familiarizado con Nuxt, creo que lo más importante de Nuxt, desde mi punto de vista, es un framework para construir aplicaciones web de pila completa, y está construido sobre Vue y sobre Nitro como componente del servidor.

2. Nuxt: Un marco de trabajo progresivo y colaborativo

Short description:

Nuxt es una plataforma progresivamente adaptable que mejora la experiencia del desarrollador y permite la personalización. Fue creado en octubre de 2016 por Sebastian Chopin y desde entonces ha evolucionado con nuevas versiones. Nuxt 3, lanzado en noviembre de 2022, introdujo cambios significativos para alinearse con Vue 3 y Webpack 5. Se espera que Nuxt 4 se lance en junio de 2024. Con más de 51,500 estrellas y 29 millones de descargas, Nuxt está impulsado por una vibrante comunidad de mantenedores y colaboradores de código abierto.

Lo más importante para mí es que es progresivo. La idea es que comienza con las mejores prácticas incorporadas tanto como sea posible, y luego se adapta a medida que creces. Entonces, a medida que desees cambiar las cosas, puedes hacerlo. Si necesitas personalizarlo, puedes hacerlo. Es una plataforma que esperamos mejore la experiencia del desarrollador, haciéndola intuitiva, pero sin limitarte cuando necesites hacer cambios.

Y Nuxt fue creado por primera vez en octubre de 2016 por Sebastian Chopin. Y puedes ver una pequeña línea de tiempo del proyecto. Las versiones 1 y 2 llegaron bastante rápido después de octubre de 2016. Comenzamos a trabajar en la versión 3 en 2020. Vue se había actualizado a la versión 3, que es un gran cambio rompedor. Webpack se había actualizado a la versión 5, otro cambio rompedor. Y luego, a mitad de la construcción de la versión 3, salió Vite, que era un constructor completamente nuevo con una increíble DX. Así que la versión 3 tardó bastante tiempo. Se lanzó en noviembre de 2022. Y ahora estamos en camino a la versión 4, que esperamos que salga en junio de 2024.

Nuxt, estamos mostrando estas cifras, solo para decir, son en cierto modo métricas de vanidad. No son muy precisas porque esta es solo la estadística de NPM o GitHub, pero tenemos 51,500 estrellas, 29 millones de descargas y estamos viendo un aumento en la adopción. Entonces, el 62% de las instalaciones de Nuxt ahora están en Nuxt 3 en comparación con Nuxt 2. Estas son cifras en tiempo real, por cierto. Así que cada vez que veo esta diapositiva, es un poco diferente. Y tenemos una gran cantidad de personas que hacen que Nuxt sea lo que es. En realidad, esta es una cifra mucho más importante que las descargas de NPM porque Nuxt es en gran medida un producto de la comunidad y el ecosistema. Entonces, no estamos patrocinados por una gran corporación. Todo el equipo que construye Nuxt son mantenedores de código abierto, al igual que nuestra comunidad. Y nuestra dirección y lo que creamos y cómo lo construimos está muy influenciado por lo que necesitamos como un esfuerzo de la comunidad. Y honestamente, es una de las cosas más agradables de Nuxt y de colaborar con personas de la comunidad de código abierto. Y eso es la amistad y camaradería que tenemos como parte de la comunidad. Y hay más de 680 colaboradores.

QnA

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 is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
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
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
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
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
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 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.

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 Kuznetsov
Mikhail Kuznetsov
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)
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
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.