Arquitectura de complementos: cómo TypeScript nos permite pintar por números

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Agregar una nueva funcionalidad a una base de código desconocida puede ser extremadamente lento. ¿Qué tal si pudieras confiar en TypeScript para guiarte?

En Snyk, la arquitectura de complementos es un patrón común para extender el soporte de lenguaje en diferentes productos y bases de código. Agregar TypeScript a la mezcla nos ha permitido agregar nuevas funcionalidades rápidamente y puede ser tan simple como pintar por números cuando se trata de extender el código.

Acompáñame mientras creamos una biblioteca simple utilizando la arquitectura de complementos y seguimos las pistas de TypeScript para agregar una nueva funcionalidad.

This talk has been presented at TypeScript Congress 2022, check out the latest edition of this JavaScript Conference.

FAQ

Lilia es una gerente de ingeniería en Snyk y lidera el equipo de servicios técnicos.

Lilia se encontró con el desafío de tener que entender repentinamente cada administrador de paquetes y sistema de gestión de control de código fuente existente al unirse al equipo de ecosistemas.

El equipo liderado por Lilia necesitaba extender continuamente el soporte para diversas herramientas y versiones, lo que incluía mantenerse al día con las migraciones de los clientes y el propio crecimiento de Snyk.

Se desarrolló una arquitectura de plugins que consta de un sistema central y módulos de plugins que interactúan a través de una interfaz predefinida.

TypeScript permitió identificar y gestionar errores específicos al registrar nuevos plugins, facilitando así el proceso de desarrollo al definir claramente las funciones y tipos necesarios.

La arquitectura de plugins permitió acelerar el tiempo de incorporación al equipo, ya que los nuevos miembros podían empezar a contribuir más rápidamente al enfocarse en áreas específicas definidas por la arquitectura.

Lili Kastilio
Lili Kastilio
15 min
29 Apr, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Cuando nos enfrentamos a desafíos en el soporte de múltiples administradores de paquetes y mantenernos al día con el crecimiento, implementar una arquitectura de complementos puede ayudar. La extensión de una interfaz de línea de comandos (CLI) para sistemas de control de versiones como GitHub y GitLab se puede hacer utilizando TypeScript y Oclef CLI. Los errores de TypeScript se pueden resolver agregando propiedades faltantes e implementando funciones requeridas para los complementos. El soporte de múltiples repositorios siguiendo los errores de TypeScript y teniendo la configuración correcta puede reducir el tiempo de producción y la incorporación. La arquitectura de complementos con TypeScript puede ser una herramienta valiosa para un desarrollo y una incorporación más rápidos en los repositorios.

1. Introducción a los Desafíos y la Arquitectura de Plugins

Short description:

Hola. Mi nombre es Lilia y soy una gerente de ingeniería en Snyk. Cuando comencé en Snyk, tenía poco entendimiento de los desafíos que se avecinaban. Necesitábamos soportar múltiples administradores de paquetes y mantenernos al día con nuestro propio crecimiento. Para acelerar el soporte, implementamos una arquitectura de plugins. Con TypeScript, pudimos seguir la pista de los errores para ayudarnos.

Hola. Mi nombre es Lilia y soy una gerente de ingeniería en Snyk que lidera el equipo de servicios técnicos. Cuando comencé en Snyk hace aproximadamente cuatro años, tenía muy poco entendimiento de los desafíos que tendría por delante. Después de liderar un equipo de ingeniería que construía sitios web predefinidos en una pequeña agencia, mis expectativas eran que Snyk sería similar, pero tal vez más desafiante. Y ciertamente no estaba preparada para tener que entender de repente cada administrador de paquetes, como un registro y un sistema de gestión de control de código fuente que se haya construido alguna vez. Y todo esto porque me uní al equipo de ecosistemas.

Recuerdo que una de las primeras características fue agregar soporte para npm6. Esta es la primera vez que npm introdujo archivos de registro. Así que esto agregó un nuevo sabor de npm a la plataforma. Luego vinieron Yarn, Yarn Workspaces, Gradle, Go, diferentes sabores de Go, Kotlin, SPT, Cocoapods. Parecía ser una corriente interminable de administradores de paquetes y herramientas que necesitaban ser soportados. Y a veces las nuevas versiones eran completamente incompatibles con las versiones anteriores y requerían reescribir completamente el soporte.

