Con este artículo queremos presentar "dile-components", el catálogo de componentes que hemos realizado desde EscuelaIT / DesarrolloWeb.com y que venimos utilizando en éstos y otros proyectos web.

Qué es dile-components

El proyecto "dile components" es una biblioteca de componentes listos para usar en cualquier sitio web. Ofrece diversas utilidades (básicas y no tan básicas) frecuentes en el desarrollo de aplicaciones para la web, con Javascript, por supuesto.

La característica más importante de los componentes dile-components es que los puedes usar en cualquier proyecto Javascript, ya lo estés desarrollando con VanillaJS o frameworks como Angular, React, Vue, etc. Esto es así por que todos los componentes están basados en el estándar de Web Components, por lo que en el fondo son como cualquier etiqueta nueva de HTML, o lo más parecido al Javascript nativo.

Todos los dile components están documentados para que los puedas usar con facilidad en tus proyectos. Puedes encontrar más información en el sitio web de dile-components

¿Por qué usar dile-components?

Existen muchos motivos por los que podrás desear usar estos componentes, el más obvio sería porque te pueden ahorrar muchas horas de desarrollo, en comparación a si los tuvieras que realizar por tu cuenta.

Pero además podemos destacar estas ventajas:

• Los puedes usar en cualquier lugar donde puedas usar Javascript
• Los hemos desarrollado para que se puedan adaptar a cualquier diseño. Mediante CSS Custom Properties eres capaz de cambiar los estilos de los componentes.
• Son muy ligeros. Solo unas pocas Kb por componente, sin cargas innecesarias, lo que te asegurará que tu proyecto siga bien optimizado.
• Son muy fáciles de entender. El desarrollo de los componentes se ha mantenido sencillo y asequible para cualquier persona que necesite entender su código o incluso extenderlos para crear otros componentes especializados.
• Son completamente gratuitos, por supuesto!!

¿Qué obtienes con dile-components?

Lo que ofrecemos son una colección de packages de npm que puedes instalar bajo demanda en cualquier proyecto. Cada componente viene en un package independiente, por lo que instalarás comúnmente sólo aquellos que vas a necesitar.

Una vez que tienes el componente instalado en tu proyecto solamente necesitas importarlo y usarlo con la correspondiente etiqueta del componente. Encuentras elementos para hacer todo tipo de interfaces y utilidades como:

• Botones
• Campos de formulario
• Datepicker
• Animaciones de carga
• Menús
• Navegadores
• Tooltips
• Y muchas otras cosas…

Además, tienes toda una serie de mixins genéricos para resolver cosas típicas en las aplicaciones web, como manejar formularios, hacer efectos, crear scroll suavizado, crear y posicionar menús emergentes y muchas otras cosas.

¿Quienes usan dile-components?

Buena parte de este catálogo de componentes lo hemos desarrollado entre profesores y estudiantes de EscuelaIT, pero muchos de los componentes son en realidad fruto del trabajo de desarrollo frontend realizado durante años en sitios como DesarrolloWeb.com o Escuela.IT.

Cada vez que vemos un componente de utilidad general que ya hemos desarrollado en un sitio web y lo necesitamos usar en otros proyectos lo incorporamos a dile-components para mantenerlo y mejorarlo de manera centralizada. Así pues, la mayoría de los componentes están puestos en producción, ya sea en DesarrolloWeb, EscuelaIT y en otros proyectos realizados por profesionales de nuestro equipo como ges.com.es o guiarte.com.

Para poder organizar el software libre basado en Web Components hemos creado la organización de GitHub "Polydile", en la que encuentras muchos otros proyectos útiles o simples pruebas de concepto. Dile Components es nuestra mayor contribución al mundo del software libre y lo mantenemos con especial cariño.

¿Cómo puedes usar tú también dile-components?

Para usar los custom elements de dile-components puedes leer su documentación y en cada componente encontrarás instrucciones paso a paso para poder usar los componentes. Pero básicamente siempre serán estos tres pasos:

• Instalar el package correspondiente con npm. Puedes ver el comando de instalación en la página de documentación de cada componente.
• Importar el componente, por medio de la correspondiente sentencia import. Por supuesto, el import para usar cada componente está en la propia página de documentación de ese componente.
• Usar el componente con su correspondiente etiqueta HTML. Tienes diversos ejemplos de uso de cada componente en la propia página de documentación ya para cada componente en particular.

Toda la documentación con ejemplos de código para cada elemento la tienes en esta web: https://dile-components.polydile.com

Video tutorial de uso de dile-components

De todos modos, para que sirva de ayuda por si alguien tiene alguna duda sobre cómo se implementan estos componentes, os dejamos un vídeo donde puedes ver todo el proceso de uso de los dile-components.