002. Estructura de Proyecto (assets, helpers y components)

Las SPA son un estilo, una forma, un paradigma de programar, como tal, no necesitamos más teoría, y podemos comenzar a hacer una SPA. Lo que vamos a necesitar para crear nuestras SPAs es:

  • Saber manipular muy bien el DOM, teniendo claros los conceptos de gramática y estructura del lenguaje.
  • Dominar la programación asíncrona y las peticiones con AJAX, FETCH, Axios.
  • Entender lo que es un API REST.

La teoría, como vemos, es un cúmulo de todos los conocimientos que hemos ido viendo en capítulos anteriores de este curso.

Nota: a nuestros SPAs les importan poco en qué esté programado o como está hecho el backend mientras este le exponga la información en una API (normalmente en formato JSON), las SPA pueden trabajar por sí solas.

Vamos a trabajar un ejercicio en el que vamos a hacer una SPA que consuma los datos de la información de un sitio hecho en WordPress. Vamos a crear un Home típico de WordPress donde venga una tarjeta por cada uno de los artículos que estemos consumiendo, y cuando demos clic a esa tarjeta, accederemos al contenido de dicho artículo o post, pero lo vamos a hacer con la técnica de la SPA.

En este capítulo vamos a ver como vamos a crear la estructura de carpetas de nuestro SPA, como vamos a desarrollar los componentes, los códigos auxiliares, y cuando pasemos de este Home al contenido de los artículos, vamos a cambiar la URL con la ayuda del hash (#) para que, si un usuario quiere guardar esa URL en sus favoritos, pueda hacerlo sin problema.

En nuestro servidor web crearemos una carpeta denominada spa, donde incluiremos todos los archivos y carpetas. El primer archivo que crearemos será el típico index.html, que será el archivo que cargará de contenido nuestra SPA. Dentro de la carpeta spa crearemos otra carpeta denominada app, donde va a estar concentrada toda la aplicación de nuestro proyecto. Esta carpeta a su vez tendrá otras subcarpetas que van a ayudar a poder de manera organizada categorizar los diferentes archivos que va a tener nuestra SPA.

Dentro de nuestra carpeta app crearemos una subcarpeta denominada assets, donde vamos a introducir cualquier recurso que necesitemos para trabajar con nuestra aplicación, como son imágenes, vectores, hojas de estilo en cascada. Esto en otras herramientas los ponen como la carpeta public. Adicionalmente a esta carpeta assets, crearemos otra denominada components, También, dentro de nuestra carpeta app, crearemos una carpeta denominada helpers (auxiliares), que son todos esos códigos que no son componentes visuales, pero que son fragmentos de código que nos ayudan a resolver algo en particular.

En la carpeta assets vamos a crear un archivo favicon para el favicon.png de nuestra SPA, y un archivo vectorial llamado loader.svg. También vamos a incluir los estilos CSS, creando un archivo style.css. Por el momento, las carpetas components y helpers quedarán vacías.

En la carpeta app vamos a crear dos archivos importantes, que son App.js. El archivo está escrito con UpperCamelCase, como si fuera un clase, porque en React está escrito de esta manera, y otro archivo denominado index.js, que es el archivo principal Javascript, que va a desencadenar toda la programación de la SPA, y no se crea con UpperCamelCase porque es un archivo normal, no es un componente. App.js no se mete en la carpeta components porque éste representa el componente padre de los componentes de nuestra aplicación, y por norma, el componente padre (App.js) más el index.js se ponen en la carpeta padre (app) de nuestra aplicación.

El archivo index.js es el que desembocará la invocación hacia los otros componentes, manejaremos la delegación de los eventos. En App.js mandaremos a llamar a todos los componentes que necesitemos para pintar la interfaz de usuario.

Veamos la sintaxis de nuestro archivo index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanilla JS SPA</title>
    <link rel="stylesheet" href="app/assets/style.css" />
    <link rel="icon" href="app/assets/favicon.png" />
  </head>

  <body>
    <main id="root"></main>
    <script src="app/index.js" type="module"></script>
  </body>
</html>

Vamos a crear un primer componente en App.js, que es donde se va a cargar la aplicación, y que tendrá la siguiente sintaxis.

export function App() {
  document.getElementById(
    "root"
  ).innerHTML = `<h1>Bienvenidos a mi primer SPA con Vanilla Javascript</h1>`;
}

Y nuestro archivo index.js importará la función que hemos creado en App.js. Tendrá la siguiente sintaxis

import { App } from "./App.js";

const d = document;

d.addEventListener("DOMContentLoaded", App);

Esquema

  • spa
    • index.html
    • app
      • App.js
      • index.js
      • assets
        • favicon.png
        • loader.svg
        • style.css
      • components
      • helpers
Scroll al inicio