No solo necesitábamos extender el soporte y mantenernos al día con los clientes que migraban a todas estas diferentes herramientas y versiones, también necesitábamos mantenernos al día con nuestro propio crecimiento. Nuevos miembros del equipo se unen todo el tiempo, y la incorporación al código puede llevar tiempo, ya que es complejo. Una vez que hemos agregado soporte para el administrador de paquetes una o dos veces, comenzamos a ver algunos patrones, y luego podemos acelerar. Sin embargo, cuando un nuevo miembro del equipo se une, tienen que comenzar desde cero, y les lleva otras 2 o 3 veces antes de comenzar a ver esos mismos patrones que tú. Así que necesitábamos pensar en cómo acelerar. A medida que el soporte llevaba más tiempo, a veces se pasaban por alto ciertas áreas del producto donde se necesitaba extender el soporte. Así que necesitábamos acelerar, pero también necesitábamos asegurarnos de cubrir cada área del producto donde se necesitaba extender el soporte. Necesitábamos una arquitectura de plugins.

La arquitectura de plugins consta de dos componentes principales, el sistema central y los propios módulos de plugins. Y los plugins interactúan con el sistema central a través de una interfaz predefinida. En ese momento, teníamos algo de eso en su lugar, pero no en la medida que queríamos. Con algo de tiempo, pudimos comenzar a ver cuál es la responsabilidad del sistema central y cuál es la responsabilidad de los plugins. Sin embargo, algunos de estos comportamientos aún pueden ser bastante confusos. Así que también tienes un poco de desafío allí. Entonces, cuando se presentó una oportunidad para construir una nueva biblioteca, utilizando la arquitectura de plugins, pudimos utilizar lo que aprendimos al introducir TypeScript muy temprano en nuestra aplicación, así como lo que aprendimos y las partes que nos gustaron y no nos gustaron de nuestra arquitectura de plugins existente. Y pudimos juntar todos nuestros aprendizajes y crear algo nuevo e intentarlo de nuevo. Y descubrimos que con una configuración inicial, podíamos apoyarnos en TypeScript y seguir la pista de los errores de TypeScript para ayudarnos. Así que veamos un ejemplo para entender cómo puedes seguir los errores de TypeScript como pistas.

2. Extending CLI for Source Control Management

Short description:

Vamos a extender un CLI llamado el Asistente de Gestión de Control de Origen (SEM Helper) para trabajar con diferentes sistemas de gestión de control de origen como GitHub y GitLab. El CLI tiene un comando llamado Describir GitHub, que proporciona información simple sobre un repositorio, como si está bifurcado o archivado. El código está configurado utilizando TypeScript y Oclef CLI, con directorios separados para comandos y plugins. El comando describir GitHub carga el plugin de GitHub y llama a su función de descripción. El plugin utiliza la biblioteca de reposo OctoKit para realizar llamadas a la API de GitHub. También tenemos un archivo de índice y tipos que nos permiten admitir otros SCM como GitLab.

Vamos a extender un CLI que proporciona alguna funcionalidad simple relevante para trabajar con diferentes sistemas de gestión de control de origen, herramientas como GitHub y GitLab. Así que vamos a sumergirnos.

Entonces, nuestro ejemplo de hoy es un CLI realmente simple llamado Asistente de Gestión de Control de Origen. Lo llamaremos SEM Helper abreviado. Así que echemos un vistazo aquí y básicamente tenemos un comando llamado Describir y estamos llamando a Describir GitHub y luego espera un par de parámetros, el propietario y el repositorio. Así que estamos tratando de describir un repositorio. Así que si le damos un propietario y un repositorio también, estamos devolviendo información muy simple, si el repositorio está bifurcado y si está archivado también.

Así que si lo vemos conceptualmente, básicamente tenemos un sistema central que puede decir repo.describe, por ejemplo. Y luego tenemos un conjunto de plugins que se pueden llamar, en este caso, es específicamente GitHub. Y devolvemos algunos metadatos muy simples, por ejemplo, para verdadero, archivado, falso. Así que vamos a entrar en el código y echemos un vistazo a lo que hemos configurado aquí.

