1 of 34

MVP & FRP for a controllerless architecture

By Albert Parrón

#SoftwarearchitecturewithApiumhub #AlbertParrón

Follow us: Apium_hub

2 of 34

#SCBCN18

Software Crafters Barcelona - VI Edition

3 of 34

Arquitectura

Herramientas
Procesos
Ideas estructurales
Patrones

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

4 of 34

Premisa

históricamente, poca atención se ha dado sobre las arquitecturas front-end

pocas referencias, patrones Martin Fowler
comunidad DDD no ha escrito casi nada

en los últimos años, comunidad JS muy activa, y dispositivos móviles

más protagonismo

aún así, tradicionalmente hay mucho relativismo en literatura

falta objetividad
terminología muy confusa

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

5 of 34

Objetivos

Qué intentamos conseguir con una arquitectura

Pretendemos, en nuestro intento, mejorar cualidades arquitecturales de los sistemas sobre los que trabajamos, como:

Modularidad
Robustez
Expresividad

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

6 of 34

Modularidad

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

7 of 34

Smart UI

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

Eventos
Logica
Estado
Render

Request

Response

Persistence

Smart UI

8 of 34

Document View

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

Eventos
Render

Request

Response

View

Persistence

Document

Logica
Estado

9 of 34

MVC Triad

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

Request

Response

View

Persistence

Model

Controller

Modifies

Observes

Notifies

10 of 34

MVC

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

11 of 34

MVC - es un problema de Orientación a Objetos..

Necesitamos modularidad
Un solo gran controller no es modular

no se puede reutilizar en otros contextos
no es “S.O.L.I.D.”

Encapsulación ≡ Modularidad ≡ Distribución de inteligencia

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

12 of 34

Evoluciones - MVVM

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

13 of 34

Vuelta al MVC original

Un primer paso

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

14 of 34

Un problema de “Cajas” - 1

Coupling:

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

15 of 34

Un acercamiento desde la programación funcional

Function Composition:

f : X → Y

g : Y → Z

h: g ∘ f (o f;g )

h(x) = (g ∘ f )(x) = g(f(x))

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

16 of 34

Un acercamiento desde la programación funcional

Function Composition:

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

17 of 34

Controllerless Architecture - back to original MVC

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

18 of 34

DDD - isolate side effects

Pure Code: computación, lógica, transiciones de estado
Impure Code: “side effects”

mutación de estado compartido
IO

DOM
infrastructural code (Ajax code, DB access..)

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

19 of 34

Tactical DDD

La idea es:

aislar el código con efectos
evitando de mezclar en los mismos módulos el código puro con el impuro, maximizamos el código puro

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

20 of 34

Tactical DDD

impure code: Infrastructure Services

Repository Pattern
Gateways

pure code:

Domain Entities

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

21 of 34

Tactical DDD

- Client “Services”

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

22 of 34

FRP - Un paso más

FRP = Functional Reactive Programming
FRP: FP + Observer pattern

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

23 of 34

FRP - Basics

Obervable/�Observer :

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

24 of 34

FRP - Monad

Monad: algo que nos permite componer funciones puras �aunque en presencia de side-effects
Observable es un Monad
Es también un Stream

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

25 of 34

FRP - Wiring

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

26 of 34

Expresividad

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

27 of 34

MVC es bidireccional?

En realidad la Vista tiene dos responsabilidades:

delivery system
interacción con el usuario

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

28 of 34

Paradigma Controllerless y direccionalidad

en DDD es el principio “CQS”

central en la modelación de Bounded Contexts
ver por ejemplo, a nivel implementativo, CQRS

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

29 of 34

Flux

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

30 of 34

Presenter First

Diseño de la UI empieza por las interacciones

User->System (Interactions)
System->User (Presentation)

Es el Presenter
Muy fácil distribuir responsabilidades
Se minimizan interacciones y comunicaciones
En el Presenter está toda la descripción de la UI

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

31 of 34

En Resumen

Expresividad Presenter
Limitación Módulos (comparado con Flux)
Centralización flujo de Eventos
Declaratividad y Robustez
Reutilización de Vistas en diferentes contextos
Reutilización de Servicios en diferentes contextos
Testabilidad
Es Work-in-Progress!!

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

32 of 34

Sentido Común

Como toda arquitectura, hay que aplicarla con pautas:

manejo del estado en Servidor o Servicio, nunca en vista
no disparar muchos eventos por interacción de usuario
evitar “metrallas” a servidor

componer en servidor

etc.

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

33 of 34

¿Preguntas?

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

34 of 34

@Apium_hub #SoftwarearchitecturewithApiumhub #AlbertParrón

Thank you so much!!

www.apiumhub.com