Creando mi primera biblioteca de código abierto Vue 3

Rate this content
Bookmark

Aprende cómo crear una biblioteca de Vue.js y qué mejores prácticas debes seguir. También aprenderemos sobre el código abierto y cómo trabajan los mantenedores. Hablaremos sobre xState, la API de composición y estrategias de prueba que incluyen Cypress y Vue test utils!

FAQ

Es crucial pensar en la API que usarás, como Options API o Composition API, y en el método de construcción, como Vue CLI o Vite. También debes decidir entre usar JavaScript o TypeScript y considerar la compatibilidad con otros frameworks mediante JSX.

Los requisitos incluyeron asegurar la accesibilidad cumpliendo con WCAG 2.1 AA, mantener un tamaño de paquete pequeño, y la reutilización de código entre Vue, React y Angular. Además, era fundamental que el proyecto fuera probado y utilizara buenas prácticas de Vue 3.

XState fue elegido porque proporciona una gestión de estado basada en máquinas de estados finitos que puede integrarse fácilmente en Vue, React y Angular, permitiendo compartir lógica de estado de manera eficiente.

Se utilizó un enfoque de desarrollo impulsado por la documentación, documentando características antes de implementarlas y validando con pruebas de extremo a extremo usando Cypress y Cucumber. Esto aseguró que la documentación y las características implementadas fueran correctas y funcionales.

Se crearon horas de oficina en Discord para interacción directa, se hicieron lanzamientos etiquetados en GitHub para pruebas de desarrolladores y se mantuvo el código fuente completamente abierto desde el inicio para fomentar la participación de la comunidad.

Se aprendió la importancia de las pruebas de extremo a extremo para detectar problemas temprano, el beneficio de TypeScript para acelerar el desarrollo y la necesidad de equilibrar entre pruebas unitarias y de extremo a extremo para una cobertura de prueba más eficaz.

Se reescribió el componente Authenticator utilizando librerías nativas para cada framework (Vue, React, Angular), asegurando que el aspecto y funcionamiento fueran idénticos en todas las plataformas, y se redujo el número de dependencias externas para optimizar el tamaño del paquete.

Erik Hanchett
Erik Hanchett
27 min
15 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Hablemos sobre Vue 3 y la creación de tu primera biblioteca de código abierto. Discutiremos las elecciones de diseño, un ejemplo personal de la creación de una biblioteca de código abierto Vue 3, la comunidad y el código abierto, lecciones aprendidas y puntos clave para crear un proyecto de código abierto. También cubriremos la construcción de una biblioteca Vue 3, el proyecto Authenticator y sus requisitos, compartir código y mejores prácticas, el uso de Xstate para la gestión del estado, las mejores prácticas de Vue 3, estrategias de prueba, la apertura del código y la retroalimentación de la comunidad, el desarrollo basado en documentación, desafíos y mejoras, y el plan de trabajo para el futuro.

1. Introducción a Vue 3 y Open Source

Short description:

Hablemos de Vue 3 y de cómo crear tu primera biblioteca de código abierto. Discutiremos las elecciones de diseño, un ejemplo personal de creación de una biblioteca de código abierto en Vue 3, la comunidad y el código abierto, lecciones aprendidas y conclusiones clave para crear un proyecto de código abierto.

Hablemos de Vue 3 y de cómo crear tu primera biblioteca de código abierto. Así que hay algunos objetivos que quiero tener para esta charla hoy. Vamos a hablar de las elecciones de diseño y los requisitos, y voy a hablar de un ejemplo personal de cómo creé una biblioteca de código abierto en Vue 3 en los últimos años. Vamos a hablar de la comunidad y el código abierto y cómo lidiar con eso. Vamos a ver algunas lecciones aprendidas que he tenido a lo largo de todo este proceso, cosas que hubiera hecho de manera diferente y cosas que salieron muy bien. Y luego tendré una conclusión y algunas cosas que puedes tener en cuenta si vas a crear un proyecto de código abierto.

2. Building a Vue 3 Library

Short description:

Pensemos en cómo construir una biblioteca de Vue 3. Hay varias formas de construir aplicaciones modernas de Vue 3, como Vue CLI y Vite. Puedes elegir entre JavaScript o TypeScript, Options API o Composition API, y Pina o XState. Aunque Vue 3 a menudo utiliza plantillas, puedes usar JSX en una biblioteca de código abierto. Tomar las decisiones correctas no siempre es obvio y requiere compromisos.

