Hispanopedia Wiki
Articulo de referencia

Modelo-vista-controlador

Diagrama de interacciones en la interpretación de Smalltalk-80 de MVC El modelo-vista-controlador ( MVC ) es un patrón arquitectónico de software [ 1 ] comúnmente utilizado para...

Hispanopedia WikiContenido en espanolLectura gratuita
Diagrama de interacciones en la interpretación de Smalltalk-80 de MVC

El modelo-vista-controlador ( MVC ) es un patrón arquitectónico de software [ 1 ] comúnmente utilizado para desarrollar interfaces de usuario que divide la lógica del programa en tres elementos interconectados. Estos elementos son:

  • el modelo , las representaciones internas de la información
  • la vista , la interfaz que presenta información al usuario y la recibe de él.
  • el controlador , el software que enlaza ambos. [ 2 ] [ 3 ]

Tradicionalmente utilizado para interfaces gráficas de usuario (GUI) de escritorio, este patrón se popularizó para el diseño de aplicaciones web . [ 4 ] Los lenguajes de programación populares cuentan con marcos MVC que facilitan la implementación del patrón.

Historia

Una de las ideas fundamentales en el desarrollo inicial de las interfaces gráficas de usuario, MVC se convirtió en uno de los primeros enfoques para describir e implementar construcciones de software en términos de sus responsabilidades . [ 5 ]

Trygve Reenskaug creó MVC mientras trabajaba en Smalltalk -79 como científico visitante en el Centro de Investigación Xerox Palo Alto (PARC) a finales de la década de 1970. [ 6 ] [ 7 ] [ 8 ] : 330 Quería un patrón que pudiera usarse para estructurar cualquier programa donde los usuarios interactuaran con un conjunto de datos grande y complejo . Su diseño inicialmente tenía cuatro partes: Modelo , Vista, Objeto y Editor. Después de discutirlo con los otros desarrolladores de Smalltalk , él y el resto del grupo se decidieron por Modelo, Vista y Controlador en su lugar. [ 6 ]

En su diseño final, un modelo representa una parte del programa de forma pura e intuitiva. Una vista es una representación visual de un modelo, que recupera datos del modelo para mostrarlos al usuario y transmite solicitudes entre el usuario y el modelo. Un controlador es una parte organizativa de la interfaz de usuario que organiza y coordina múltiples vistas en la pantalla, recibe la entrada del usuario y envía los mensajes correspondientes a sus vistas subyacentes. Este diseño también incluye un editor como un tipo especializado de controlador que se utiliza para modificar una vista en particular y que se crea a través de esa vista. [ 6 ]

Smalltalk-80 admite una versión de MVC que evolucionó a partir de esta. [ 6 ] Proporciona clasesview abstractas y, así como varias subclases concretas de cada una, que representan diferentes widgets genéricos . En este esquema, un representa alguna forma de mostrar información al usuario, y un representa alguna forma para que el usuario interactúe con un . Un también está acoplado a un objeto modelo, pero la estructura de ese objeto queda a cargo del programador de la aplicación . El entorno Smalltalk-80 también incluye un "MVC Inspector", una herramienta de desarrollo para ver la estructura de un modelo, una vista y un controlador dados en paralelo. [ 9 ]controllerViewcontrollerviewview

En 1988, un artículo publicado en The Journal of Object Technology (JOT) por dos exempleados de PARC presentó MVC como un " paradigma y metodología de programación" general para desarrolladores de Smalltalk-80. Sin embargo, su esquema difería tanto del de Reenskaug et al. como del presentado en los libros de referencia de Smalltalk-80. Definieron una vista como aquella que abarca cualquier aspecto gráfico, mientras que un controlador fue un objeto más abstracto, generalmente invisible, que recibe la entrada del usuario e interactúa con una o varias vistas y un único modelo. [ 10 ]

