Componentes

Cómo reusar código

Como programadores sabemos que copiar y pegar código es nuetro pan de cada día y por eso simplificamos nuestro trabajo con librerías, módulos y componentes

Un componente es un grupo de código JS y etiquetas HTML que realiza una sola función y que puede ser copiado o incluido junto con otros componentes para simplificar el diseño de páginas web, por ejemplo:


<!-- mywebpage.html -->
<!DOCTYPE html>
<html>
<head>
    <title>My Web App</title>
</head>
<body>
  <header>
    My Company here
  </header>

  <content>
  :
  Content here
  :
  </content>

  <footer>
    @contact us
    @follow us
  </footer>
</body>
</html>

Inclusión de componentes

Al diseñar varias páginas nos damos cuenta que el mismo encabezado y pié de página es repetido en cada una de ellas. Y si agregamos un nuevo estilo o una nueva imagen al encabezado (como un logo) entonces tendremos que ir a cada una de las páginas y cambiarlo, haciendo el trabajo tedioso. Vamos a simplificarlo con componentes:


<%- include('head') %>

  <content>
  :
  Content here
  :
  </content>

<%- include('foot') %>

Y los componentes serán guardados en archivos head.ejs y foot.ejs (extensión .ejs para identificar componentes)


<!-- head.ejs -->
<!DOCTYPE html>
<html>
<head>
    <title>My Web App</title>
</head>
<body>
  <header>
    My Company here
  </header>
        

<!-- foot.ejs -->
  <footer>
    @contact us
    @follow us
  </footer>
</body>
</html>

Datos en componentes

Tambien podemos usar datos en componentes, de esta manera se podrán actualizar cuando los datos cambian y el componente se podrá reutilizar en diferentes páginas. Por ejemplo, creamos un componente employees.ejs que muestra la lista de registros, asi:


<!-- employees.ejs -->
  <table>
    <tr><th>Id</th><th>Name</th><th>Phone</th><th>Salary</th></tr>
    <% if (list.length > 0) { %>
      <% for(item of list){ %>
        <tr>
          <td><%=item.id%></td>
          <td><a href="/employee/<%=item.id%>"><%=item.name%></a></td>
          <td><%=item.phone%></td>
          <td><%=item.salary%></td>
        </tr>
      <% } %>
    <% } else { %>
        <tr>
          <td colspan="4">Employees not found</td>
        </tr>
    <% } %>
  </table>

Y lo usamos así, pasando los datos al componente:


<%- include('head') %>

  <content>

  <%- include('employees', {list}) %>

  </content>

<%- include('foot') %>

Y nuestra vida como programador se hace mucho más fácil