{"id":1858,"date":"2015-12-09T17:58:57","date_gmt":"2015-12-09T17:58:57","guid":{"rendered":"http:\/\/www.blog.facilcloud.com\/noticias\/?p=1858"},"modified":"2016-07-18T20:12:32","modified_gmt":"2016-07-18T20:12:32","slug":"single-page-web-aplications-vs-multi-page-web-aplications","status":"publish","type":"post","link":"https:\/\/www.blog.facilcloud.com\/noticias\/single-page-web-aplications-vs-multi-page-web-aplications\/","title":{"rendered":"Single page web aplications vs multi page web aplications"},"content":{"rendered":"

Originalmente la web<\/a>\u00a0<\/span>\u00a0fue concebida utilizando \u00a0documentos de hipertexto enlazados entre s\u00ed. Luego se introdujeron los form tags y comenz\u00f3 la era de las \u00abaplicaciones web\u00bb.<\/p>\n

Hoy en d\u00eda, las aplicaciones web<\/a><\/span> pueden ser tan complejas como necesarias. Casi cualquier tipo de aplicaci\u00f3n podr\u00eda ser implementada como aplicaci\u00f3n web. Pero su\u00a0 funcionalidad requiere arquitectura avanzada de aplicaciones y dise\u00f1o. Hay dos piedras angulares para aplicaciones web: multi page web applications (MPA) y single page web applications (SPA).<\/p>\n

\"Banners<\/a><\/p>\n

\"Single<\/a><\/p>\n

MPA (en espa\u00f1ol, aplicaci\u00f3n de m\u00faltiples p\u00e1ginas) es la forma tradicional de aplicaci\u00f3n web<\/a><\/span>. Las aplicaciones de este tipo se ejecutan en m\u00faltiples p\u00e1ginas, cuando se necesita mostrar nuevos datos al usuario, este debe solicitar una nueva p\u00e1gina desde el servidor y luego mostrarla en el navegador web<\/a><\/span>. Este enfoque funciona bien para las p\u00e1ginas simples, pero cuando la aplicaci\u00f3n tiene una interfaz de usuario mayor, entonces puede llegar a ser muy complejo y cargado. El proceso de Generar la informaci\u00f3n en p\u00e1ginas web<\/a> complejas es tard\u00edo, lo que degrada la experiencia del usuario, ya que no puede seguir trabajando con la aplicaci\u00f3n mientras est\u00e1 en proceso de servir a una nueva p\u00e1gina. AL principio del 2000 las MPA mejoraron con la tecnolog\u00eda AJAX, que permite actualizar partes de la p\u00e1gina sin tener que recargarla de nuevo. Eso sin duda hace que la experiencia de usuario mejore, sin embargo, a\u00f1ade complejidad a la p\u00e1gina.<\/p>\n

Entre las ventajas que tiene este esquema es que facilita el SEO<\/em>, adem\u00e1s existen recursos y herramientas que han trabajado con esta arquitectura permiti\u00e9ndonos medir anal\u00edticas webs y haciendo un desarrollo m\u00e1s controlado. La gran desventaja de este sistema es la recarga total de la web<\/a><\/span> por cada contenido.<\/p>\n

\"Single<\/a><\/p>\n

SPA o Single Page Application (en espa\u00f1ol, aplicaci\u00f3n de una sola p\u00e1gina), es esencialmente una evoluci\u00f3n del patr\u00f3n de dise\u00f1o MPA + AJAX, donde se genera s\u00f3lo una sencilla p\u00e1gina \u00abshell\u00bb en el servidor. Las SPA surgieron de la necesidad de mejorar la experiencia de usuario y el flujo de trabajo. Podemos definirla como una aplicaci\u00f3n web que se ejecuta en una \u00fanica p\u00e1gina, logrando as\u00ed una experiencia de usuario m\u00e1s cercana a una aplicaci\u00f3n de escritorio. En una SPA el usuario no navega por un engorroso sistema de enlaces tradicionales si no que en su lugar, mediante el uso cada vez m\u00e1s extendido de JavaScript<\/a><\/span>, Ajax, HTML5<\/a><\/span> o una combinaci\u00f3n de las anteriores, se actualiza lo que el usuario ve siempre desde la misma p\u00e1gina (sin cambiar de URL ni refrescar el contenido entero).<\/p>\n

La ventaja de este enfoque, es que todos los datos est\u00e1n disponibles via API. Esto puede ser una gran ventaja porque exponer una api abre posibilidades de nuevas aplicaciones que pueden comunicarse con tu backend. Al ser totalmente independientes la API puede crecer independientemente de la aplicaci\u00f3n permitiendo un mantenimiento independiente. Sin embargo, no todo son ventajas. Ya que se implementa en el lado cliente bastante l\u00f3gica del negocio, permitiendo que cualquiera pueda leerla en nuestro c\u00f3digo javascript<\/a><\/span>, adem\u00e1s hay que reforzar la seguridad y trabajar con minificadores js. Tambi\u00e9n debemos tener en cuenta que de esta manera\u00a0hacemos trabajar mayormente al navegador.<\/p>\n

Antes de comenzar a implementar una aplicaci\u00f3n web debemos considerar cual es el objetivo. Quiz\u00e1s en el futuro todo tienda al modelo Single Page Application (SPA), ya que parece que aporta bastantes ventajas. El mercado ahora mismo est\u00e1 migrando a este tipo de modelos, sin embargo, todav\u00eda tienen gran rivalidad los dos modelos, y es totalmente compatible el empleo de ambas arquitecturas creando un modelo h\u00edbrido.<\/p>\n","protected":false},"excerpt":{"rendered":"

Originalmente la web\u00a0\u00a0fue concebida utilizando \u00a0documentos de hipertexto enlazados entre s\u00ed. Luego se introdujeron los form tags y comenz\u00f3 la era de las \u00abaplicaciones web\u00bb. Hoy en d\u00eda, las aplicaciones web pueden ser tan complejas como necesarias. Casi cualquier tipo de aplicaci\u00f3n podr\u00eda ser implementada como aplicaci\u00f3n web. Pero su\u00a0 funcionalidad requiere arquitectura avanzada de […]<\/p>\n","protected":false},"author":123457,"featured_media":1864,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[285],"tags":[21,20,71,16,17,733,6,173,10,7,100,89,35],"class_list":["post-1858","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programadores","tag-aplicaciones","tag-app","tag-apps","tag-cloud","tag-cloud-server","tag-developers","tag-elastic-cloud","tag-facilcloud","tag-java","tag-nube-elastica","tag-programadores","tag-software","tag-tecnologia"],"_links":{"self":[{"href":"https:\/\/www.blog.facilcloud.com\/noticias\/wp-json\/wp\/v2\/posts\/1858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blog.facilcloud.com\/noticias\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blog.facilcloud.com\/noticias\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blog.facilcloud.com\/noticias\/wp-json\/wp\/v2\/users\/123457"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blog.facilcloud.com\/noticias\/wp-json\/wp\/v2\/comments?post=1858"}],"version-history":[{"count":0,"href":"https:\/\/www.blog.facilcloud.com\/noticias\/wp-json\/wp\/v2\/posts\/1858\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blog.facilcloud.com\/noticias\/wp-json\/wp\/v2\/media\/1864"}],"wp:attachment":[{"href":"https:\/\/www.blog.facilcloud.com\/noticias\/wp-json\/wp\/v2\/media?parent=1858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blog.facilcloud.com\/noticias\/wp-json\/wp\/v2\/categories?post=1858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blog.facilcloud.com\/noticias\/wp-json\/wp\/v2\/tags?post=1858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}