El patrón MVC evolucionó posteriormente, [ 11 ] dando lugar a variantes como el modelo-vista-controlador jerárquico (HMVC), el modelo-vista-adaptador (MVA), el modelo-vista-presentador (MVP), el modelo-vista-modelo de vista (MVVM) y otros que adaptaron MVC a diferentes contextos.

El uso del patrón MVC en aplicaciones web creció tras la introducción de WebObjects de NeXT en 1996, originalmente escrito en Objective-C (que tomaba prestados muchos elementos de Smalltalk) y que ayudó a consolidar los principios de MVC. Posteriormente, el patrón MVC se popularizó entre los desarrolladores de Java cuando WebObjects se adaptó a Java . Los frameworks posteriores para Java, como Spring (lanzado en octubre de 2002), mantuvieron la estrecha relación entre Java y MVC.

En 2003, Martin Fowler publicó Patterns of Enterprise Application Architecture , que presentó MVC como un patrón donde un "controlador de entrada" recibe una solicitud, envía los mensajes apropiados a un objeto modelo, toma una respuesta del objeto modelo y pasa la respuesta a la vista apropiada para su visualización. [ 8 ] : 56 Esto es cercano al enfoque adoptado por el marco de aplicación web Ruby on Rails (agosto de 2004), donde el cliente envía solicitudes al servidor a través de una vista en el navegador , estas solicitudes son manejadas por un controlador en el servidor, y el controlador se comunica con los objetos modelo apropiados. [ 12 ] El marco Django (julio de 2005, para Python ) propuso una versión similar "modelo-plantilla-vista" (MTV) del patrón, en la que una vista recupera datos de los modelos y los pasa a las plantillas para su visualización. [ 13 ] Tanto Rails como Django debutaron con un fuerte énfasis en el despliegue rápido, lo que aumentó la popularidad de MVC fuera del entorno empresarial tradicional en el que ha sido popular durante mucho tiempo.

Componentes

Modelo

El componente central del patrón. Es la estructura de datos dinámica de la aplicación , independiente de la interfaz de usuario. [ 14 ] Gestiona directamente los datos, la lógica y las reglas de la aplicación. En Smalltalk-80, el diseño de un tipo de modelo se deja completamente al programador. [ 15 ] Con WebObjects, Rails y Django, un tipo de modelo normalmente representa una tabla en la base de datos de la aplicación . [ 16 ] [ 17 ] [ 18 ] El modelo es esencial para mantener los datos organizados y consistentes. Asegura que los datos de la aplicación se comporten de acuerdo con las reglas y la lógica definidas.

Vista

Cualquier representación de información, como un gráfico , un diagrama o una tabla. Es posible visualizar la misma información de varias maneras, como por ejemplo un gráfico de barras para la gerencia y una tabla para los contadores .

En Smalltalk-80, una vista es simplemente una representación visual de un modelo y no gestiona la entrada del usuario. [ 19 ] Con WebObjects, una vista representa un elemento completo de la interfaz de usuario, como un menú o un botón, y sí recibe entrada del usuario. [ 20 ] Sin embargo, tanto en Smalltalk-80 como en WebObjects, las vistas están diseñadas para ser de propósito general y componibles . [ 21 ] [ 22 ]

Con Rails y Django, el rol de la vista lo desempeñan las plantillas HTML , por lo que en su esquema una vista especifica una interfaz de usuario en el navegador en lugar de representar directamente un widget de interfaz de usuario. [ 23 ] [ 24 ] (Django opta por llamar a este tipo de objeto "plantilla" en vista de esto. [ 25 ] ) Este enfoque pone relativamente menos énfasis en vistas pequeñas y componibles; una vista típica de Rails tiene una relación uno a uno con una acción del controlador. [ 26 ]

Las vistas de Smalltalk-80 se comunican tanto con un modelo como con un controlador, [ 27 ] mientras que con WebObjects, una vista solo se comunica con un controlador, que luego se comunica con un modelo. [ 28 ] Con Rails y Django, un controlador/vista utiliza una vista/plantilla al preparar una respuesta para el cliente. [ 29 ] [ 30 ]

