{"id":547,"date":"2016-01-21T18:51:09","date_gmt":"2016-01-21T18:51:09","guid":{"rendered":"https:\/\/possibleapp.com\/blog\/?p=547"},"modified":"2016-01-21T18:51:09","modified_gmt":"2016-01-21T18:51:09","slug":"que-es-mvc-y-por-que-es-tan-usado-en-el-desarrollo-web","status":"publish","type":"post","link":"https:\/\/possibleapp.com\/blog\/2016\/01\/que-es-mvc-y-por-que-es-tan-usado-en-el-desarrollo-web\/","title":{"rendered":"Qu\u00e9 es MVC y por que es tan usado en el desarrollo Web"},"content":{"rendered":"<p>Para entender la importancia del patr\u00f3n de dise\u00f1o \u201cMVC\u201d en la web es necesario entender que es y como funciona as\u00ed que comenzaremos por los conceptos b\u00e1sicos.<\/p>\n<hr \/>\n<h2><strong>\u00bfQu\u00e9 es un patr\u00f3n de dise\u00f1o?<\/strong><\/h2>\n<p>Un patr\u00f3n de dise\u00f1o es una soluci\u00f3n\u00a0reutilizable\u00a0en problemas con un contexto com\u00fan en el\u00a0dise\u00f1o de software. Podemos conceptualizarlo como una receta , pasos concretos a seguir que nos ayudar\u00e1n a resolver un problema. No cualquier cosa puede ser considerada un patr\u00f3n de dise\u00f1o,\u00a0puesto que deben cumplir ciertos objetivos o tener ciertas caracter\u00edsticas:<\/p>\n<ul>\n<li>Reutilizable en distintas circunstancias de dise\u00f1o.<\/li>\n<li>Efectivo en problemas similares.<\/li>\n<li>Permite evitar riesgos de\u00a0impidan reutilizar c\u00f3digo.<\/li>\n<li>Simplifican la forma de documentar una aplicaci\u00f3n.<\/li>\n<\/ul>\n<h2><strong>\u00bfQu\u00e9 es\u00a0MVC?<\/strong><\/h2>\n<p>Ahora\u00a0ya entenderemos si hablamos de que MVC (Model-View-Controller o Modelo-Vista-Controlador) es un patr\u00f3n de dise\u00f1o que separa los datos, la l\u00f3gica de negocios y las\u00a0interfaces de usuario. Como su nombre lo dice, est\u00e1\u00a0separado en tres componentes: modelo , controlador y vista.\u00a0Est\u00e1 basado en la ideolog\u00eda de separaci\u00f3n de conceptos y cumple perfectamente con los\u00a0objetivos de\u00a0los patrones de dise\u00f1o.<\/p>\n<h3><strong>Modelo<\/strong><\/h3>\n<p>Es la capa encargada de los <strong>datos<\/strong>, es decir, tiene\u00a0mecanismos para acceder a la informaci\u00f3n y tambi\u00e9n para actualizar su estado. Com\u00fanmente se encarga de comunicarse con la\u00a0\u00a0base de datos\u00a0mediante\u00a0funciones que acceder\u00e1n a las tablas y\u00a0realizar\u00e1n las\u00a0funciones habituales de datos.<\/p>\n<h3><strong>Vista<\/strong><\/h3>\n<p>Se trata del\u00a0c\u00f3digo que nos permitir\u00e1 presentar los datos que el modelo nos proporciona, como ejemplo podr\u00edamos decir que en una aplicaci\u00f3n web es\u00a0el\u00a0c\u00f3digo HTML que nos permite\u00a0mostrar lasalida de los datos procesados.<\/p>\n<h3><strong>Controlador<\/strong><\/h3>\n<p>Es la capa que sirve\u00a0de enlace entre la vista y el modelo. Env\u00eda comandos al modelo para actualizar su estado , y a la vista correspondiente para cambiar su\u00a0presentaci\u00f3n, pero no es el encargado de manipular los datos ni de generar una salida .<\/p>\n<hr \/>\n<p>Para comprender un poco mas este patr\u00f3n de dise\u00f1o veamos como funciona en una aplicaci\u00f3n web com\u00fan:<\/p>\n<p><a href=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2016\/01\/MVC.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-548\" src=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2016\/01\/MVC-300x225.png\" alt=\"MVC\" width=\"715\" height=\"536\" srcset=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2016\/01\/MVC-300x225.png 300w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2016\/01\/MVC.png 800w\" sizes=\"auto, (max-width: 715px) 100vw, 715px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>El usuario solicita una acci\u00f3n al servidor<\/li>\n<li>El servidor atiende la petici\u00f3n y manda a llamar al controlador<\/li>\n<li>El controlador llama al modelo necesario\n<ul>\n<li>El modelo atiende la petici\u00f3n y realiza las operaciones de datos correspondientes<\/li>\n<li>El modelo regresa el resultado<\/li>\n<\/ul>\n<\/li>\n<li>El controlador llama a la vista, envi\u00e1ndole los datos procesados del modelo\n<ul>\n<li>La vista presenta los datos<\/li>\n<\/ul>\n<\/li>\n<li>El controlador devuelve la vista al servidor<\/li>\n<li>El servidor presenta el resultado al cliente<\/li>\n<\/ul>\n<h2><strong>\u00bfPor qu\u00e9 MVC es una estrella en el mundo del desarrollo\u00a0web?<\/strong><\/h2>\n<p>Ahora que sabemos que es MVC y como funciona\u00a0hablaremos sobre su uso enfocado en la web. Aunque MVC es un patr\u00f3n de dise\u00f1o el cual fue ideado para aplicaciones de escritorio hace unos\u00a0<strong>40 a\u00f1os<\/strong> (en los 70\u2019s), resulta muy practico en la web por varias razones:<\/p>\n<h3><strong>Est\u00e1 enfocado en separar responsabilidades<\/strong><\/h3>\n<p>Si en este momento estas pensando \u201cy eso en que me afecta o beneficia\u201d , pues pensemos un poco en como est\u00e1n creadas las aplicaciones y sitios web actuales, HTML para los objetos o el marcado , CSS para el estilo y Javascript para la l\u00f3gica, cada uno con su propio enfoque y su propia responsabilidad, pues con MVC es lo mismo pero\u00a0incluyendo los componentes que mencionamos antes.<\/p>\n<h3><strong>Reutilizar C\u00f3digo<\/strong><\/h3>\n<p>Cualquier framework que creado a partir de MVC\u00a0\u00a0te permite reutilizar c\u00f3digo , regresar vistas totales o parciales, evitando duplicar estilos o contenido en las vistas. Todo el manejo de datos se realiza en los modelos, por lo que si modificas tu base de datos solo es necesario modificar el modelo correspondiente para que permita manejar los datos actualizados, sin necesidad de actualizar cada lugar donde es utilizado.<\/p>\n<h3><strong>Evitamos c\u00f3digo Espagueti<\/strong><\/h3>\n<p>Con este patr\u00f3n de dise\u00f1o reducimos y hasta eliminamos el uso de c\u00f3digo de servidor y de presentaci\u00f3n en un mismo lugar.<\/p>\n<h3><strong>Perfecto para equipos multidisciplinarios<\/strong><\/h3>\n<p><strong>\u00a0<\/strong> Con este patr\u00f3n de dise\u00f1o reducimos y hasta eliminamos el uso de c\u00f3digo de servidor y de presentaci\u00f3n en un mismo lugar. por lo que si\u00a0en tu equipo hay alguien encargado de maquetar la aplicaci\u00f3n, alguien mas se encarga de\u00a0crear las reglas de negocio y dem\u00e1s actividades, cada uno puede trabajar independientemente del otro sin sufrir afectaciones.<\/p>\n<h2>En conclusi\u00f3n<\/h2>\n<p>MVC es un patr\u00f3n de dise\u00f1o enfocado a separar las responsabilidades dentro de nuestra aplicaci\u00f3n y es muy utilizado en la web por su enfoque y las ventajas que ofrece con respecto a\u00a0algunas otras formas o patrones de desarrollo de aplicaciones web. Puedes encontrar frameworks pr\u00e1cticamente para cualquier lenguaje web, por ejemplo:<\/p>\n<ul>\n<li>ASP.NET MVC (C# , VBasic)<\/li>\n<li>Laravel (PHP)<\/li>\n<li>django (Python)<\/li>\n<li>Ruby on Rails<\/li>\n<\/ul>\n<p>As\u00ed que no hay excusa para comenzar a usar este genial patr\u00f3n de dise\u00f1o si es \u00fatil para el problema que estas atacando.<\/p>\n<blockquote><p><strong>Recuerda:<\/strong> Aunque los patrones de dise\u00f1o son muy \u00fatiles en el desarrollo de software, no siempre es necesario usarlos y eso no significa que la aplicaci\u00f3n est\u00e9 \u201cmal dise\u00f1ada\u201d, algunas veces no son necesarios y mucho menos obligatorios, a veces abusar de los patrones de dise\u00f1o puede traer mas problemas de los que resuelve.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p>Fuente: <a href=\"http:\/\/michelletorres.mx\/mvc-y-su-importancia-en-la-web\/\">michelletorres.mx<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para entender la importancia del patr\u00f3n de dise\u00f1o \u201cMVC\u201d en la web es necesario entender que es y como funciona as\u00ed que comenzaremos por los conceptos b\u00e1sicos. \u00bfQu\u00e9 es un patr\u00f3n de dise\u00f1o? Un patr\u00f3n de dise\u00f1o es una soluci\u00f3n\u00a0reutilizable\u00a0en problemas con un contexto com\u00fan en el\u00a0dise\u00f1o de software. Podemos conceptualizarlo como una receta , [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":548,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general"],"_links":{"self":[{"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/posts\/547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/comments?post=547"}],"version-history":[{"count":1,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/posts\/547\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/posts\/547\/revisions\/549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/media\/548"}],"wp:attachment":[{"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/media?parent=547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/categories?post=547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/tags?post=547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}