Diseño de un Componente

A continuación vamos a crear un componente de interfaz de usuario (UI) tipo sorttable. La idea es que este nos permita agregar/eliminar un registro, implemente un paginator y también pensar el soporte para sorting y filter. Esquemáticamente: De ahora en más, hablamos de DateTable component.

La API

En general algo que cuesta mucho incorporar a nuestros hábitos es pensar nuestros proyectos en su máxima amplitud sin siquiera escribir una sola línea de código, por más chico que este sea. Y en el caso particular de un componente debemos pensar el alcance que este debe tener, de qué y de qué no debe hacerse cargo. Debemos someternosa la idea de que este componente puede ser utilizando en escenarios tan dispares como la tecnología lo permita. Debe ser lo suficientemente flexible como para que pueda ser implementado como un widget de wordpress o ser parte de una interfaz de usuario creada con express.js.

Un componente es autosuficiente. Debe ser capaz de auto soportar todas sus características sin la necesidad de recursos externos.

yo

DateTable(options)

Crea una instancie de DateTable component con las siguientes opciones:

  • cols {Array} columnas de la taba
  • rows {Array} array de filas de la tabla
  • sort {Object}
  • page {Number}
  • perpage {Number}
  • filterBy {String}

Métodos

  • DateTable#add()
  • DateTable#remove()
  • DateTable#load()
  • DateTable#sort()
  • DateTable#filter()
  • DateTable#page()

Emisión de Eventos

  • add-row
  • remove-row
  • sort
  • filter
  • pager

Iniciamos component

Si no tenemos instalado componentejecutamos:

> npm install -g component

Una vez hecho esto creamos una carpeta con el nombre del componente y ejecutamos create:

> mkdir data-table
> component create data-table
 
repo (username/project): retrofox/data-table
description: DataTable component. it allow us add/remove rows, supports paginator, sorting and filter.
does this component have js? yes
does this component have css? yes
does this component have html? yes
 
      create : data-table
      create : data-table/index.js
      create : data-table/template.html
      create : data-table/data-table.css
      create : data-table/Makefile
      create : data-table/Readme.md
      create : data-table/.gitignore
      create : data-table/component.json

Este component necesita js, css h html. En este momento ya contamos con la estructura básica de nuestro component. Iremos explicando cada uno de estos archivos a medida que avancemos con las distintas secciones.

Análisis de Dependencias

Los componentes sean unidos Porque esa es la ley primera – Tengan unión verdadera En cualquier tiempo que sea – Porque si entre ellos conflictúan Los devoran los framworks.

yo, con la ayuda del Martín Fierro

Uno de los puntos esenciales de component es el soporte de dependencia con otros componentes.  Por eso es importante conocer los publicados actualmente para consumir aquellas características ya implementadas. Existe un listado en una wiki de component. Tengamos en cuenta que es una tecnología en pleno desarrollo por lo que día a día este listado y muchas otras características irán evolucionado. It’s evolution, baby. Tambien podemos acceder a un search de components a través de la CLI de component.

> component search

En fin, haciendo un rápido análisis de nuestras dependencias, y observando los componentes actuales vamos a depender inicialmente de:

  1. component/inherit
  2. component/emitter
  3. visionmedia/superagent
  4. component/pager
  5. component/jquery

Las dependencias de nuestro componente se definen dentro de component.json. La idea es muy similar a package.json. Dentro de dependenciesagregamos:

{
  "name": "data-table",
  "repo": "retrofox/data-table",
  "description": "Table data manager. It allow us add/remove rows, sort, pager, and filter.",
  "version": "0.1.0",
  "keywords": [],
  "dependencies": {
    "component/inherit": "*",
    "component/emitter": "*",
    "visionmedia/superagent": "*",
    "component/pager": "*"
  },
  "development": {},
  "scripts": [
    "index.js",
    "template.js"
  ],
  "styles": [
    "data-table.css"
  ]
}

Building

Pensemos que el resultado final de nuestro componente es UN solo archivo javascript, que por convención se ha denominado build.js. Este archivo compilado incluye: nuestro componente, todas sus dependencias (y las dependencias de las dependencias!) y el propio core de component. Por eso, cada modificación en el sistema implica que debemos regenerar el archivo compilado. Los archivos generados por el compilador son almacenados en la carpeta build/ en la raiz de nuestro componente, la cual incluye build.js y build.css. Las dependencias son descargadas desde el repositorio de components y almacenadas en la carpeta components/ si aún no han sido descargadas. Dentro del component contamos con el archivo Makefilecon las reglas básicas para administrar la compilación:

  • make: descarga dependencias y genera build.js
  • make clean: borra archivos compilados y las dependencias
  • make all: Ambos acciones

La última regla `make all`no viene por defecto dentro de Makefile. La he agregado porque me gusta usarla cuando necesito actualizar las dependencias. Vamos un pantallazo de nuestro primer ‘make all’:

clear
make clean
rm -fr build components template.js
make

         install : component/inherit@master
         install : component/emitter@master
         install : visionmedia/superagent@master
         install : component/pager@master
             dep : component/emitter@0.0.6
         install : component/emitter@0.0.6
             dep : component/emitter@master
         install : component/emitter@master
             dep : component/jquery@master
         install : component/jquery@master
           fetch : visionmedia/superagent:index.js
           fetch : visionmedia/superagent:lib/superagent.js
           fetch : component/inherit:index.js
           fetch : component/pager:index.js
           fetch : component/pager:template.js
           fetch : component/pager:pager.css
           fetch : component/emitter:index.js
           fetch : component/emitter:index.js
           fetch : component/jquery:index.js
        complete : component/inherit
        complete : component/emitter
        complete : component/emitter
           fetch : component/emitter:index.js
        complete : component/jquery
        complete : component/pager
        complete : component/emitter
        complete : visionmedia/superagent

Test

El último paso que haremos antes de empezar a construir el core de nuestro componente es implementar un archivo de test. En este caso y dado la naturaleza de nuestro componente nuestro test será una pequeña página con un par de ejemplos.

  1. Creamos una carpeta test
  2. Creamos un archivo html básico que incluya la hoja de estilo y el javascript compilado.
  3. Agregamos código javascript incluyendo nuestro componente.

Codeando

Llegamos al punto de comenzar a codear nuestro componente.

Agregamos dependencies

var inherit = require('inherit')
  , o = require('jquery')
  , request = require('superagent')
  , pager = require('pager');

 

Componentes

Traducción libre del artículo de TJ Holowaychuk de Components

Componentes

Con la llegada en cantidad de gestores de paquetes JavaScript del lado del cliente, quería escribir algunas de mis ideas acerca de la fragmentación que tenemos hoy en día, y algunos aspectos que creo realmente pueden mejorar la disposición de paquetes a la comunidad. Tenga en cuenta que estas son sólo mis opiniones, todo el mundo ha hecho un gran trabajo y hay un montón de desarrollos excelente dando vuelta por ahí.

Continue reading