Aprende en casa Ir a KODOTI
Aprende en casa KODOTI

¿Qué son las single-page application (SPA)?, ventajas y desventajas

Veremos que es un SPA, las ventajas y desventajas que este ofrece.

Rodríguez Patiño, Eduardo
Rodríguez Patiño, Eduardo
2020-07-07 | 1,732 lecturas

Las aplicaciones SPA es una tendencia hoy en día que se opta a la hora de desarrollar sitios o aplicaciones webs.

MULTI-PAGE APPLICATION

En primer lugar vamos a entender lo opuesto a un SPA, el cual vendría ser un MPA. Es decir que las navegaciones dentro de nuestra web obliga a nuestro browser a recargar todo el contenido de nuevo, es decir que los css, javascript, imágenes, html y demás contenidos volverán a ser cargados.

Nota: usualmente los browsers meten en cache los archivos estáticos como javascript, hojas de estilos, imágenes, video para agilizar la carga de las páginas web.

SINGLE-PAGE APPLICATION

Por otro lado, los SPA son aplicaciones web que se ejecutan en una sola página, es decir que una vez ha sido cargada la página inicial toda la navegación del proyecto será por medio de dicha página evitando de esta manera refrescar el browser.

Se suele hacer uso de un framework o librerías JavaScript para lograr el cometido, ya que estas implementan todo lo necesario para crear un proyecto SPA y para consultar el contenido al servidor como podría ser un listado de usuarios se haría a través de AJAX o WEBSOCKETS.

Analicemos la siguiente imagen:

  • El layout es nuestra plantilla de nuestro proyecto que abarca el header, content y footer. Por ende, el contenido principal de la web ya se cargó.
  • El content será cambiado dinámicamente en función a la URL que estemos navegando. Es decir, que nuestro SPA va asociar la URL o ruta por la que estamos navegando con una página que reemplazará lo que hay en el content.

VENTAJAS

  • Agiliza la lógica de negocio al procesarse en lado del cliente como bien podría ser cálculos de impuestos, sumatorias, etc.
  • Agiliza la navegación ya que todo el contenido inicial (css, js, imágenes, etc) es cargado de golpe, lo demás será el contenido que se quiera visualizar.
  • Ayuda abaratar los costos de servidor al dismunir el número de requests realizados.

DESVENTAJAS

  • Se pierde el SEO, aunque hay formas de evitarlo no es algo natural en un SPA ya que los robots no leen o interpretan contenido cargado en segundo plano.
  • La primera carga puede tardar un poco ya que el peso del proyecto estará en función al tamaño de este.
  • Curva de aprendizaje, nos obliga aprender nuevos frameworks o librerías para evaluar cual será la más adecuada para nuestro proyecto. En el mercado tenemos frameworks sencillos o más complejos de aprender que en función hacen lo mismo pero agregan o quitan conceptos alargando o disminuyendo la curva de aprendizaje.

¿QUÉ TIPO DE PROYECTOS SE RECOMIENDAN PARA UN SPA?

En realidad puede ser usado para cualquier tipo de proyecto pero los más recomendados en mi experiencia personal serían:

  • Aplicaciones móviles web.
  • Aplicaciones Back-Office para administrar una web. Por ejemplo, el administrador de una página hecha en Wordpress podría ser un SPA.
  • Aplicaciones de INTRANET.

Aplicaciones comerciales como un e-commerce personalmente creo que debemos enfocarnos en multi-page application haciendo uso de una tecnología back-end como PHP, .NET o lo que sea.

¿QUÉ TENEMOS EN EL MERCADO?

  • Los frameworks o librerías más populares para el desarrollo de SPAs en el mercado estan entre VueJs, Angular y React.
  • Para los fanáticos de .NET tenemos una propuesta llamada Blazor que ya pronto estaremos hablando de este y como hace uso de WebAssembly para crear un SPA.

¿TENEMOS ALGÚN CURSO SPA EN KODOTI?

Si, tenemos un curso de VueJs + ASP.NET Core 3.


Estudia con nosotros

🚀 Mejora tus oportunidades laborales