Es una configuración muy simple, básica, lista para usar, siguiendo la documentación de TypeScript. Verás aquí que tenemos un índice de origen y estamos usando Oclef CLI. Así que no tenemos que preocuparnos por el análisis de parámetros ni nada de eso. Verás que también hay un directorio de comandos, así como un directorio de plugins de librería. En los comandos aquí, tenemos describir GitHub, que es lo que acabas de ver ejecutándose. Y en describir GitHub, tiene algunos argumentos, tiene un ejemplo, una descripción y la funcionalidad principal aquí es cargar un plugin, cargar un plugin de GitHub, y luego estamos llamando a plugin.describir y enviándole el repositorio y eso. Y eso es todo. Y luego en los plugins de librería, hay un directorio de GitHub en el que hay un poco de código, que es obtener credenciales y luego la llamada a la API de descripción en sí. Así que necesitamos poder obtener el token y luego estamos llamando en este caso, OctoKit rest, que es una biblioteca de GitHub y llamando al repositorio específico para obtener la información que queremos. Así que echemos un vistazo de nuevo dentro de los plugins. También tenemos un archivo de índice y tipos. Así que en el archivo de índice, verás que hay nuestra función de carga de plugin y toma un tipo de SCM, que son todos los SCM admitidos. Este es un enum de todos los SCM admitidos. Y queremos poder admitir también GitLab. Así que hagámoslo. Así que vamos a agregar y registrar GitHub así como GitLab como un plugin admitido aquí. Así que vamos a decir, GitLab equals GitLab. De acuerdo, y veamos qué pasa. Así que ahora que hemos hecho eso, verás que hay en nuestro archivo de carga de plugin en ese índice.

3. TypeScript Errors and GitLab Plugin Implementation

Short description:

Tenemos un par de errores de TypeScript relacionados con propiedades faltantes en el tipo. Necesitamos agregar los equivalentes de repositorio y organización de GitLab, así como registrar GitLab como un plugin. Sin embargo, también necesitamos implementar dos funciones requeridas, obtener credenciales y describir, para el plugin. Una vez que completemos estas piezas faltantes, podemos verificar si los errores se resuelven.

Tenemos un par de errores de TypeScript. Y verás lo mismo si ejecutas npm run build. Así que tenemos tres lugares donde ahora tenemos un error. Y dice que falta la propiedad GitLab en el tipo pero es requerida. Así que aquí puedes ver que se espera que llenemos el nombre de la entidad con la que estamos tratando. Entonces, para GitHub es un repositorio, para GitLab también es un repositorio. Así que agreguemos eso, repositorio de GitLab.

Bien, luego el tipo de entidad principal para GitHub es la organización. Así que para GitLab también necesitamos el equivalente que también es organización. Y el último es los plugins. Así que aquí tenemos un tipo que básicamente dice que cada SCM admitido debe registrarse aquí como un plugin. Así que registremos nuestro nuevo plugin de GitLab. Y parece que ahora tenemos que crear un archivo para que GitLab tenga plugins.

Bien, hagámoslo. Así que en GitLab index, exportemos nada. Solo un objeto vacío por ahora. Y registremoslo aquí. Y veamos qué obtenemos. Bien, eso está todo hecho. Oh espera, hay un error aquí. ¿Qué no le gusta? Oh, perfecto. Nos está diciendo que nos faltan dos funciones que son requeridas para cada plugin. Una llamada obtener credenciales y otra llamada describir. Y puedes ver que están definidas aquí. Así que cada una de estas debe ser una performance a la interfaz cliente SCM, donde necesitamos tener una función llamada obtener credenciales que devuelva credenciales de una forma determinada, así como la función describir que devolverá si está archivado o bifurcado. Y hasta que completemos esto y devolvamos el tipo correcto, este error no desaparecerá. Entonces, básicamente, al registrar un nuevo tipo de plugin que se va a admitir, TypeScript nos ha indicado los tres lugares donde necesitábamos registrar o tener una implementación específica de GitLab. E incluso cuando hemos agregado solo un plugin básico, no fue suficiente porque hemos definido una interfaz. Por lo tanto, se espera que devolvamos la información correcta. Así que vamos a implementar todas las partes faltantes, y luego veamos si todos los errores han desaparecido.

4. Soporte de GitHub y GitLab con TypeScript

Short description:

Ahora soportamos tanto los repositorios de GitHub como los repositorios de GitLab siguiendo los errores de TypeScript y teniendo la configuración correcta. Registrar la funcionalidad necesaria con tipos permite agregar fácilmente nuevos plugins. Solo necesitas saber dónde registrar el soporte para el nuevo plugin. Al hacer estas cosas simples, puedes reducir el tiempo de producción y unirte al repositorio más rápido. Prueba la arquitectura de plugins con TypeScript en tu próximo proyecto.

