Frontend Guide.es - jjaroztegi/BuildingSignalSimulator GitHub Wiki

Guía del Frontend

🇬🇧 View in English

Descripción General

El frontend del Simulador de Distribución de Señal está construido utilizando HTML, JavaScript (ES6) y Tailwind CSS. Esta guía proporciona información detallada sobre la estructura del frontend, sus componentes y cómo trabajar con ellos.

Estructura de Archivos

webapp/
├── index.html              # Página principal
├── css/
│   └── tailwind.css       # Estilos de Tailwind
├── js/
│   ├── script.js          # Punto de entrada JavaScript
│   └── modules/           # Módulos JavaScript
│       ├── servlet.js     # Comunicación con API
│       ├── ui.js          # Componentes de UI
│       ├── forms.js       # Manejo de formularios
│       ├── tabs.js        # Sistema de pestañas
│       ├── theme.js       # Gestión de tema
│       └── utils.js       # Utilidades
└── assets/               # Imágenes y otros recursos

Componentes Principales

1. Sistema de Pestañas

El sistema de pestañas permite una navegación fluida entre diferentes secciones de la aplicación:

// Ejemplo de uso del sistema de pestañas
import { initTabs } from './modules/tabs.js';

const tabs = initTabs({
    container: '#tabContainer',
    onChange: (tabId) => {
        // Lógica de cambio de pestaña
    }
});

2. Formularios

Los formularios utilizan validación del lado del cliente y manejo de envío asíncrono:

// Ejemplo de manejo de formulario
import { initForm } from './modules/forms.js';

const configForm = initForm('#configForm', {
    onSubmit: async (data) => {
        // Envío de datos al servidor
    },
    validate: (data) => {
        // Validación de datos
    }
});

3. Comunicación con el Servidor

Todas las llamadas API se manejan a través del módulo servlet.js:

// Ejemplo de llamada API
import { api } from './modules/servlet.js';

const getComponents = async () => {
    try {
        const components = await api.get('/components');
        return components;
    } catch (error) {
        console.error('Error al obtener componentes:', error);
    }
};

Gestión de Estado

1. Estado Local

El estado local se maneja utilizando clases y módulos JavaScript:

// Ejemplo de gestión de estado local
class ConfigurationState {
    constructor() {
        this.currentConfig = null;
        this.components = [];
        this.subscribers = new Set();
    }

    update(newState) {
        Object.assign(this, newState);
        this.notify();
    }

    subscribe(callback) {
        this.subscribers.add(callback);
    }

    notify() {
        this.subscribers.forEach(callback => callback(this));
    }
}

2. Persistencia

Los datos persistentes se almacenan en localStorage:

// Ejemplo de persistencia
const saveConfiguration = (config) => {
    localStorage.setItem('currentConfig', JSON.stringify(config));
};

const loadConfiguration = () => {
    return JSON.parse(localStorage.getItem('currentConfig'));
};

Sistema de Tema

1. Modo Oscuro

El modo oscuro se implementa utilizando clases de Tailwind y el módulo theme.js:

// Ejemplo de cambio de tema
import { toggleTheme } from './modules/theme.js';

const themeToggle = document.querySelector('#themeToggle');
themeToggle.addEventListener('click', () => {
    toggleTheme();
});

2. Clases de Tailwind

Ejemplos de clases comunes utilizadas:

<!-- Ejemplo de componente con Tailwind -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
        Configuración
    </h2>
    <div class="mt-4 space-y-4">
        <!-- Contenido -->
    </div>
</div>

Manejo de Errores

1. Errores de API

Los errores de API se manejan de manera consistente:

// Ejemplo de manejo de errores
import { handleApiError } from './modules/utils.js';

try {
    await api.post('/configurations', data);
} catch (error) {
    handleApiError(error, {
        400: 'Datos de configuración inválidos',
        500: 'Error del servidor'
    });
}

2. Feedback al Usuario

Implementación de notificaciones y mensajes de error:

// Ejemplo de notificación
import { showNotification } from './modules/ui.js';

showNotification({
    message: 'Configuración guardada exitosamente',
    type: 'success',
    duration: 3000
});

Optimización de Rendimiento

1. Carga Diferida

Implementación de carga diferida para módulos grandes:

// Ejemplo de carga diferida
const loadCalculationModule = async () => {
    const { calculate } = await import('./modules/calculation.js');
    return calculate;
};

2. Caché

Implementación de caché para recursos frecuentes:

// Ejemplo de caché
const componentCache = new Map();

const getComponent = async (id) => {
    if (componentCache.has(id)) {
        return componentCache.get(id);
    }
    const component = await api.get(`/components/${id}`);
    componentCache.set(id, component);
    return component;
};

Guías de Estilo

1. JavaScript

  • Usar ES6+ features
  • Preferir const sobre let
  • Usar async/await para código asíncrono
  • Documentar funciones complejas

2. HTML

  • Usar elementos semánticos
  • Mantener accesibilidad
  • Seguir BEM para clases personalizadas

3. CSS

  • Usar utilidades de Tailwind
  • Minimizar CSS personalizado
  • Mantener consistencia en espaciado

Pruebas

1. Pruebas Unitarias

Ejemplo de prueba unitaria:

// Ejemplo de prueba
import { validateConfig } from './modules/validation.js';

describe('validateConfig', () => {
    test('debería validar una configuración correcta', () => {
        const config = {
            name: 'Test Config',
            components: []
        };
        expect(validateConfig(config)).toBe(true);
    });
});

2. Pruebas de Integración

Ejemplo de prueba de integración:

// Ejemplo de prueba de integración
describe('Flujo de configuración', () => {
    test('debería crear y guardar una configuración', async () => {
        await page.click('#newConfig');
        await page.fill('#configName', 'Test');
        await page.click('#saveConfig');
        
        const saved = await page.textContent('#status');
        expect(saved).toContain('guardado');
    });
});

Depuración

1. Herramientas de Desarrollo

  • Chrome DevTools
  • Network tab para llamadas API
  • Console para logs
  • Elements para DOM

2. Logging

Implementación de sistema de logging:

// Ejemplo de sistema de logging
const logger = {
    debug: (message, ...args) => {
        if (process.env.NODE_ENV === 'development') {
            console.log(message, ...args);
        }
    },
    error: (message, error) => {
        console.error(message, error);
        // Enviar a servicio de monitoreo
    }
};

Despliegue

1. Preparación

Lista de verificación para despliegue:

  • Minimizar JavaScript
  • Optimizar imágenes
  • Actualizar manifiestos
  • Verificar rutas API

2. Proceso

Pasos para el despliegue:

  1. Ejecutar pruebas
  2. Construir assets
  3. Validar build
  4. Desplegar a producción

Recursos Adicionales

⚠️ **GitHub.com Fallback** ⚠️