nicosommi

software engineer

posts

slides

about

Crear un componente javascript y open source de calidad en minutos

July 17, 2015
3 min read

Read this article in english

Ir al componente en npm

Hace unos meses con el equipo en Free All Media empezamos a construir un proyecto javascript que rapidamente fue creciendo en lineas de codigo y en lo que en ese momento llamabamos componentes, pero que consistia en una coleccion de carpetas con archivos javascript en ellas. Teniamos la certidumbre al iniciar que ibamos a componentizar la aplicacion en algun momento, pero todavia no sabiamos cuando esto iba a ser apoyado por las prioridades del negocio.

Luego de un tiempo, llego el momento de crear un nuevo set de servicios, que tenian componentes en comun con el set de servicios anterior. Entonces fue donde ocurrio el suceso: la necesidad de compartir componentes con al menos un proyecto.

En ese momento se nos presento un problema clasico ingenieril de eficacia y eficiencia. Teniamos alrededor de 15 componentes distintos, y sabiamos que el mejor camino para tomar era el de hacer un componente distinto en cada uno de ellos en lugar de acoplar sus responsabilidades y hacer componentes “magicos”. Siempre procuramos intentar ir por el mejor camino que podemos visualizar, entonces no dudamos en ir por alli. Pero el negocio no estaba tan contento de gastar tanto tiempo en crear 15 componentes en lugar de 1 por una simple cuestion de orgullo profesional (con todas las garantias de calidad que un componente necesita para estar a la altura del resto de los componentes de la organizacion, que mas adelante detallo).

Hablando en numeros, cada componente manualmente tardaria en inicializarse varias horas, dependiendo la funcionalidad del mismo. Fue entonces que negociamos con el negocio y decidimos hacer un generador de componentes en lugar de hacerlos individualmente, con el objetivo de optimizar por completo el tiempo de desarrollo de los patrones que se repetian.

Este generador tiene la responsabilidad de inicializar un componente open source con una serie de caracteristicas deseables para los mismos:

  • Un readme acorde, con las secciones y badges deseables
  • test coverage
  • integracion continua
  • calidad de codigo
  • chequeo de dependencias
  • tareas de compilado
  • testeo de compatibilidad con browsers
  • compatibilidad con standards ECMA 6 y 5
  • archivos de linting
  • muchos mas caracteristicas por venir: comportamiento mas complejo, mas integraciones y mejores preguntas

Por suerte este componente dio rapidamente el resultado esperado y si bien esta en sus primeras versiones y con implementaciones muy particulares, nos es de muchisima utilidad, ya que en lugar de varias horas, ahora conseguimos un componente listo para utilizar y con un monton de caracteristicas de calidad listas en cuestion de minutos. Sabemos que la funcionalidad debido a la infinidad de opciones muy probablemente ira incrementandose con el tiempo y haciendo de este componente algo todavia mas completo y detallado aun.

Desde luego el componente para generar componentes open source de calidad es tambien un componente open source generado por si mismo (se creo primero el componente open source basico y una vez lograda una mediana calidad del mismo, se “piso” consigo mismo). De hecho, para conseguir una mayor eficiencia a lo largo del tiempo con los componentes que se generen con este generador, se sugiere no tocar a mano los artefactos generados por el mismo (aunque hoy en dia es necesario para ciertas cosas en particular, en un futuro no deberia serlo).

En definitiva creo que vale el aporte a la comunidad, y este post es una humilde sugerencia e invitacion para que lo adopten aquellos que quieran generar un componente con diversas caracteristicas adicionales tan solo contestando unas simples preguntas y sobre todo en unos pocos minutos.

Como se utiliza?

Lo mas recomendado es leer el README pero basicamente:

  1. creas tu repositorio en github
  2. lo linkeas en coveralls y en travis (basico para integracion continua y test coverage)
  3. si queres en las otras herramientas que se soportan en la aplicacion y que se deseen utilizar.
  4. (si no tenes yeoman instalado) npm install -g yo bower grunt-cli gulp
  5. npm install -g generator-oss-component
  6. inicialiar repo en github, ir a la carpeta y tipear: yo oss-component
  7. contestar las preguntas usando las credenciales si son necesarias para las posibles integraciones
  8. comenza a codear
  9. despues, ejecuta travis setup npm asi tu componente se autopublica

Si no la encontras estas invitado a contrubuir desde luego, abriendo issues o enviando pull requests.

nico
Copyright by nicosommi 🥑