Vue Amsterdam 2022: Parte VIII - The Nuxt Web

¡Bienvenidos! Feliz de verlos en la séptima parte de mi serie de resúmenes de Vuejs Amsterdam Conference 2022, en la que comparto un resumen de todas las charlas con ustedes.

Puede leer mi serie de resúmenes de la JSWorld Conference 2022 (en cuatro partes) aquí , donde resumí todas las charlas del primer día. También puede encontrar las charlas anteriores de la conferencia Vue Amsterdam 2022 en mi blog.

(Recurrente) Introducción

Después de dos años y medio, JSWorld y Vue Amsterdam Conference volvieron al Theatre Amsterdam entre el 1 y el 3 de junio, y tuve la oportunidad de asistir a esta conferencia por primera vez. Aprendí muchas cosas, conocí a mucha gente maravillosa, hablé con grandes desarrolladores y la pasé muy bien. El primer día se llevó a cabo la JSWorld Conference, y el segundo y tercer día, la Vue Amsterdam.

La conferencia estuvo llena de información con grandes oradores, cada uno de los cuales me enseñó algo valioso. Todos querían compartir sus conocimientos e información con otros desarrolladores. Entonces pensé que sería genial si pudiera continuar compartiéndolo y ayudar a otros a usarlo.

Al principio, traté de compartir algunas notas o diapositivas, pero sentí que no era lo suficientemente bueno, al menos no tan bueno como lo que el orador compartió conmigo. Así que decidí volver a ver cada discurso, profundizar en ellos, buscar, tomar notas y combinarlos con sus diapositivas e incluso con sus palabras exactas en su discurso y luego compartirlo con ustedes para que lo que les comparto sea al menos al mismo nivel que lo que aprendí de ellos.

Un punto muy importante

Todo lo que lee durante estos pocos artículos es el resultado del esfuerzo y el tiempo del propio hablante, y solo he tratado de aprenderlos para poder convertirlos en estos artículos. Incluso muchas de las oraciones escritas en estos artículos son exactamente lo que dijeron o lo que escribieron en Diapositivas. Esto significa que si aprendes algo nuevo, es gracias a sus esfuerzos.

Por último, pero no menos importante, es posible que no profundice en todos los detalles técnicos o codificaciones en vivo en algunos de los discursos. Pero si está interesado y necesita más información, hágamelo saber e intentaré escribir un artículo más detallado por separado. Además, no olvide consultar su Twitter/Linkedin.

Aquí puede encontrar el programa de la conferencia.

La Web de Nuxt

Sebastien Chopin - Co-Fundador de Nuxt

Nuestra misión en @nuxtlabs es brindar la mejor experiencia de desarrollador para brindar la mejor experiencia de usuario a sus usuarios finales. Estamos haciendo esto con Nuxt desde hace seis años.

Nuxt es un marco web para crear cualquier tipo de aplicación Vue. Eso significa que puedes hacer:

• Representación lateral de servidor (SSR)
• Generación de sitios estáticos (SSG)
• Representación del lado del cliente (CSR)
• Edge Side Rendering (ESR) gracias a Nuxt 3

Desde el comienzo de Nuxt en octubre de 2016, se ha descargado unas 46 millones de veces en npm, tiene 300 000 sitios web activos y 18 000 colaboradores de GitHub.

Una comparación entre Nuxt 2 y Nuxt 3

• Servidor web: para el servidor web de desarrollo y producción, utiliza Nuxt 2 para conectarse, que es el núcleo de Express.js, pero para Nuxt 3 crearon h3 y funciona en cualquier tipo de entorno de JavaScript.

• Bundler : Webpack 4 se usa en Nuxt 2, y para Nuxt 3 comenzaron con Webpack 5, pero después del lanzamiento de Vite, se admite oficialmente como Bundler predeterminado.

• Marco de interfaz de usuario: Vue 2 en Nuxt 2 y Vue 3 en Nuxt 3

• Biblioteca de enrutamiento: Vue Router 3 en Nuxt 2 y Vue Router 4 en Nuxt 3, que no se incluirán si no se encuentran pages/ directorio.

• Gestión meta: dado que Nuxt hace SSR, es importante poder administrar las etiquetas meta. Vue Meta se usa en Nuxt 2 y VueUse Head en Nuxt 3.

• Empaquetador de servidor (sin): esto se introdujo en Nuxt 3, que compacta la aplicación nuxt para la producción eliminando los node_modules para que su aplicación Nuxt tenga aproximadamente 1 megabyte.

Esta es una comparación del tamaño del paquete hello world entre Nuxt 2 y Nuxt 3:

Una de las razones por las que Nuxt 3 es mucho más pequeño es que se puede mover en árbol, como Vue 3. Por lo tanto, si no usa una función, no se incluirá en el paquete.

El tamaño de paquete equivalente de Next es de alrededor de 80 kB.

En ese paquete Nuxt 3 JS, 25.3kB son de Vue, y los 8.7kB restantes incluyen:

• App de entrada con hidratación
• Componente raíz con <Suspense>
• Enrutador universal y ligero: useRouter() , middleware y <NuxtLink>
• Head componible y componentes: useHead() , <Title> , <Meta> , <Script> , …
• Obtención universal de datos: $fetch()
• Páginas de error predeterminadas: 404 y 500
• Plugins y lógica runtimeConfig
• useNuxtApp() componible y enlaces: app:created , app:mounted , page:start , …

Representación lateral del borde

Edge Side Rendering, también denominado contenedores de JavaScript por Ryan Dahl, es la capacidad de ejecutar JavaScript en los nodos de CDN en algún lugar del mundo cerca del usuario final.

Las ventajas:

• Ejecuta milisegundos de los usuarios finales
• 0ms arranques en frio
• No hay servidores para mantener
• Escalado automático
• Asequible

Algunos de los proveedores de Edge Computing en este momento:

• Trabajadores de CloudFlare
• Vercel borde
• borde netlify
• Deno implementar
• Borde lambda
• StackPath

Contenido V2

Nuxt Content es un módulo de Nuxt que lee archivos Markdown, YAML, CSV y JSON en el directorio content/ para crear una poderosa capa de datos para su aplicación y Content V2 ya está disponible con más funciones.

Nuxt 2.X

Lo que viene para Nuxt 2.X:

• Vue 2.7
• Puente Nuxt (beta)
  • Vite
  • nitro
  • Configuración de script y API de composición
  • Mecanografiado
  • CLI de nuxi
  • Publicar CSS 8

Nuxt 3.0

Lo que viene para Nuxt 3.0:

• Imagen siguiente
• Renderizado híbrido: Servidor + SWR + Pre-renderizado
• Generación estática completa
• Modo de vista previa
• Sesiones de servidor y autenticación
• Trabajadores de servicios (PWA)
• Ayudantes de SEO y soporte i18n

Fin de la Octava Charla

Espero que hayas disfrutado esta parte y que pueda ser tan valiosa para ti como lo fue para mí. Durante los próximos días, compartiré con ustedes el resto de las charlas. Manténganse al tanto…

También publicado aquí .