8 opciones para nuestros componentes/librerías reutilizables

Debido a los continuos cambios tecnológicos y las transformaciones digitales, cada vez se llevan a cabo más proyectos tecnológicos o migraciones. Esto está provocando que sea obligatorio el uso de componentes reutilizables para reducir el coste y mejorar la calidad del desarrollo.

Desde las medianas a las grandes empresas, desarrollan cada año multitud de aplicaciones y/o secciones nuevas y siempre intentando aplicar patrones de desarrollo como DRY, KISS, YAGNI, etc. Esto conlleva, entre otras cosas, el evitar repetir las mismas tareas y código en el mismo proyecto y en otros proyectos. Para ello están utilizando en la mayoría de los casos:

• CSS Frameworks
• JS Frameworks
• Librerías de componentes
• Webcomponents
• Componentes reutilizables
• Librerías reutilizables

Dentro del listado anterior, nos centraremos en que tecnologías nos permiten crear componentes reutilizables, facilitándonos la tarea en nuestras Arquitecturas orientadas a componentes.

    

• Lit Element
• Angular Elements
• Ng library
• Stencil
• Javascript
• Vaadin
• Polymer
• X-Tag

Según el framework o librería en que estemos basando nuestro proyecto, las dependencias que ya tengamos incluidas, el conocimiento de tecnologías de nuestro equipo, nos interesará utilizar una u otra. Incluso en algunos casos, utilizando directamente javascript a través de los webcomponents, nos bastará.

Pero esto no bastará, dado que para facilitar su utilización en proyectos garantizando una calidad mínima deberemos aplicar un flujo de trabajo, que nos garantice dichos componentes:

En el ejemplo anterior, podemos apreciar un flujo de integración continua con un proyecto Angular, que finalizaría con una publicación del componente en un repositorio privado NPM en Nexus.

La definición y selección del uso adecuado de componentes reutilizables, marcará en gran medida la velocidad de desarrollo, mantenibilidad y calidad del software de nuestros proyectos. 

 

Bibliografía:

• https://lit-element.polymer-project.org/
• https://www.polymer-project.org/
• https://angular.io/guide/elements
• https://angular.io/guide/creating-libraries
• https://stenciljs.com/
• https://www.webcomponents.org/introduction
• https://getbootstrap.com/
• https://www.primefaces.org/primeng/#/
• https://valor-software.com/ngx-bootstrap/#/
• https://foundation.zurb.com/
• https://material.angular.io/
• https://x-tag.github.io/
• https://vaadin.com/
• https://www.sonatype.com/nexus-repository-sonatype
• https://angular.io/