¿Qué es un componente?

En este punto, deberíamos tener un cierto background sobre los frameworks Javascript existentes más populares, que en su mayoría tienen una base importante: construcción de componentes.

Al igual que para organizar información cambiante usamos variables y para simplificar múltiples acciones utilizamos funciones, necesitamos estructuras que nos permitan organizar cómodamente varios aspectos del desarrollo web, de modo que sea cómodo, práctico y fácil trabajar con ellos. Es justo ahí, donde aparece el concepto de componente.

Componentes

Los componentes nos permiten organizar tres aspectos fundamentales en el Front-end (facilitando su reutilización en aplicaciones o componentes más grandes):

• Estructura e información (Marcado o código HTML)
• Aspecto visual (Apariencia o código CSS)
• Funcionalidad (Lógica o código Javascript)

Cada uno de los frameworks Javascript existentes tienen su forma de definir y entender los componentes, con sus respectivas prioridades y enfoques. Sin embargo, la idea básica es crear un fichero (o varios) que definan estos tres conceptos y nos permitan utilizarlo como una etiqueta HTML para simplificar su uso.

Observa la siguiente estructura de archivos, donde en una carpeta components/ tenemos varios archivos, un HTML, un CSS y un Javascript:

+ components/
      BaseHeader.html
      BaseHeader.js
      BaseHeader.css

Cada uno de estos ficheros tiene uno de los aspectos fundamentales de los que hablamos antes. Esto facilita mucho al programador el enfocarse en una característica concreta de su aplicación, y una vez terminada, aislarse de ella y continuar con el resto. Así pues, una vez creado este componente, podremos reutilizarlo en secciones de nuestro sitio o aplicación web, haciendo referencia a su nombre mediante una etiqueta HTML:

<BaseHeader></BaseHeader>

La etiqueta <BaseHeader> no es una etiqueta HTML real, por lo que el framework interpreta que debe existir un componente BaseHeader (con su código HTML, CSS y Javascript), lo importa y lo cambia por el código del componente.

Esto nos permite ir creando componentes como capas de abstracción, de modo que simplificamos todo en componentes y nos resulta muchísimo más sencillo desarrollar, hacer cambios o mantener nuestro código.

Parámetros

Además, los componentes suelen permitir pasar parámetros a través de props (atributos HTML) que podrán obtenerse desde dentro del componente y reutilizarse, haciéndolos más flexibles y potentes para utilizar en múltiples casos:

<BaseHeader data="40"></BaseHeader>

Sin embargo, esto lo explicaremos más adelante, puesto que la implementación y forma de utilizar props suele variar de un framework a otro (incluso llamarse o ser cosas diferentes). De la misma forma, la comunicación entre distintos componentes, es algo fundamental que también suele variar y realizarse de formas variadas y muy diferentes dependiendo del framework.

En Vue la forma de trabajar con estos componentes son los ficheros SFC, o lo que es lo mismo, los ficheros .vue, que incluyen el HTML, CSS y Javascript y permiten crear componentes y reutilizarlos. En el siguiente artículo veremos como se utilizan.