La programación ha ido evolucionando con el pasar de los años. La programación secuencial fue la primera en llegar, en la que todo se escribía seguido en un solo archivo. Hoy en día la programación basada en componentes se está convirtiendo en un estándar, así que debemos aprenderlo bien.
Los Frameworks de programación modernos están implementando está forma de trabajo, ya que es muy adecuada cuando realizamos proyectos grandes. El uso de componentes permite hacer un mayor control a la hora de darle mantenimiento al software, ya que todo está bien dividido, podemos trabajar en un componente sin que afecte al resto de la aplicación.
¿Qué es un componente?
Un componente es básicamente una parte de software. Una clase que se puede asignar y re-usar las veces que querramos y donde querramos. Lo más importante es el hecho de que es completamente independiente del resto del programa. Imagina un puzzle grande, cada componente es una pieza.
Si una pieza hace falta, el puzzle sigue viéndose bien. La única diferencia puede ser que se vea incompleto, pero el software seguirá funcionando. En la mayoría de los casos, ya que podemos hacer componentes que sean base para otros.
La web ha sido la cuna de los componentes, con frameworks como Angular, React, Vue js, que se han vuelta tan populares en los últimos años. Es por eso que vamos a entender mejor el uso de los componentes analizando un sitio web, en este caso una página de Facebook:
Cada uno de los recuadros de colores que vez podría ser un componente. El cual puede ser actualizado independientemente. Es más, puede haber un equipo de programadores dedicados únicamente a mejorar cada uno de ellos. Por ejemplo, vamos a concentrarnos en un componente. Analizaremos la barra superior azul.
Como podemos ver en la imagen, toda la barra superior está marcado como un componente único. Pero no necesariamente puede ser así, la barra de búsqueda podría ser un componente por separado y los botones de la derecha también pueden ser otro componente. Todo queda a discreción del programador o del analista.
Uso correcto de un componente
Cuando vamos a diseñar un componente debemos pensar algunas cosas antes. Lo recomendable es organizar las ideas y ordenar las dependencias. Es decir, separar por funciones, no necesariamente por ubicación.
Las cosas relacionadas que pueden depender unos de otros debemos agruparlos en componentes con un mismo padre. Es decir, si el componente será usado para navegar por el sitio (como lo hace la barra superior de Facebook) podemos incluir ahí los botones que nos permitan ir a otros lugares.
También podríamos poner ahí la barra de búsqueda que cumple la misma función. Esto nos permite usar el componente una sola vez. A pesar de poder usarse muchas veces, por cuestiones de carga no tiene sentido cargarlo en diferentes lugares si podemos cargarlo en uno solo.
Ese es básicamente el principio que debe guiarte cuando diseñas un software basado en componentes para hacerlo de forma eficiente.
¿Cómo crear un componente?
Esto depende del lenguaje de programación o del frameworks que este utilizando, pero en todos los casos funcionan similar. Por ejemplo en Angular los puedes crear usando un comando en de consolar ( esto si tienes instalado el AngularCLI ). El comando para crear componente en Angular es:
ng g c directorio/nombre
Cuando usamos «ng» nos referimos a AngularCLI, la «g» se refiere a generar, «c» ser refiere a componente. En al parte del directorio es por si queremos guardar el componente en un directorio específico dentro del proyecto. El nombre es como se llamará el componente. Al ejecutar este comando se creará una carpeta en el directorio que hayamos escrito.
La carpeta creada va a contener dentro de ella 4 archivos que forman el componente:
- micomponente.component.css
- micomponente.component.html
- micomponente.component.spec.ts
- micomponente.component.ts
En la imagen podemos ver un elemento que se llama inicio, así que se creo una carpeta llamada inicio y dentro tiene los 4 archivos que forman el componente. Los 4 elementos juntos forman un todo. Todos los archivos están conectados, el CSS para los estilos, el HTML es el template y el TS hace le papel de Javascript (Angular trabaja con TypeScript).
Usar el componente en otros lugares del proyecto
Una vez creado el componente, debemos usarlo. En Angular basta con usar una etiqueta personalizada que es generada en el TS del componente, en este caso sería algo como <app-inicio></app-inicio> con eso podrás ver el componente donde quieras.
Dentro del TS del compente en cuestión, podrás ver la etiqueta que debes usar solo busca:
@Component({
selector: "app-micomponente",
...
...
})
El selector es lo que debes usar como etiqueta en el html del componente donde quieres verlo.
Muy bien. Creo que ya son demasiados «componentes» por hoy. Vamos a dejarlo hasta aquí por hoy. Recuerda que puedes buscar más información, los equipos de todos los frameworks trabajan constantemente y regularmente hay modificaciones. Como buen programador debes mantenerte informado. Un abrazo y hasta la próxima.
Imagen por: http://informatica.alexlatorre.com/