La importancia de reflejar la arquitectura en la estructura de un proyecto Flutter

Arquitectura y estructura son conceptos distintos pero complementarios. Cuando la estructura de carpetas refleja la arquitectura, el proyecto gana claridad, mantenibilidad y colaboración.

Publicado originalmente en LinkedIn el 20 de julio de 2023.

Ilustración de un árbol de carpetas conectado a capas de arquitectura apiladas
En este artículo
  1. Arquitectura
  2. Estructura
  3. ¿Por qué es importante que la arquitectura y la estructura estén alineadas?
  4. Cómo lograr la correspondencia entre arquitectura y estructura

La arquitectura y la estructura son dos conceptos distintos pero complementarios en el desarrollo de una aplicación Flutter.

Arquitectura

La arquitectura se refiere al diseño y la organización general de una aplicación. Es el enfoque más alto y abarca las decisiones fundamentales sobre cómo se divide y se relaciona cada componente de la aplicación. Una arquitectura bien definida proporciona un marco sólido para el desarrollo, facilita la colaboración en el equipo y mejora la escalabilidad y mantenibilidad del proyecto. Flutter no impone una arquitectura específica, lo que brinda flexibilidad para elegir entre diferentes patrones arquitectónicos según las necesidades del proyecto. Algunos ejemplos populares de arquitecturas utilizadas en Flutter son:

  • Flutter BLoC: esta arquitectura se basa en el patrón BLoC (Business Logic Component). Divide la aplicación en tres componentes principales: la vista, que muestra la interfaz de usuario; el BLoC, que contiene la lógica de negocio; y el repositorio, que maneja la obtención y manipulación de datos.
  • MVVM (Model-View-ViewModel): un patrón que separa la lógica de presentación de la lógica de negocio y del modelo de datos. La vista se comunica con el ViewModel para obtener y presentar los datos, y el ViewModel se comunica con el modelo para obtener los datos.
  • Redux: una arquitectura basada en un contenedor de estado global (Store) que almacena toda la información de la aplicación. Los widgets pueden acceder al estado desde el Store y enviar acciones para modificarlo.

Estructura

La estructura se refiere a la organización física del código y los archivos en el proyecto de Flutter. Incluye la forma en que se agrupan los directorios y cómo se dividen las responsabilidades entre ellos. Una buena estructura de proyecto ayuda a mantener el código limpio, facilita la navegación y mejora la legibilidad y la colaboración en el equipo. Algunos elementos comunes en la estructura de una aplicación Flutter son:

  • Directorio lib: es donde se encuentra la mayoría del código fuente de la aplicación, incluyendo los archivos de las vistas, la lógica de negocio y los servicios, entre otros.
  • Directorio assets: aquí se almacenan los recursos estáticos de la aplicación, como imágenes, fuentes y archivos JSON, entre otros.
  • Directorio test: contiene las pruebas unitarias y de widgets para garantizar la calidad del código.
  • Directorios android e ios: contienen los archivos específicos de cada plataforma para personalizar el comportamiento de la aplicación en Android e iOS, respectivamente.
  • Directorio lib/widgets: puede utilizarse para almacenar widgets personalizados reutilizables en toda la aplicación.
  • Directorio packages: contiene diferentes paquetes utilizados en la aplicación, como servicios de API y repositorios. Al organizar los servicios y repositorios en paquetes separados, se mejora la modularidad de la aplicación, se facilita la reutilización y se reduce la complejidad del código principal del proyecto. También permite que diferentes equipos trabajen en los paquetes de manera independiente, lo que fomenta una mejor colaboración y un desarrollo más ágil en proyectos grandes o con múltiples partes funcionales.
Diagrama // Dos conceptos complementarios

Arquitectura

  • Diseño y organización general
  • Cómo se divide y se relaciona cada componente
  • Ejemplos: BLoC, MVVM, Redux

Estructura

  • Organización física del código y los archivos
  • Cómo se agrupan los directorios
  • Ejemplos: lib, test, packages
La arquitectura decide qué componentes existen y cómo se relacionan; la estructura decide dónde vive cada uno.

La arquitectura se enfoca en el diseño global y la organización de los componentes de la aplicación, mientras que la estructura se enfoca en cómo se organizan físicamente los archivos y directorios en el proyecto. Ambas son fundamentales para el desarrollo eficiente y mantenible de aplicaciones Flutter.

¿Por qué es importante que la arquitectura y la estructura estén alineadas?

La arquitectura de una aplicación establece la base de cómo se organizarán los diferentes componentes y capas del proyecto, mientras que la estructura de directorios define cómo se organizan físicamente los archivos. Cuando la arquitectura y la estructura están alineadas, se obtienen varios beneficios clave:

