Angular de Cero: Creando Proyectos Modernos con las Últimas Buenas Prácticas

7/30/2024

Introducción

Empezar un nuevo proyecto es siempre una oportunidad para sentar bases sólidas. Con cada nueva versión de Angular, el framework evoluciona, ofreciéndonos herramientas y enfoques más eficientes.

Este mini-tutorial te guiará a través de la creación de un proyecto Angular desde cero, incorporando las últimas novedades y las mejores prácticas que te ayudarán a construir aplicaciones robustas y mantenibles.

El Problema/Concepto

El ecosistema de desarrollo web se mueve rápido. Lo que eran "buenas prácticas" hace dos años puede que hoy no lo sean, o que existan alternativas superiores. Al iniciar un proyecto Angular, es crucial no solo usar la última versión del CLI, sino también configurar el proyecto de forma que sea escalable, performante y fácil de mantener por un equipo. Evitar la deuda técnica desde el principio es la clave.

La Solución/Explicación

Vamos a desglosar el proceso de creación de un proyecto Angular moderno, paso a paso, con un ojo puesto en las buenas prácticas.

1. Preparando el Terreno: Requisitos Previos

Asegúrate de tener Node.js (versión LTS recomendada) y npm (o Yarn) instalados en tu sistema. Puedes verificar tus versiones con node -v y npm -v.

2. El Corazón de Angular: La CLI

Si aún no tienes el Angular CLI instalado globalmente, es el primer paso. Si ya lo tienes, asegúrate de que esté actualizado a la última versión para aprovechar todas las nuevas funcionalidades.

# Instalar o actualizar el Angular CLI globalmente
npm install -g @angular/cli@latest

Verifica la versión instalada:

ng version

Esto te mostrará la versión del CLI y de Angular que usará para nuevos proyectos.

3. Creando el Proyecto Moderno: ng new al Detalle

Aquí es donde la magia sucede. Usaremos ng new con las opciones que reflejan las últimas tendencias y buenas prácticas.

ng new mi-proyecto-moderno --standalone --style=scss --routing --ssr

Analicemos estas opciones:

  • mi-proyecto-moderno: El nombre de tu aplicación.
  • --standalone: ¡Esta es la clave de las últimas versiones! Indica al CLI que genere componentes, directivas y pipes como "standalone" por defecto. Esto elimina la necesidad de NgModules para la mayoría de los casos, simplificando la estructura y el árbol de dependencias. Es el futuro de Angular.
  • --style=scss: SCSS es un preprocesador CSS muy potente que facilita la escritura de estilos modulares y mantenibles. Es una buena práctica casi universal en proyectos grandes.
  • --routing: Genera un módulo de enrutamiento (app.routes.ts con --standalone), esencial para la navegación en aplicaciones de una sola página.
  • --ssr: Añade soporte para Server-Side Rendering (SSR) y Static Site Generation (SSG) usando Angular Universal. Si tu aplicación necesita mejor SEO, un tiempo de carga inicial más rápido o es una PWA, esta opción es fundamental desde el principio.

Novedades bajo el capó:

  • Vite y esbuild: A partir de Angular v17, el CLI utiliza Vite y esbuild por defecto para el proceso de build, lo que resulta en tiempos de compilación significativamente más rápidos. Esto mejora la experiencia del desarrollador.
  • ESLint por defecto: El CLI ahora configura ESLint para el linting, reemplazando a TSLint. ESLint es el estándar de facto en el ecosistema JavaScript/TypeScript.

4. Primeros Pasos Post-Creación: Limpieza y Estructura

Una vez creado el proyecto, hay algunas cosas que podemos hacer para empezar con buen pie:

  • Limpieza del app.component.html: El CLI genera un app.component.html con mucho contenido de ejemplo. Bórralo y déjalo con un simple <h1>¡Hola, Richi.codes!</h1> o <router-outlet /> si usas routing.
  • Estructura de Carpetas Recomendada:
    • src/app/core: Módulos o servicios singleton que se cargan una sola vez al inicio de la aplicación (e.g., autenticación, manejo de errores, servicios de logging).
    • src/app/shared: Componentes, directivas, pipes o modelos que se usan en múltiples partes de la aplicación y no tienen lógica de negocio específica.
    • src/app/features: Carpeta para agrupar las funcionalidades principales de tu aplicación. Cada subcarpeta aquí representaría una "feature" (e.g., src/app/features/users, src/app/features/products). Cada feature debería ser lo más autónoma posible.