Así que hagamos un pequeño experimento mental antes de seguir adelante. Imaginemos que quieres crear una biblioteca de Vue 3. Digamos que estás en un equipo, tienes algunas utilidades, tienes algo que quieres abrir y poner en el mundo para que cualquiera pueda contribuir. ¿En qué cosas debes pensar al crear esta biblioteca de código abierto? ¿Y qué cosas debes tener en cuenta? Básicamente, pensemos en cómo deberías construirla.

Hay algunas formas de construir aplicaciones modernas de Vue 3 hoy en día. Tenemos Vue CLI, aunque no se recomienda, pero puedes usarlo. Y está Vite. Hay JavaScript o TypeScript. Hay Options API o Composition API. Hay Pina o XState. Y luego está JSX. Una cosa a tener en cuenta es que aunque estés usando Vue 3, que a menudo utiliza estas plantillas, puedes, ya que estás utilizando una biblioteca de código abierto, usar algo como JSX. Porque mucha otra gente conoce JSX si vienes de React u otro framework que lo utiliza, es bastante popular. E incluso Vue.ify lo utiliza en su biblioteca de código abierto. Así que tienes que tomar algunas de estas decisiones. Al final del día, la respuesta correcta no siempre es obvia. No siempre es obvio cuál es lo correcto o lo incorrecto, y tienes que hacer algunos compromisos, y puede que no sea exactamente la respuesta correcta al final del día.

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
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.
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!
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
Rust es un nuevo lenguaje para escribir código de alto rendimiento, que puede ser compilado a WebAssembly, y ejecutado dentro del navegador. En esta charla se te guiará sobre cómo puedes integrar Rust, dentro de una aplicación Vue, de una manera que es sencilla y fácil. Con ejemplos de cómo interactuar con Rust desde JavaScript, y algunas de las trampas a tener en cuenta.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
El creador de Vue js da una actualización sobre las nuevas características de la tecnología.
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
¿Cuántas veces has implementado el mismo flujo en tu aplicación: verificar si los datos ya se han obtenido del servidor, si es así - renderizar los datos, si no - obtener estos datos y luego renderizarlos? Creo que lo he hecho más de diez veces yo mismo y he visto la pregunta sobre este flujo más de cincuenta veces. Desafortunadamente, nuestra biblioteca de gestión de estado predeterminada, Vuex, no proporciona ninguna solución para esto.Para la aplicación basada en GraphQL, había una alternativa para usar el cliente Apollo que proporcionaba herramientas para trabajar con la caché. Pero, ¿qué pasa si usas REST? Afortunadamente, ahora tenemos una alternativa de Vue a una biblioteca de react-query que proporciona una buena solución para trabajar con la caché del servidor. En esta charla, explicaré la distinción entre el estado de la aplicación local y la caché del servidor local y haré algo de codificación en vivo para mostrar cómo trabajar con este último.

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.
Construyendo APIs GraphQL sobre Ethereum con The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Construyendo APIs GraphQL sobre Ethereum con The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph es un protocolo de indexación para consultar redes como Ethereum, IPFS y otras blockchains. Cualquiera puede construir y publicar APIs abiertas, llamadas subgrafos, para hacer que los datos sean fácilmente accesibles.

En este masterclass aprenderás cómo construir un subgrafo que indexa datos de blockchain de NFT del contrato inteligente Foundation. Desplegaremos la API y aprenderemos cómo realizar consultas para recuperar datos utilizando diferentes tipos de patrones de acceso a datos, implementando filtros y ordenamiento.

Al final del masterclass, deberías entender cómo construir y desplegar APIs de alto rendimiento en The Graph para indexar datos de cualquier contrato inteligente desplegado en Ethereum.
Práctica con AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Práctica con AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Comienza con AG Grid React Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado una cuadrícula de datos AG Grid React y la habrás personalizado con componentes funcionales de React.- Comenzando e instalando AG Grid- Configurando ordenamiento, filtrado, paginación- Cargando datos en la cuadrícula- La API de la cuadrícula- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la cuadrícula con componentes de React
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