Ahora que hemos agregado todo el código necesario para que GitLab también funcione llamando a las API relevantes de GitLab, podemos ejecutar una CLI con el comando describe-gitlab como puedes ver, y estamos obteniendo los mismos resultados. Así que ahora soportamos tanto los repositorios de GitHub como los repositorios de GitLab. Y todo esto siguiendo un par de errores, realmente de TypeScript.

Entonces, ¿cómo pudimos hacer eso? El truco estaba realmente en tener la configuración correcta, donde cualquier variable, cualquier funcionalidad que necesite provenir del plugin debe registrarse como requerida. Así que tenemos nuestros SCM admitidos. Y verás que lo estamos usando en todas partes donde esperamos que la funcionalidad se extienda para el SCM. Así que aquí en el nombre de la entidad, aquí en el nombre de la entidad principal, aquí en el propio plugin. Y para el plugin, hemos tipado lo que se espera. Así que tenemos toda la interfaz escrita. Tenemos las funciones esperadas que debe implementar, que son obtener credenciales y describir. También podemos extender y agregar una nueva función que debe implementar. Tal vez sea un delete para eliminar el repositorio. Y tan pronto como hagamos eso, vamos a obtener errores de TypeScript en todos los plugins, porque ahora estos plugins ya no se ajustan a la interfaz definida.

Entonces, al tener la configuración correcta de antemano y asegurarse de registrar toda la funcionalidad necesaria con tipos, puedes registrar un nuevo plugin y luego seguir la pista de los errores de TypeScript para completar los espacios en blanco. Y eso significa que solo necesitas saber el lugar donde debes agregar el nuevo plugin como registrado, como admitido. Y no necesitas leer el resto del código porque ya tienes interfaces definidas que puedes implementar y completar los espacios en blanco. Así que no es necesario entender cómo funciona el plugin de GitHub, no es necesario entender cómo funciona el código principal del sistema también. Siempre y cuando sepas dónde registrar el soporte para el nuevo plugin. Al hacer estas cosas simples, pudimos agregar el plugin sin profundizar demasiado en el funcionamiento interno del código principal. Así que puedes reducir el tiempo de producción porque si sabes exactamente en qué parámetros necesitas escribir el código, las funciones que necesitas implementar, qué devuelven esas funciones, dónde se usan esas funciones, en qué caso aquí TypeScript te lo dirá. Entonces no necesitas familiarizarte con el código principal en absoluto. Preparar todo esto de antemano cuando estás configurando la arquitectura del repositorio tiene enormes beneficios más adelante, y puedes reducir el tiempo de incorporación al repositorio. No es necesario aprender cómo funciona todo el código en conjunto antes de poder contribuir a él. Solo necesitas aprender las áreas necesarias si te apoyas en TypeScript, y si realmente necesitas cambiar el código principal del sistema, puedes familiarizarte con él en ese momento. Así que te pido que ahorres tiempo para ti mismo en el futuro. Prueba la arquitectura de plugins con TypeScript en tu próximo proyecto. Gracias. ♪MÚSICA♪

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

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Los tipos más útiles de React
React Day Berlin 2023React Day Berlin 2023
21 min
Los tipos más útiles de React
Top Content
Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.
Entendiendo la Arquitectura Fiber de React
React Advanced 2022React Advanced 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Thinking Like an Architect
Node Congress 2025Node Congress 2025
31 min
Thinking Like an Architect
Top Content
In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
TypeScript y React: Secretos de un matrimonio feliz
React Advanced 2022React Advanced 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
Featured Workshop
Josh Goldberg
Josh Goldberg
TypeScript tiene un sistema de tipos poderoso con todo tipo de características sofisticadas para representar estados de JavaScript salvajes y extravagantes. Pero la sintaxis para hacerlo no siempre es sencilla, y los mensajes de error no siempre son precisos al decirte qué está mal. Vamos a profundizar en cómo funcionan muchas de las características más poderosas de TypeScript, qué tipos de problemas del mundo real resuelven, y cómo dominar el sistema de tipos para que puedas escribir código TypeScript verdaderamente excelente.
IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced 2022React Advanced 2022
148 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.