1. Claridad y comprensión

Una correspondencia clara entre la arquitectura y la estructura permite que los desarrolladores comprendan rápidamente cómo están organizados los diferentes componentes y capas de la aplicación. Esto facilita la navegación por el código y mejora la legibilidad, especialmente en proyectos más grandes y complejos.

2. Mantenibilidad y escalabilidad

Cuando la estructura del proyecto refleja la arquitectura, se facilita el mantenimiento y la evolución del código. Los cambios en una parte de la aplicación se pueden realizar de manera aislada sin afectar otras áreas, lo que mejora la escalabilidad del proyecto y evita efectos secundarios no deseados.

3. Separación de responsabilidades

Una alineación adecuada entre la arquitectura y la estructura fomenta una clara separación de responsabilidades. Cada componente o capa de la aplicación tiene su propio espacio y una función definida, lo que promueve un diseño modular y una fácil identificación de dónde se encuentran la lógica de negocio, la interfaz de usuario y otras funcionalidades.

4. Colaboración y eficiencia del equipo

Una estructura consistente y alineada con la arquitectura facilita la colaboración entre los miembros del equipo. Todos los desarrolladores comparten una comprensión común de cómo se organiza el proyecto y pueden trabajar de manera más eficiente, reduciendo los tiempos de revisión y de resolución de conflictos.

Interactivo // La arquitectura reflejada en carpetas

Elige una arquitectura y observa cómo cada uno de sus componentes encuentra un lugar evidente en el árbol del proyecto.

mi_app/
        ├── lib/
        │   ├── views/          ← Vista: la interfaz de usuario
        │   ├── blocs/          ← BLoC: la lógica de negocio
        │   └── widgets/        ← widgets reutilizables
        ├── packages/
        │   ├── repositories/   ← Repositorio: obtención y manipulación de datos
        │   └── api_services/   ← servicios de API
        ├── assets/
        ├── test/
        ├── android/
        └── ios/
Árboles ilustrativos, no plantillas oficiales: el punto es que cada componente de la arquitectura tenga un hogar evidente.

Cómo lograr la correspondencia entre arquitectura y estructura

Para lograr que la arquitectura se refleje en la estructura de un proyecto Flutter, es fundamental seguir algunos principios y buenas prácticas:

1. Definir una arquitectura claramente

Antes de comenzar el desarrollo del proyecto, es esencial definir una arquitectura sólida y adecuada para las necesidades específicas de la aplicación. Algunas opciones populares incluyen el patrón BLoC, MVVM y Redux, entre otros. Esta elección debe ser compartida y entendida por todo el equipo de desarrollo.

2. Elegir una estructura coherente

Una vez establecida la arquitectura, el equipo debe elegir una estructura de directorios que refleje y organice adecuadamente los diferentes componentes según la arquitectura seleccionada. Mantener la coherencia y la simplicidad en la estructura es clave para evitar confusiones y asegurar una fácil navegación por el proyecto.

3. Documentar y comunicar

Es crucial documentar la arquitectura elegida y cómo se reflejará en la estructura del proyecto. Esta documentación debe estar disponible para todos los miembros del equipo, especialmente para aquellos que se unen al proyecto en etapas posteriores. La comunicación clara y abierta sobre la arquitectura y la estructura fomenta un entendimiento compartido y evita malentendidos.

4. Revisar y mejorar continuamente

El equipo debe revisar periódicamente la estructura del proyecto y asegurarse de que esté alineada con la arquitectura definida. Las retroalimentaciones y sugerencias de los miembros del equipo deben ser bienvenidas para mejorar y adaptar la estructura a medida que el proyecto evoluciona.

  1. 01Definirla arquitectura
  2. 02Elegiruna estructura coherente
  3. 03Documentary comunicar
  4. 04Revisary mejorar

La alineación entre la arquitectura y la estructura de un proyecto Flutter es esencial para un desarrollo eficiente, mantenible y colaborativo. Una estructura bien organizada que refleje claramente la arquitectura proporciona una base sólida para el crecimiento del proyecto y la creación de aplicaciones de alta calidad. Al adoptar una correspondencia adecuada entre arquitectura y estructura, los equipos de desarrollo pueden enfrentar los desafíos con confianza y lograr resultados exitosos en sus proyectos Flutter.

Compartir LinkedIn X

Escrito por Sebastián Larrauri

Claude Forward Deployed Engineer y arquitecto de sistemas de IA. Developer y Architect certificado por Anthropic, con las credenciales CCDV-F, CCAO-F, CCAR-F y CCAR-P.

Artículos relacionados

Ver todos los artículos Agendar discovery de arquitectura de IA (15 min)