SPA - Crear una aplicación de una sola página

byMilton Rodriguez Lopez -

 


  Crear una aplicación de una sola página (SPA, por sus siglas en inglés) con múltiples componentes separados pero enlazados es totalmente posible utilizando HTML, CSS y JavaScript.

1. Estructura del Proyecto

Primero, organiza tu proyecto con una estructura clara:

/proyecto
|-- index.html
|-- /css
|   |-- estilos.css
|-- /js
|   |-- app.js
|   |-- rutas.js
|-- /componentes
    |-- inicio.html
    |-- acerca.html
    |-- contacto.html


2. Archivo index.html

Este será el archivo principal donde se cargará el contenido dinámico:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SPA - Ejemplo</title>
  <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <header>
    <nav>
      <a href="#inicio">Inicio</a>
      <a href="#acerca">Acerca</a>
      <a href="#contacto">Contacto</a>
    </nav>
  </header>
  <main id="contenido"></main>
  <script src="js/rutas.js"></script>
  <script src="js/app.js"></script>
</body>
</html>


3. Contenido de los Componentes

En la carpeta componentes, crea archivos como inicio.html, acerca.html y contacto.html con su contenido específico: 

<!-- inicio.html -->
<h1>Bienvenido a la Página de Inicio</h1>
<p>Este es el contenido principal.</p>


4. Archivo rutas.js

Define tus rutas en un archivo de JavaScript. Esto ayuda a vincular las rutas con sus componentes: 

const rutas = {
  inicio: "/componentes/inicio.html",
  acerca: "/componentes/acerca.html",
  contacto: "/componentes/contacto.html",
};


5. Archivo app.js

Aquí manejas la carga dinámica de los componentes según la ruta seleccionada: 

const contenido = document.getElementById("contenido");

const cargarComponente = async (ruta) => {
  try {
    const respuesta = await fetch(ruta);
    const html = await respuesta.text();
    contenido.innerHTML = html;
  } catch (error) {
    contenido.innerHTML = "Error al cargar el contenido.";
  }
};

window.addEventListener("hashchange", () => {
  const hash = window.location.hash.substring(1);
  const ruta = rutas[hash] || rutas["inicio"];
  cargarComponente(ruta);
});

// Cargar el componente inicial
cargarComponente(rutas["inicio"]);


6. Archivo estilos.css

Usa este archivo para definir los estilos de tu SPA:

body {
  font-family: Arial, sans-serif;
}
header {
  background: #333;
  color: #fff;
  padding: 10px;
}
nav a {
  color: #fff;
  margin-right: 10px;
  text-decoration: none;
}
nav a:hover {
  text-decoration: underline;
}

Cómo Funciona

  • El usuario selecciona un enlace (por ejemplo, #acerca).
  • El evento hashchange detecta el cambio en el hash de la URL.
  • JavaScript carga dinámicamente el contenido asociado desde la carpeta de componentes sin recargar la página completa.

Estructura modular

Una estructura modular y bien organizada es clave para el desarrollo exitoso de cualquier aplicación, ya que facilita la colaboración entre desarrolladores, administradores y usuarios finales. Aquí te presento una estructura recomendada a nivel internacional, utilizada frecuentemente en aplicaciones modernas: 

/mi-proyecto
|-- /public
|   |-- index.html
|   |-- favicon.ico
|-- /src
|   |-- /assets
|   |   |-- /images
|   |   |-- /icons
|   |   |-- /styles
|   |-- /components
|   |-- /pages
|   |-- /services
|   |-- /store
|   |-- /utils
|   |-- App.js
|   |-- index.js
|-- /config
|-- /tests
|-- .env
|-- package.json
|-- README.md
|-- /node_modules


Descripción de Cada Carpeta

  • /public: Aquí se almacena contenido estático que no será procesado por herramientas de construcción. Incluye archivos como:
    • index.html: Archivo raíz inicial de la aplicación.
    • favicon.ico: Ícono del sitio web.
    • Otros recursos estáticos, como imágenes que no cambian.
  • /src: Contiene todo el código fuente de la aplicación:
    • /assets: Archivos estáticos como imágenes, íconos, y estilos globales (CSS/SCSS).
      • /images: Imágenes para el proyecto.
      • /icons: Íconos personalizados o de librerías.
      • /styles: Estilos globales o variables CSS.
    • /components: Componentes reutilizables de la interfaz (botones, menús, etc.).
    • /pages: Vistas completas o páginas de la aplicación (como Inicio, Contacto, Dashboard).
    • /services: Lógica para interactuar con APIs externas o internas.
    • /store: Manejo del estado global (en frameworks como Redux, MobX).
    • /utils: Funciones utilitarias y herramientas comunes (como validaciones o formatos de fecha).
    • App.js: Componente principal que reúne la estructura de la aplicación.
    • index.js: Punto de entrada para renderizar la aplicación en el DOM.
  • /config: Archivos de configuración para el entorno, como archivos de despliegue o configuración de herramientas de compilación.
  • /tests: Pruebas unitarias, funcionales o de integración para garantizar la calidad del código.
  • .env: Variables de entorno que contienen información sensible o específica del entorno de ejecución, como claves API o URLs base.
  • package.json: Lista de dependencias del proyecto, scripts de construcción y metadatos.
  • README.md: Documento con información importante sobre el proyecto (cómo configurarlo, ejecutarlo, y más).
  • /node_modules: Dependencias del proyecto instaladas con npm o yarn. Generalmente no se toca directamente.

Beneficios de Esta Estructura

Mantenibilidad: Cada área del proyecto tiene su propia carpeta, lo que mejora la claridad.
Escalabilidad: Perfecta para proyectos que crecen con el tiempo.
Colaboración: Facilita la comunicación entre el administrador del proyecto y los desarrolladores, ya que todos saben dónde está cada cosa.
Reutilización: Componentes y funciones están aislados para su uso en distintas partes de la app.

Si estás trabajando con frameworks como React, Angular, o Vue, esta estructura modular es altamente compatible y adaptable.




Tags

Entradas que pueden interesarte

Artículo Anterior Artículo Siguiente