Controlador

Diagrama de clases UML de un controlador de ejemplo en la arquitectura MVC.

Acepta la entrada y la convierte en comandos para el modelo o la vista. [ 31 ]

Un controlador Smalltalk-80 gestiona los eventos de entrada del usuario, como pulsaciones de botones o movimientos del ratón. [ 32 ] En cualquier momento dado, cada controlador tiene una vista y un modelo asociados, aunque un objeto de modelo puede recibir información de muchos controladores diferentes. Solo un controlador, el controlador "activo", recibe la entrada del usuario en un momento dado; un objeto gestor de ventanas global es responsable de establecer el controlador activo actual. Si la entrada del usuario provoca un cambio en un modelo, el controlador le indicará al modelo que cambie, pero el modelo es entonces responsable de indicar a sus vistas que se actualicen. [ 33 ]

En WebObjects, las vistas gestionan la entrada del usuario y el controlador actúa como intermediario entre las vistas y los modelos. Puede haber un único controlador por aplicación o por ventana. Gran parte de la lógica específica de la aplicación se encuentra en el controlador. [ 34 ]

En Rails, las solicitudes que llegan a la aplicación en el servidor desde el cliente se envían a un "enrutador", que asigna la solicitud a un método específico de un controlador específico. Dentro de ese método, el controlador interactúa con los datos de la solicitud y cualquier objeto de modelo relevante, y prepara una respuesta utilizando una vista. Convencionalmente, cada vista tiene un controlador asociado; por ejemplo, si la aplicación tiene una clientvista, normalmente también tendrá un Clientscontrolador asociado. Sin embargo, los desarrolladores pueden crear otros tipos de controladores si lo desean. [ 35 ]

Django llama al objeto que desempeña este rol "vista" en lugar de controlador. [ 30 ] Una vista de Django es una función que recibe una solicitud web y devuelve una respuesta web. Puede usar plantillas para crear la respuesta. [ 36 ]

Interacciones

Además de dividir la aplicación en un modelo, una vista y un componente de controlador, el patrón de diseño MVC define las interacciones entre estos tres componentes  : [ 37 ]

  • El modelo se encarga de gestionar los datos de la aplicación. Recibe la información que proporciona el usuario desde el controlador.
  • La vista muestra la presentación del modelo en un formato particular.
  • El controlador responde a la entrada del usuario y realiza interacciones con los objetos del modelo de datos. El controlador recibe la entrada, la valida opcionalmente y luego la pasa al modelo.

Al igual que otros patrones de software, MVC expresa el "núcleo de la solución" a un problema, permitiendo a la vez su adaptación a cada sistema. [ 38 ] Los diseños MVC particulares pueden variar significativamente de la descripción tradicional aquí presentada. [ 39 ]

Motivación

Como escribió Alan Kay en 2003, la motivación original detrás del MVC era permitir la creación de una interfaz gráfica para cualquier objeto. [ 40 ] Esto se describió en detalle en el libro de Richard Pawson, Naked Objects . [ 40 ]

Trygve Reenskaug, creador de MVC en PARC, ha escrito que "MVC fue concebido como una solución general al problema de que los usuarios controlen un conjunto de datos grande y complejo". [ 6 ]

En su guía de 1991 , Inside Smalltalk , los profesores de informática de la Universidad de Carleton, Wilf LaLonde y John Pugh, describieron las ventajas del MVC al estilo Smalltalk-80 de la siguiente manera:

  • independencia de la presentación y los datos, por ejemplo, múltiples vistas de un mismo modelo simultáneamente,
  • widgets de presentación componibles, por ejemplo, una vista utilizada como subvista de otra,
  • modos de entrada conmutables, intercambiando un controlador por otro durante el tiempo de ejecución y
  • independencia del procesamiento de entrada y salida, a través de las responsabilidades separadas de los controladores y las vistas. [ 41 ]

