DEV Community

Nicolás Azuaga
Nicolás Azuaga

Posted on

✨ Prólogo — Cómo está construida esta serie de diseño de software en el frontend

Esta serie es mi intento de acercarte conceptos clave de diseño y arquitectura de software aplicados al frontend, especialmente en contextos móviles con React Native. Está pensada desde la práctica, con ejemplos concretos y una app didáctica para seguir paso a paso.


📦 Tecnologías utilizadas

La serie está basada en el siguiente stack:

  • React Native CLI (no Expo)
  • TypeScript
  • React Navigation
  • React Native Testing Library
  • Redux para manejo de estado
  • Librerías auxiliares según se necesiten

Aclaración

Si bien los ejemplos estarán orientados al frontend móvil, los conceptos pueden ser trasladados a otros tipos de aplicación, ya sea web o backend.


⚛️ ¿Por qué con React Native CLI y TypeScript?

Elegí React Native CLI porque es la herramienta con la que más experiencia tengo y me siento más cómodo. Además, usaré TypeScript para aprovechar sus ventajas en tipado estático, lo que ayuda a escribir código más seguro y mantenible.

Noto que hay poco material en español sobre temas profundos de React Native combinados con TypeScript, y este es mi pequeño aporte.


🧢 La app que vamos a construir

Para mantener la serie divertida y cercana, vamos a desarrollar una app inspirada en el mundo Pokémon, pensada desde el enfoque de un entrenador.

App de Entrenador Pokémon

La app incluye:

  • Lógica de captura de Pokémon
  • Gestión del equipo (máximo de 6 Pokémon activos)
  • Guardería para Pokémon extra
  • Mochila con ítems (por ejemplo, Pokébolas)
  • Tipos de Pokébolas y su uso en capturas

Esta app no es una Pokédex, sino una representación simplificada de la experiencia de un entrenador, lo que nos permite modelar entidades, casos de uso, dependencias y flujos reales sin caer en ejemplos artificiales.


🧪 Cómo seguir los ejemplos

Voy a mantener un repositorio abierto con el código de la app:

🔗 Repositorio en GitHub (próximamente)

Cada capítulo de la serie incluirá ejemplos comentados y enlaces al código correspondiente. No necesitás conocimientos previos avanzados, pero se recomienda experiencia básica con React Native y TypeScript.


🎯 Enfoque de la serie

La serie está enfocada en cómo implementar principios de diseño en el frontend y divulgar estas ideas para tenerlas como guía y referencia. No se trata de aplicarlas como un dogma ni como la única verdad, sino de comprender que estos conceptos existen y pueden aplicarse según el contexto.

Habrá veces en que la implementación se sentirá forzada o exagerada para el tamaño de la app, pero eso también es parte del ejercicio: nos sirve para ejemplificar y analizar los pros y contras de dichas implementaciones.

En particular, vamos a ver:

  • Cómo aplicar principios SOLID en React Native
  • Cómo estructurar una app usando Clean Architecture
  • Qué significa Domain-Driven Design (DDD) en el frontend
  • Patrones comunes y errores frecuentes en diseño
  • Cómo testear apps desde el dominio hacia la UI

📚 Índice general de la serie

📌 Serie: Diseño de Software en el Frontend — Índice


Gracias por sumarte a esta serie 🙌

Te invito a seguirla, compartirla, y usarla como una guia o referencia para mejorar tu código y tus decisiones como desarrollador o desarrolladora.

Top comments (0)