Héctor Álvarez

Taller tecnologías móviles

Clean Architecture

Esquema de la clase

  • Introducción
  • Patrones de diseño
  • Clean architecture
  • Biblioteca: flutter_clean_architecture
  • Proyecto base "clean architecture"

Introducción

Hola mundo...

Patrones de diseño y arquitectura

BLoC (Business Logic Component)

MVVM (Model-View-ViewModel)

Patrones de diseño y arquitectura

Patrones de diseño Flutter (Lectura recomendada).

Clean Architecture

Conjunto de principios y patrones de diseño por Robert Cecil Martin (manifiesto ágil).

Está construido sobre capas (UI, DATA, DEVICE, DOMAIN).

No confundir con Onion Architecture.

Clean Architecture

flutter_clean_architecture

Biblioteca de Flutter (pub.dev) para comenzar de manera sólida nuestros proyectos con clean architecture.

Provee una pequeña revisión de la implementación cruda de clean architecture y nos proporciona métodos para poder manejar estados y liberar recursos.

flutter_clean_architecture en pub.dev

flutter_clean_architecture

flutter_clean_architecture

Nuevo proyecto

Crearemos un nuevo proyecto desde cero.

Limpiaremos el archivo main.dart

Agregaremos las dependencias y comenzaremos con la arquitectura.

Comenzaremos desde las capas inferiores (Modelos/Entidades hasta las vistas).

Limpiar proyecto

Agregar dependencias

Estructura de carpetas

Para finalizar con esta inicialización, crearemos las carpetas base de nuestra arquitectura.

En ella crearemos las carpetas 'app', 'data' y 'domain', con sus subcarpetas correspondientes.

Entidades

Las entidades nos dan las estructuras y métodos básicos para trabajar con datos y objetos.

Repositorios

Los repositorios entregan un esqueleto de funcionalidades para utilizar en futuros 'repositorios de datos' (mock, local, remote, etc).

Casos de Uso

Repositorio de datos

Necesitamos implementar el esqueleto del Repositorio, a alguna fuente de datos según necesitemos. En este caso crearemos una fuente de datos 'hard codeada', nuestro mockup.

Parte Final, Pantalla

Nuestra pantalla deberá dividirse en tres archivos:

La conexión a los datos, nuestro Presenter se encargará de gatillar los casos de uso y esperar la respuesta.

La lógica de nuestro componente o pantalla, nuestro Controller, el cual esperará datos de nuestro presenter e interactuará con la presentación (vista).

La presentación al cliente, la Vista, sólo debe llamar al controlador y dejarse manejar por este, no deberíamos tener lógica en la presentación.

Presenter

Controller

View

Últimos cambios

Para terminar, habilitaremos los logs en Main y cambiaremos el widget del Home por nuestra pantalla.