Uso en aplicaciones web

Aunque originalmente desarrollado para la informática de escritorio , MVC ha sido ampliamente adoptado como un diseño para aplicaciones World Wide Web en los principales lenguajes de programación . Se han creado varios marcos web que imponen el patrón. Estos marcos de software varían en sus interpretaciones, principalmente en la forma en que las responsabilidades de MVC se dividen entre el cliente y el servidor . [ 42 ] Los primeros marcos MVC adoptaron un enfoque de cliente ligero que colocaba casi toda la lógica del modelo, la vista y el controlador en el servidor. En este enfoque, el cliente envía solicitudes de hipervínculos o envíos de formularios al controlador y luego recibe una página web completa y actualizada (u otro documento) de la vista; el modelo existe completamente en el servidor. [ 42 ] Marcos posteriores han permitido que los componentes MVC se ejecuten parcialmente en el cliente, utilizando Ajax para sincronizar datos.

Véase también

Referencias

  1. ↑ "Los principios de la arquitectura limpia por el tío Bob Martin" . YouTube . 15 de diciembre de 2015.
  2. ↑ Reenskaug, Trygve; Coplien, James O. (20 de marzo de 2009). "La arquitectura DCI: una nueva visión de la programación orientada a objetos" . Artima Developer . Archivado del original el 23 de marzo de 2009. Recuperado el 3 de agosto de 2019. Más profundamente, el marco existe para separar la representación de la información de la interacción del usuario.
  3. ↑ Burbeck (1992): "...la entrada del usuario, el modelado del mundo externo y la retroalimentación visual al usuario están explícitamente separados y manejados por tres tipos de objetos."
  4. ↑ Davis, Ian. "¿Cuáles son los beneficios de MVC?" . Internet Alchemy . Consultado el 29 de noviembre de 2016 .
  5. ↑ Historia del patrón Modelo-Vista-Controlador . C2.com (11 de mayo de 2012). Consultado el 9 de diciembre de 2013.
  6. 1 2 3 4 5 Notas y documentos históricos de Trygve Reenskaug, inventor de MVC.
  7. ↑ "Una nota sobre los requisitos de DynaBook", Trygve Reenskaug, 22 de marzo de 1979, SysReq.pdf .
  8. 1 2 Fowler, Martin (2003). Patrones de arquitectura de aplicaciones empresariales . Pearson Education, Inc. ISBN 0-321-12742-0.
  9. ↑ Goldberg, Adele (1984). Smalltalk-80: El entorno de programación interactiva . Addison-Wesley. ISBN 0-201-11372-4.
  10. ↑ Krasner, Glenn E.; Pope, Stephen T. (agosto-septiembre de 1988). "Un libro de cocina para usar el paradigma de interfaz de usuario modelo-vista-controlador en Smalltalk-80" . The Journal of Object Technology . 1 (3). Publicaciones SIGS: 26-49 .También publicado como " Una descripción del paradigma de interfaz de usuario Modelo-Vista-Controlador en el sistema Smalltalk-80 " (Informe), ParcPlace Systems; consultado el 5 de junio de 2012.
  11. ↑ La evolución de MVC y otras arquitecturas de interfaz de usuario según Martin Fowler.
  12. ↑ "Guías de Ruby on Rails" . Consultado el 19 de marzo de 2022 .
  13. ↑ "Preguntas frecuentes sobre Django: Django parece ser un framework MVC, pero llamas al controlador "vista" y a la vista "plantilla". ¿Por qué no usas los nombres estándar?" . Consultado el 19 de marzo de 2022 .
  14. ↑ Burbeck, Steve (1992) Programación de aplicaciones en Smalltalk-80: Cómo usar el patrón Modelo-Vista-Controlador (MVC)
  15. ↑ LaLonde, Wilf R.; Pugh, John R. (1991). Inside Smalltalk . EE. UU.: Prentice-Hall Inc. pág. 8. ISBN  0-13-467309-3El modelo puede ser cualquier objeto sin restricciones .
  16. ↑ Descripción general del sistema WebObjects (PDF) . Cupertino, CA: Apple Computer, Inc. Mayo de 2001. pág. 28. En WebObjects, un modelo establece y mantiene una correspondencia entre una clase de objeto empresarial y los datos almacenados en una base de datos relacional. 
  17. ↑ "Conceptos básicos de Active Record" . Guías de Rails . Consultado el 27 de octubre de 2022. Esto creará un modelo, mapeado a una tabla de productos en la base de datos.Product
  18. ↑ "Modelos" . Documentación de Django . Consultado el 27 de octubre de 2022. Generalmente , cada modelo se corresponde con una única tabla de la base de datos.
  19. ↑ LaLonde, Wilf R.; Pugh, John R. (1991). Inside Smalltalk . EE. UU.: Prentice-Hall Inc. pág. 8. ISBN  0-13-467309-3La vista es responsable de proporcionar una representación visual del objeto.
  20. ↑ Descripción general del sistema WebObjects (PDF) . Cupertino, CA: Apple Computer, Inc. Mayo de 2001. pág. 28. Los objetos de vista representan elementos visibles en la interfaz de usuario (ventanas, por ejemplo, o botones). 
  21. ↑ LaLonde, Wilf R.; Pugh, John R. (1991). Inside Smalltalk . EE. UU.: Prentice-Hall Inc. pág. 8. ISBN  0-13-467309-3[ MVC] permite que las vistas se utilicen como partes para ensamblar en unidades más grandes; se pueden construir nuevos tipos de vistas utilizando vistas existentes como subvistas.
  22. ↑ Descripción general del sistema WebObjects (PDF) . Cupertino, CA: Apple Computer, Inc. Mayo de 2001. pág. 28. Los objetos de vista tienden a ser muy reutilizables y, por lo tanto, proporcionan coherencia entre aplicaciones. 
  23. ↑ "Descripción general de Action View" . Guías de Rails . Consultado el 27 de octubre de 2022. Las plantillas de Action View están escritas utilizando Ruby incrustado en etiquetas mezcladas con HTML.
  24. ↑ "Plantillas" . Documentación de Django . Consultado el 27 de octubre de 2022. Una plantilla contiene las partes estáticas del resultado HTML deseado, así como una sintaxis especial que describe cómo se insertará el contenido dinámico.
  25. ↑ "Preguntas frecuentes sobre Django: Django parece ser un framework MVC, pero llamas al controlador "vista" y a la vista "plantilla". ¿Por qué no usas los nombres estándar?" . Consultado el 27 de octubre de 2022 .
  26. ↑ "Descripción general de la vista de acción" . Guías de Rails . Consultado el 27 de octubre de 2022. Normalmente , las vistas comparten su nombre con la acción del controlador asociada...
  27. ↑ LaLonde, Wilf R.; Pugh, John R. (1991). Inside Smalltalk . EE. UU.: Prentice-Hall Inc. pág. 9. ISBN  0-13-467309-3... la vista conoce explícitamente el modelo y el controlador.
  28. ↑ Descripción general del sistema WebObjects (PDF) . Cupertino, CA: Apple Computer, Inc. Mayo de 2001. pág. 28. Un objeto Controller actúa como mediador entre los objetos Model y los objetos View en una aplicación. 
  29. ↑ "Descripción general de Action View" . Guías de Rails . Consultado el 27 de octubre de 2022. En Rails, las solicitudes web son gestionadas por el controlador de acciones y la vista de acciones. Normalmente, el controlador de acciones se encarga de comunicarse con la base de datos y realizar las operaciones CRUD cuando sea necesario. La vista de acciones se encarga de compilar la respuesta.
  30. 1 2 "Preguntas frecuentes sobre Django: Django parece ser un framework MVC, pero llamas al controlador la "vista" y a la vista la "plantilla". ¿Por qué no usas los nombres estándar?" . Consultado el 27 de octubre de 2022. En Django, una "vista" describe qué datos se presentan, pero una vista normalmente delega en una plantilla, que describe cómo se presentan los datos.
  31. ↑ Ejemplo sencillo del patrón arquitectónico MVC (Modelo-Vista-Controlador) para la abstracción
  32. ↑ LaLonde, Wilf R.; Pugh, John R. (1991). Inside Smalltalk . EE. UU.: Prentice-Hall Inc. pág. 8. ISBN  0-13-467309-3El controlador se encarga de la interfaz entre el usuario y el modelo/vista. Interpreta los caracteres del teclado, así como los movimientos y clics del ratón .
  33. ↑ LaLonde, Wilf R.; Pugh, John R. (1991). Inside Smalltalk . EE. UU.: Prentice-Hall Inc. pág. 11. ISBN  0-13-467309-3.
  34. ↑ Descripción general del sistema WebObjects (PDF) . Cupertino, CA: Apple Computer, Inc. Mayo de 2001. pág. 28. 
  35. ↑ "Descripción general de la vista de acción" . Guías de Rails . Consultado el 27 de octubre de 2022. Normalmente , las vistas comparten su nombre con la acción del controlador asociada...
  36. ↑ "Escritura de vistas" . Documentación de Django . Consultado el 27 de octubre de 2022 .
  37. ^ Buschmann, Frank (1996) Arquitectura de software orientada a patrones .
  38. ↑ Gamma, Erich et al. (1994) Patrones de diseño
  39. ↑ Moore, Dana et al. (2007) Aplicaciones profesionales de Internet enriquecidas: Ajax y más allá : "Desde el origen del patrón MVC, ha habido muchas interpretaciones del mismo. El concepto se ha adaptado y aplicado de maneras muy diferentes a una amplia variedad de sistemas y arquitecturas."
  40. 1 2 Alan Kay (23 de mayo de 2003). "¿Es Squeak realmente orientado a objetos ?" . Lista de correo de la Fundación Squeak . Recuperado el 26 de octubre de 2021 . 
  41. ↑ LaLonde, Wilf R.; Pugh, John R. (1991). Inside Smalltalk . Vol. 2. EE. UU.: Prentice-Hall Inc. págs. 8–9 . ISBN   0-13-467309-3.
  42. 1 2 Leff, Avraham; Rayfield, James T. (septiembre de 2001). Desarrollo de aplicaciones web utilizando el patrón de diseño Modelo/Vista/Controlador . Conferencia IEEE sobre Computación de Objetos Distribuidos Empresariales. págs. 118–127 . 

Bibliografía

Lecturas relacionadas
6 articulos
Architectural patternArchitectural patternAn architectural pattern is a general, reusable resolution to a commonly occurring problem in software architecture within a given context.[1] The ...Interfaz de usuarioInterfaz de usuario{{ cite journal }} |journal= {{ cite journal }} |journal= {{ cite journal }} |journal= {{ cite journal }} |journal= {{ cite journal }} |journal=ModeloModeloUn modelo es una representación informativa de un objeto, una persona o un sistema. El término originalmente designaba los planos de un edificio en...Interfaz gráfica de usuarioInterfaz gráfica de usuarioUna interfaz gráfica de usuario , o GUI ( / ˈɡuːi / [1] [ 2 ] GOO -ee ), es una forma de interfaz de usuario que permite a los usuarios interactuar...Aplicación webCaptura de pantalla de 2007 de Horde , una aplicación web de código abierto y de trabajo en grupo Una aplicación web (o web app ) es un software de...Principio de responsabilidad únicaPrincipio de responsabilidad únicaEl principio de responsabilidad única ( SRP ) es un principio de programación informática que establece que "Un módulo debe ser responsable ante un...