PARTE I: DOMINA EL DISEÑO DE UNA API
PARTE II: ARQUITECTURAS Y CONTROLADORES API
LABORATORIOS ¡Aplica ya! : DISEÑO Y VARIANTES API CON INMEMORY Y SQL SERVER

¿Qué es una SPA?

   Después de esta lección

Aprenderás a:

  • Comprender la diferencia con o sin una SPA.
  • Conocer la definición de SPA.
  • Beneficios de una SPA.

Cursos Institucionales.
El Aprendizaje Hecho Fácil. ¡Disfrútalo!

   Laboratorios ¡Aplica ya!


El material teórico de las lecciones se aplica en los videos tutoriales del curso.

¿Qué es una SPA


LA DIFERENCIA

SPA - ANTES DE - EASY TO MAKE

En la ilustración observamos el escenario clásico sin SPA. El usuario accede al sitio y solicita una lista de datos. La aplicación web realiza una petición Request al Web server quien ubica el recurso en la base de datos y los retorna en una nueva página HTML

Lo anterior significa que se ha recargado por segunda vez el sitio para poder mostrar los datos en la nueva página .

SPA - DESPUES DE - EASY TO MAKE

Con una SPA API el modelo cambia: 

El usuario realiza la solicitud request para obtener un listado de datos. La aplicación API en su backend despacha la solicitud al servidor para ejecutar el servicio GET. Este retorna —Response— los datos en formato Json o XML y los carga dentro del componente (veremos componentes Blazor en el curso). 

Observa que la página NO se creo o recargó nuevamente porque el servidor NO tuvo que crear una nueva página HTML para mostrar los resultados. Los datos son renderizados en el componente List de Blazor. Lo anterior por supuesto está acompañado de tecnologías como Websockets, SinglR y/o gRPC.

   SPA: Single Pages Application

O Aplicaciones de Página Única. Son aplicaciones web que cargan una sola página HTML y actualizan dinámicamente esa página a medida que el usuario interactúa con la aplicación.

   Carga dinámica

Cuando encontramos este término en definiciones de diseño web se nos está indicando que el contenido de una página, HTML, *.aspx, *,jsp, *.php, etc.,  se carga sin refrescar nuevamente la página o el sitio.

ESCENARIO: Pasarelas de pago.
De seguro haz realizado compras online —e-commerce, e-business— que nos permiten seleccionar nuestros productos o servicios y pagarlos electrónicamente. Cuando seleccionas un producto y lo agregas a la canasta o carrito de compras, observa que está se va incrementando con el total de productos… ¡sin necesidad de que tu refresques la página!.

Esa carga de los items de tu compra NO requirieron actualizar el sitio web cada vez que los seleccionabas. En el Backend o la parte oculta de código que gestiona ese proceso de compra —adición de productos a la canasta— existen algoritmos o código implementado por un programador de software que hace posible guardar en memoria caché de tu computadora o en la base de datos que maneja el sitio web, cada selección que vas realizando y la va reflejando o mostrando directamente en tu pantalla o formulario.

Una SPA se encarga de mostrar información inmediata sin necesidad de refrescar el sitio o navegador una y otra vez. Entonces ¿Cuáles son los beneficios de las SPA?

   La carga de trabajo

Cuando modelamos SPA la carga de trabajo para la actualización de los datos o la información de la página sin refrescarla o actualizarla se presenta en el lado del cliente, tu máquina.

De lo anterior se desprende el porqué de las fortalezas y ventajas de tecnologías como Blazor, Ajax, Angular entre otros.

   ¿Existe una sola SPA en mi sitio?

NO necesariamente!  En el modelamiento de un website existen 1:m (una a muchas) páginas con funcionalidades particulares. Cada una de estas puede ser una SPA. Es decir la arquitectura o mecanismos de una SPA se puede usar en 1:m páginas/vistas de un sitio web, dependiendo de los requerimientos del cliente.

Beneficios de una SPA


Dentro de los beneficios y ventajas de implementar SPA tenemos entre otros:

  1. Eficiencia en el uso del servidor: Cada clic en un botón, ComboBox, componentes de datos, o recarga/refrescamiento de una página o sitio implica una petición nueva al servidor; mayor tiempo de espera entre cada petición dependiendo del tráfico, mayor uso de red, recursos, etc. Además se reducen los costos al bajar los request.
  2. Desarrollo más fluido: el diseño de una SPA es más especializado para un programador senior, pero una vez adquirida la experiencia simplifica el diseño de muchas páginas o vistas con los adicionales de funciones, procedimientos, nuevas vistas, etc.
  3. Servicio: Por supuesto mejor UX —User Experience— de nuestros clientes o usuarios! Tendrán mucha funcionalidad, datos e información a la mano… en tiempo real y al instante!
  4. Marketing digital: La optimización y demás utilidades SEO son mucho más sencillas de implementar. Además el SEM se facilita por la interacción y llamadas en un solo sitio.
    Respecto al posicionamiento: los Robots no interpretan los mecanismos de un SPA del lado del cliente. Pero esto esto brinda un mejor control de robots y spams. Así, el posicionamiento se gestiona con alternativas distintas.
  5. Pruebas y analítica: probar una SPA es mucho más sencillo y rápido porque todo el modelo está a la mano. Además el desarrollo algorítmico y analítica del mismo es más intuitivo y accesible.
  6. Buenas prácticas: Debido a la gran cantidad de herramientas, bibliotecas y código especializado (API), nuestras Buenas Prácticas de Programación son una exigencia y un gana/gana.
  7. Seguridad: Las SPA requieren un cuidado especial en seguridad. Esto refina y profundiza nuestros conocimientos en esta área, especializando nuestra mano de obra.
  8. Independientes: Una SPA bien diseñada partiendo de su API, posee gran autonomía de crecimiento independiente de las aplicaciones de terceros.
  9. Multidispositivos: las SPA pueden ejecutarse de modo autónomo en múltiples dispositivos gracias a las API.
  10. Caché: El uso de la memoria Caché del lado del cliente se optimiza y permite entre otras cosas tener a mano los datos. Si tu Internet es inestable, una SPA permitirá que los datos sean actualizados en su momento en el servidor.

   SPA: Comunicación asincrónica con el servidor

Con una SPA la programación asincrónica es un imperativo. en una SPA las API bien construídas trabajan de modo asincrónico, cargando el contenido de modo asincrónico y evitado que la aplicación tenga que esperar a que finalicen las grandes operaciones antes de continuar con la ejecución.

Generalmente se hace uso de AjaxWebsockets. El segundo de mayor rendimiento y simplicidad. El asincronismo y uso de Websockets y Ajax lo practicaremos en los laboratorios del curso.

APLICA YA! - Easy To Make   EASY INTERACTIVO.  ¡Intentalo! Afina tus conocimientos.