[SE1] Patrones UI

name: title
class: left, top

.left-column[

# .fancy[[SE1] Patrones UI]

### &#183; MVC y variantes

Carlos Granell&#183; Universitat Jaume I

EI1039 - Diseño de Software &#183; Sep 2023

]

.right-column[

<div class="figure">
<img src="images/MVC3.png" alt="MVC architecture from freecodecamp.org" width="100%" />
<p class="caption">MVC architecture from freecodecamp.org</p>
</div>
]

???
Image credits: [freecodecamp.org](https://www.freecodecamp.org/news/the-model-view-controller-pattern-mvc-architecture-and-frameworks-explained/)

---
class: inverse, center, middle

.acid[Model-View-Controller (MVC)]

.heat[Model-View-Presenter (MVP)]

.cold[Model-View-ViewModel (MVVM)]

.fat[View, Interactor, Presenter, Entity, and Router Model (VIPER)]

---
# .acidinline[MVC] inicios

.left-column[

<div class="figure">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/77/Trygve_Reenskaug_%282010%29.jpg" alt="Trygve Reenskaug from Wikipedia" width="100%" />
<p class="caption">Trygve Reenskaug from Wikipedia</p>
</div>

]

.right-column[

---
# .acidinline[MVC] componentes

## .acidinline[M]odel <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> datos y su lógica

## .acidinline[V]iew <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> presentación de datos e interacción del usuario

## .acidinline[C]ontroller <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> El interfaz entre `Model` y `View`; Controla y decide

---
# .acidinline[MVC] componentes

<div class="figure">
<img src="images/HeadFirstDesingPatterns14.png" alt="MVC from Head First Design Patterns" width="90%" />
<p class="caption">MVC from Head First Design Patterns</p>
</div>

---
# .acidinline[MVC] ¿patrón de diseño o de arquitectura?

.pull-left[

## .center[MVC como patrón de diseño .acidinline[si soluciona problemas específicos]]
]

.pull-right[

## .center[MVC como patrón de arquitectura .acidinline[si afecta a toda (la arquitectura de) la aplicación]]

]

???

¿Qué gorra nos ponemos? ¿La de arquitecto, como al principio del curso? ¿o la de diseñador/programador, como en la parte de patrones de diseño? MVC admite una, la otra, o ambas a la vez.

---
# .acidinline[MVC] como patrón (.acidinline[compuesto]) de diseño

<div class="figure">
<img src="images/HeadFirstDesingPatterns14.png" alt="MVC from Head First Design Patterns" width="90%" />
<p class="caption">MVC from Head First Design Patterns</p>
</div>

???

MVC se puede considerar un patrón de diseño **compuesto**, es decir, la combinación de varios patrones de diseño de software.