En este taller nos enfocaremos en la creación y extensión de la librería Kendo UI utilizando Angular 17. Este taller también es aplicable a Material, ya que muchas personas utilizan ambas librerías en sus proyectos. La idea es abordar problemas comunes que enfrentan los desarrolladores al crear componentes repetitivos, como los típicos componentes «card». Veremos cómo evitar problemas de copy-paste y crear componentes reutilizables de manera eficiente.
La necesidad de una librería
Muchos desarrolladores se encuentran creando los mismos componentes en diferentes proyectos. Por ejemplo, un componente «card» que se necesita en una aplicación de contabilidad y luego en una aplicación bancaria. El problema común es que se tiende a copiar y pegar el código de un proyecto a otro, lo cual lleva a problemas de mantenimiento y consistencia. Crear una librería resuelve estos problemas al permitir la reutilización de código de manera organizada y eficiente.
Beneficios de una librería
Crear una librería ofrece varias ventajas:
- Facilidad de uso: Los componentes encapsulados en una librería se pueden utilizar en múltiples proyectos, ahorrando tiempo y esfuerzo.
- Consistencia: Al compartir el mismo código fuente entre diferentes proyectos, se asegura que todos los productos de una empresa mantengan el mismo aspecto y comportamiento.
- Colaboración: Todos los desarrolladores pueden acceder a las herramientas y componentes de la librería, facilitando el trabajo en equipo y reduciendo errores.
Creación de un workspace en Angular
Para comenzar, debemos crear un workspace en Angular. Esto se hace con el comando ng new seguido del nombre de nuestro proyecto. En este caso, podemos utilizar el nombre «Donweb». Al crear el workspace, especificamos que no queremos incluir una aplicación por defecto, ya que nuestra intención es crear una librería.
Generación de la librería
Dentro del workspace, utilizamos el comando ng generate library para crear nuestra librería. Es importante darle un nombre significativo y un prefijo que identifique claramente los componentes que pertenecen a la librería. En nuestro ejemplo, utilizamos «DonwebUI» con el prefijo «donweb».
Creación de componentes
Una vez creada la librería, podemos comenzar a generar componentes. Utilizamos el comando ng generate component para crear un componente llamado «Button». Este componente tendrá una propiedad label que se podrá personalizar mediante un @Input.
Publicación de la API
Para que los consumidores de nuestra librería puedan utilizar nuestros componentes, debemos exponerlos en la Public API de la librería. Esto se hace modificando el archivo public-api.ts para incluir nuestro componente.
Compilación y empaquetado
Compilamos la librería utilizando el comando ng build. Esto generará los archivos compilados en el directorio dist. Luego, utilizamos npm pack para empaquetar la librería en un archivo .tgz que podemos compartir o instalar localmente en otros proyectos.
Instalación y uso de la librería
Para utilizar nuestra librería en otro proyecto, copiamos el archivo .tgz al nuevo proyecto y lo instalamos con npm install. Luego, importamos el componente desde la librería y lo utilizamos en nuestro proyecto.
Implementación de temas
Para hacer que nuestros componentes soporten diferentes temas, utilizamos propiedades CSS personalizadas. Definimos variables CSS para los colores y estilos que queremos permitir personalizar, y luego creamos selectores específicos que aplican estas variables basándose en atributos de datos.
Conclusión
Crear una librería en Angular no es tan complicado y ofrece numerosos beneficios en términos de reutilización de código, consistencia y colaboración. En la próxima parte del workshop, veremos cómo extender nuestra librería para incluir más componentes y cómo manejar de manera eficiente el versionado y la publicación en NPM.