5. Integrando Buenas Prácticas Desde el Día Cero

  • Linting y Formateo (ESLint y Prettier): Ya tienes ESLint configurado. Para una consistencia aún mayor, integra Prettier.

    npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

    Luego, configura tu .eslintrc.json y package.json para que Prettier funcione con ESLint y formatee automáticamente al guardar (con la extensión de VS Code, por ejemplo).

  • Lazy Loading para Features: Asegúrate de que tus "features" se carguen de forma perezosa. Con app.routes.ts (para proyectos --standalone), esto se hace fácilmente:

    // src/app/app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'productos',
    loadComponent: () => import('./features/products/product-list/product-list.component').then(m => m.ProductListComponent)
  },
  // O si la feature tiene sus propias rutas:
  {
    path: 'usuarios',
    loadChildren: () => import('./features/users/users.routes').then(m => m.usersRoutes)
  },
  { path: '', redirectTo: 'productos', pathMatch: 'full' },
  { path: '**', redirectTo: 'productos' } // O una página 404
];

    El loadChildren (para rutas con un archivo de rutas propio) o loadComponent (para cargar directamente un componente standalone) asegura que el código de esa feature solo se descargue cuando el usuario la necesita.

  • Gestión de Estado (RxJS y Signals):

    • RxJS: Sigue siendo el pilar para la programación reactiva. Usa operadores de pipe para transformar y combinar observables. Siempre desuscríbete de observables de larga duración (usando takeUntil, async pipe, o destroyRef).
    • Signals: Las Signals son una adición potente en las últimas versiones de Angular para la gestión de estado reactivo y granular. Considera usarlas para el estado local de componentes o incluso para un estado global más sencillo, ya que ofrecen una reactividad más explícita y performante.

  • Formularios Tipados: Usa NonNullableFormBuilder para asegurar que los valores de tus formularios sean siempre tipados correctamente y no null o undefined cuando no deberían serlo.

  • Testing: No olvides la importancia de los tests unitarios (Karma/Jasmine por defecto) y de integración/E2E (Cypress o Playwright son excelentes alternativas a Protractor, que ya no es el predeterminado). Configúralos desde el principio.

  • Accesibilidad (A11y): Ten siempre en cuenta la accesibilidad. Usa atributos ARIA, semántica HTML correcta y asegúrate de que tu interfaz sea navegable y utilizable por todos.

  • Gestión de Entornos: Configura tus archivos environment.ts y environment.development.ts (u otros) para manejar diferentes configuraciones (APIs, URLs, etc.) entre desarrollo, staging y producción.

6. Arrancando el Motor: ng serve

Finalmente, para ver tu aplicación en acción:

ng serve -o

Esto compilará tu proyecto y lo abrirá en tu navegador por defecto, generalmente en http://localhost:4200.

Conclusión

Comenzar un proyecto Angular con las últimas versiones y buenas prácticas es la mejor inversión para su futuro, sentando las bases para una aplicación mantenible, escalable y performante.

---LINKEDIN--- 🚀 ¡Arrancando un nuevo proyecto Angular! Con las últimas versiones, tenemos herramientas increíbles para construir aplicaciones más robustas y eficientes.

Desde los standalone components que simplifican nuestra estructura, hasta la integración de Vite/esbuild para builds ultrarrápidos y el soporte nativo para SSR, el CLI de Angular nos permite configurar un proyecto con las mejores prácticas desde el día cero.

¿Cuáles son tus configuraciones esenciales o tus "must-haves" al iniciar un nuevo proyecto Angular? ¡Me encantaría leer vuestras experiencias!

#Angular #DesarrolloWeb #BuenasPracticas #ngNew #StandaloneComponents #RichiCodes #Frontend #SoftwareEngineering