UT00: Buenas Prácticas en Desarrollo Web

1. Estándares de Nombrado de Archivos

La consistencia en el nombrado evita errores de compilación, fallos en servidores y facilita el trabajo en equipo.

Convenciones Principales (Casing)

  • kebab-case: mi-archivo-de-estilo.css
    • Uso: URLs, archivos HTML/CSS, imágenes, assets.
  • camelCase: miFuncionUtil.js
    • Uso: Variables, funciones, métodos en JS/TS.
  • PascalCase: UserProfile.jsx / MiComponente.vue
    • Uso: Componentes de UI, clases, interfaces.
  • snake_case / SCREAMING_SNAKE_CASE: DB_PASSWORD
    • Uso: Variables de entorno (.env), configuraciones globales.

Reglas de Oro para Archivos

  1. Solo minúsculas y guiones (kebab-case) para URLs y HTML/CSS.
    • Los servidores Linux distinguen entre mayúsculas y minúsculas (Case-sensitive).
  2. Evita caracteres especiales y espacios:
    • ❌ Foto de perfil (1).png
    • ✅ foto-perfil-01.png
  3. Nombres explícitos: Usar user-card.component.js en lugar de uc.js.

2. Estructura de Proyectos Web

La estructura interna de un proyecto web nos permite organizar de manera jerárquica nuestros archivos y carpetas, con el fin de que sea gestionable tanto a nivel visual como organizativo.

Frase lapidaria.

Una buena arquitectura escala sin dolor y reduce la deuda técnica.

Arquitectura Estándar (Frontend moderno)

mi-proyecto/
├── public/                 # Assets estáticos (favicon, robots.txt)
├── src/
│   ├── assets/             # Imágenes, fuentes, estilos globales
│   ├── components/         # Reutilizables (Button, Navbar)
│   ├── views/ / pages/     # Vistas completas o rutas
│   ├── services/ / api/    # Llamadas HTTP y lógica de API
│   ├── utils/ / helpers/   # Funciones puras de soporte
│   ├── App.jsx
│   └── main.jsx
├── .gitignore
├── package.json
└── README.md

Patrones de Organización Interna

  • Por Tipo de Archivo (Proyectos pequeños):
    • components/, styles/, tests/
  • Por Feature/Módulo (Proyectos medianos/grandes):
    • modules/auth/ (contiene sus componentes, servicios y tests)
    • modules/checkout/
  • Patrón MVC Tradicional (Model-View-Controller) Es el estándar de arquitectura clásica en frameworks orientados a servidor. Separa de forma estricta la lógica de negocio (Model), la interfaz de usuario (View) y el orquestador de flujo (Controller).Uno de los frameworks mas famosos es Laravel (PHP) que se organiza en base a la siguiente estructura:
mi-proyecto-laravel/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── AuthController.php
│   │   │   └── ProductController.php
│   │   └── Middleware/
│   │       └── Authenticate.php
│   └── Models/
│       ├── User.php
│       └── Product.php
├── database/
│   ├── migrations/
│   └── seeders/
├── resources/
│   └── views/
│       ├── layouts/
│       │   └── app.blade.php
│       └── products/
│           ├── index.blade.php
│           └── show.blade.php
└── routes/
    ├── api.php
    └── web.php
  • Patrón MVT (Model-View-Template) Utilizado por Django, es una variación de MVC donde el framework gestiona el rol del controlador tradicional (el enrutador HTTP de Django), las Views actúan como la lógica de presentación/controlador, y las Templates representan la capa visual. Django promueve el uso de Apps modulares dentro del propio proyecto:
mi_proyecto_django/
├── manage.py
├── config/                     # Configuración global del proyecto
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── productos/                  # Aplicación modular
    ├── admin.py
    ├── apps.py
    ├── models.py               # Capa Model
    ├── views.py                # Capa View (Lógica de negocio)
    ├── urls.py                 # Enrutamiento local de la app
    └── templates/              # Capa Template
        └── productos/
            ├── lista.html
            └── detalle.html