Construyendo Bibliotecas Vue Compatibles con Versiones Anteriores

Rate this content
Bookmark

Muchas organizaciones con bibliotecas de componentes están trabajando en actualizaciones para sus aplicaciones Vue 2 para poder soportar Vue 3. ¡A veces no es fácil! Idealmente, podrías escribir tu código una vez y compilarlo para diferentes entornos de ejecución de Vue. En esta charla, haremos exactamente eso. Al final, tendrás una receta para enviar bibliotecas que admitan tanto Vue 2 como Vue 3.

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

FAQ

Stencil es un compilador que permite construir componentes web de manera agnóstica y luego enviarlos a diferentes equipos y frameworks, facilitando la interoperabilidad y reutilización de componentes.

Los principales desafíos incluyen manejar las incompatibilidades entre versiones, actualizar bibliotecas y componentes a la nueva versión, y asegurar que todo el código funcione correctamente post-migración.

El ponente sugiere el uso de un monorepo con pnpm workspaces para manejar distintas versiones, permitiendo un desarrollo y pruebas más eficientes y organizados.

Las pruebas son fundamentales para asegurar que las APIs sean compatibles y funcionales en ambas versiones, usando herramientas que puedan ejecutarse en versiones múltiples para garantizar la compatibilidad.

Las regulaciones de la FDA requieren que los repositorios delimiten los diferentes requisitos por aplicación web, lo que puede complicar la gestión de código y pruebas.

El ponente aconseja construir y probar componentes pensando en múltiples versiones, utilizando técnicas como código compatible y reutilización de configuraciones de herramientas de compilación y pruebas para facilitar la compatibilidad.

Jessica Sachs
Jessica Sachs
31 min
12 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla aborda los desafíos de actualizar a Vue 3 y mantener ramas de Vue 2 y Vue 3 en una biblioteca de componentes. Explora estrategias para enviar bibliotecas y usar monorepos, así como desarrollar código compatible con versiones anteriores. El orador enfatiza la importancia de probar e implementar componentes, y destaca los desafíos de admitir múltiples versiones de Vue. La charla concluye con una demostración de malabarismo y una discusión sobre el estado de fin de vida de Vue 3.

1. Introducción a Vue y Mi Experiencia

Short description:

Hola, buenos días. ¿Cuántas personas usan Vue en producción? ¿Cuántas personas están cansadas? La próxima charla es genial. Ajusto mis charlas a las personas en la sala. Estaba construyendo una biblioteca. ¿Cuántas personas están en una migración de Vue 2 a 3? Mi caso es el peor caso. ¿Estamos construyendo aplicaciones o bibliotecas? En esta charla, vamos a cambiar de tema. Un poco sobre mí.

♪♪♪ Hola, hola, hola, hola. Muy bien, buenos días. Quiero decir, buenas tardes. ¿Cómo... Muy bien, vamos a hacer el gesto de las manos. Así que prepárense. Preparen sus manos. ¿Cuántas personas usan Vue aquí en producción? Ahí vamos. Y esto es para asegurarme de que estén despiertos. ¿Cuántas personas están cansadas? Sí, ha sido largo. Yo también. Pero estoy emocionado porque la próxima charla, después de la mía, es realmente genial. Así que hagamos la mía. Ajusto mis charlas a las personas en la sala. Así que cuando originalmente escribí esta charla, la escribí porque estaba construyendo una biblioteca. Estaba construyendo un sistema de diseño de componentes. Manos. Muy bien, tengo manos. ¿Cuántas personas están en una migración de Vue 2 a 3? Sí. Sí. ¿Es divertido? No. ¿Sí? Sí, no, es horrible. Así que mi caso es, creo que en realidad el peor caso de una migración de Vue 2 a 3. Y les mostraré la estructura de mi repositorio en un segundo. ¿La gente está construyendo aplicaciones? ¿Estamos construyendo aplicaciones o bibliotecas? Griten. Aplicaciones, muy bien. Así que en esta charla, vamos a cambiar de tema de lo que yo había planeado. Estas eran las preguntas que había planeado hacer. Un poco sobre mí. Tuve una muy buena introducción.

2. Trabajando en Ionic en el Compilador Stencil

Short description:

Trabajo a tiempo completo en código abierto en Ionic en el compilador Stencil. El compilador Stencil es una forma agnóstica de construir componentes web y enviarlos a múltiples equipos y frameworks. Anteriormente, trabajé en Cypress, donde construí el ejecutor de pruebas de componentes. He estado involucrado en el ecosistema de View JS durante varios años y ahora contribuyo a solid JS. Recientemente, volví al espacio de usuario para abordar los desafíos de las migraciones de View 2 a 3.

Trabajo a tiempo completo en código abierto en Ionic en el compilador Stencil. El compilador Stencil se supone que es una forma agnóstica de construir componentes web, en resumen, construir componentes web. Y luego enviarlos a múltiples equipos diferentes, diferentes frameworks. Suena genial. Entonces, los equipos A, B, C y D pueden escribir todos en Angular, React y View. Y el equipo del diseño del sistema no tiene que preocuparse, pueden escribir en este pequeño lenguaje meta. Eso es lo que hace Stencil.

He estado allí como cuatro semanas. Eso es todo lo que tengo. Anteriormente trabajé en Cypress. Trabajé en código abierto. ¿Han usado Cypress? Griten. ¡Woo! Sí, woo. Y construí el ejecutor de pruebas de componentes. También hice lo del núcleo de faker JS. Y he estado en el ecosistema de View JS durante un buen tiempo, tres, cuatro años. Y ahora soy un colaborador de solid JS. Me encanta la Reactividad. Así que ese soy yo.

Y luego tuve una breve temporada en el espacio de usuario nuevamente. Así que pasé de Cypress durante dos años y medio a Path AI en Boston. En realidad, en Cambridge. Lo llamo Cambridge falso, porque soy de los Estados Unidos. Y ustedes podrían ser de aquí. Entonces, en el espacio de usuario, como lo llamo yo, construir aplicaciones es diferente. Y sentí que quería reconectar. Quería reconectar después de estar en código abierto durante tanto tiempo. Pensé, ¿cuáles son los problemas reales que enfrentan las personas? Y la respuesta es, las migraciones de View 2 a 3. Me uní en julio de 2022. Y he pasado la mayor parte de ese tiempo, hasta las últimas cuatro semanas, en el espacio de usuario, tratando de migrar de View 2 a 3.

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

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.
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.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

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
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.
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
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
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.