Compartir a través de


Elegir entre aplicaciones web tradicionales y aplicaciones de página única (SPA)

Sugerencia

Este contenido es un extracto del libro electrónico, Arquitecto de aplicaciones web modernas con ASP.NET Core y Azure, disponible en .NET Docs o como un PDF descargable gratuito que se puede leer sin conexión.

Diseñe aplicaciones web modernas con ASP.NET core y miniatura de portada de libro electrónico de Azure.

"Atwood's Law: cualquier aplicación que se pueda escribir en JavaScript, se escribirá finalmente en JavaScript".
- Jeff Atwood

Hay dos enfoques generales para compilar aplicaciones web hoy en día: aplicaciones web tradicionales que realizan la mayoría de la lógica de la aplicación en el servidor y aplicaciones de página única (SPA) que realizan la mayoría de la lógica de la interfaz de usuario en un explorador web, que se comunican con el servidor web principalmente mediante API web. Un enfoque híbrido también es posible, lo más sencillo es hospedar una o más subaplicaciones de tipo SPA enriquecidas dentro de una aplicación web tradicional más grande.

Use aplicaciones web tradicionales cuando:

  • Los requisitos del lado cliente de la aplicación son sencillos o incluso de solo lectura.

  • La aplicación debe funcionar en exploradores sin compatibilidad con JavaScript.

  • La aplicación está orientada al público y se beneficia de la detección y las referencias del motor de búsqueda.

Use una SPA en los casos siguientes:

  • La aplicación debe exponer una interfaz de usuario enriquecida con muchas características.

  • Tu equipo está familiarizado con JavaScript, TypeScript o desarrollo de BlazorWebAssembly.

  • La aplicación ya debe exponer una API para otros clientes (internos o públicos).

Además, los marcos de SPA requieren una mayor experiencia en arquitectura y seguridad. Experimentan una mayor renovación debido a actualizaciones frecuentes y marcos de cliente nuevos que las aplicaciones web tradicionales. La configuración de procesos automatizados de compilación e implementación y el uso de opciones de implementación como contenedores pueden ser más difíciles con las aplicaciones SPA que las aplicaciones web tradicionales.

Las mejoras en la experiencia del usuario que ha hecho posible el enfoque de SPA deben ser ponderadas con estas consideraciones.

Blazor

ASP.NET Core incluye un modelo para crear interfaces de usuario enriquecidas, interactivas y redactables denominadas Blazor. Blazor el lado servidor permite a los desarrolladores crear la interfaz de usuario con C# y Razor en el servidor y para que la interfaz de usuario se conecte interactivamente al explorador en tiempo real mediante una conexión de SignalR persistente. BlazorWebAssembly presenta otra opción para aplicaciones Blazor, lo que les permite ejecutarse en el explorador mediante WebAssembly. Dado que es código .NET real que se ejecuta en WebAssembly, puede reutilizar código y bibliotecas desde partes del lado servidor de la aplicación.

Blazor proporciona una nueva y tercera opción que se debe tener en cuenta al evaluar si se va a crear una aplicación web puramente representada por el servidor o una SPA. Puede crear comportamientos enriquecidos del lado cliente similares a SPA mediante Blazor, sin necesidad de un desarrollo significativo de JavaScript. Blazor Las aplicaciones pueden llamar a las API para solicitar datos o realizar operaciones del lado servidor. Pueden interoperar con JavaScript cuando sea necesario para aprovechar las ventajas de las bibliotecas y marcos de JavaScript.

Considere construir su aplicación web con Blazor cuando:

  • La aplicación debe exponer una interfaz de usuario enriquecida

  • El equipo está más cómodo con el desarrollo de .NET que el desarrollo de JavaScript o TypeScript

Si tiene una aplicación de formularios web existentes que está pensando en migrar a .NET Core o a .NET más reciente, puede que desee revisar el libro electrónico gratuito, Blazor para que los desarrolladores de Web Forms vean si tiene sentido considerar la posibilidad de migrarlo a Blazor.

Para obtener más información sobre Blazor, vea Introducción a Blazor.

Cuándo elegir aplicaciones web tradicionales

La siguiente sección es una explicación más detallada de las razones indicadas anteriormente para elegir aplicaciones web tradicionales.

La aplicación tiene requisitos simples del lado cliente, posiblemente de solo lectura

Muchas aplicaciones web se consumen principalmente de forma de solo lectura por la gran mayoría de sus usuarios. Las aplicaciones de solo lectura (o principalmente de solo lectura) tienden a ser mucho más sencillas que las que mantienen y manipulan una gran cantidad de elementos de estado. Por ejemplo, un motor de búsqueda puede constar de un único punto de entrada con un cuadro de texto y una segunda página para mostrar los resultados de la búsqueda. Los usuarios anónimos pueden realizar solicitudes fácilmente y hay poca necesidad de lógica del lado cliente. Del mismo modo, la aplicación orientada al público de un sistema de administración de contenido o blog normalmente consta principalmente de contenido con poco comportamiento del lado cliente. Estas aplicaciones se crean fácilmente como aplicaciones web tradicionales basadas en servidor, que realizan lógica en el servidor web y representan HTML para que se muestren en el explorador. El hecho de que cada página única del sitio tenga su propia dirección URL que los motores de búsqueda pueden marcar e indexar (de forma predeterminada, sin tener que agregar esta funcionalidad como una característica independiente de la aplicación) también es una ventaja clara en estos escenarios.

La aplicación debe funcionar en exploradores sin compatibilidad con JavaScript

Las aplicaciones web que necesitan funcionar en exploradores con compatibilidad limitada o sin JavaScript deben escribirse mediante flujos de trabajo de aplicaciones web tradicionales (o al menos poder revertir a este comportamiento). Las SPA requieren JavaScript del lado cliente para funcionar; si no está disponible, las SPA no son una buena opción.

El equipo no está familiarizado con las técnicas de desarrollo de JavaScript o TypeScript

Si el equipo no está familiarizado con JavaScript o TypeScript, pero está familiarizado con el desarrollo de aplicaciones web del lado servidor, es probable que puedan entregar una aplicación web tradicional más rápidamente que una SPA. A menos que el aprendizaje para programar SPA sea un objetivo o se requiera la experiencia del usuario que ofrece una SPA, las aplicaciones web tradicionales son una opción más productiva para los equipos que ya están familiarizados con su compilación.

Cuándo elegir SPA

La siguiente sección es una explicación más detallada de cuándo elegir un estilo de desarrollo de aplicaciones de página única para la aplicación web.

La aplicación debe exponer una interfaz de usuario enriquecida con muchas características

Los SPA pueden admitir una funcionalidad enriquecida del lado cliente que no requiere volver a cargar la página a medida que los usuarios realizan acciones o navegan entre áreas de la aplicación. Los SPA pueden cargarse más rápidamente, capturar datos en segundo plano y las acciones de usuario individuales son más sensibles, ya que las recargas de página completa son poco frecuentes. Los SPA pueden admitir actualizaciones incrementales, guardar formularios o documentos completados parcialmente sin que el usuario tenga que hacer clic en un botón para enviar un formulario. Los SPA pueden admitir comportamientos enriquecidos del lado cliente, como arrastrar y colocar, mucho más fácilmente que las aplicaciones tradicionales. Las SPA se pueden diseñar para ejecutarse en modo desconectado, realizando actualizaciones en un modelo del lado cliente que finalmente se sincronizan con el servidor una vez que se vuelve a establecer una conexión. Elija una aplicación de estilo SPA si los requisitos de la aplicación incluyen una funcionalidad enriquecida que va más allá de lo que ofrecen los formularios HTML típicos.

Con frecuencia, los SPA necesitan implementar características integradas en aplicaciones web tradicionales, como mostrar una dirección URL significativa en la barra de direcciones que refleje la operación actual (y permitir que los usuarios marquen o vinculen en profundidad esta dirección URL). Las SPA también deben permitir que los usuarios usen los botones atrás y adelante del explorador con resultados que no les sorprendan.

El equipo está familiarizado con el desarrollo de JavaScript o TypeScript

Para escribir SPA es necesario estar familiarizado con JavaScript o TypeScript y técnicas de programación y bibliotecas del lado cliente. El equipo debe ser competente para escribir JavaScript moderno mediante un marco spa como Angular.

Referencias: marcos SPA

La aplicación ya debe exponer una API para otros clientes (internos o públicos)

Si ya admite una API web para su uso por otros clientes, crear una implementación de SPA que aproveche estas API puede requerir menos trabajo que reproducir la lógica en el lado de servidor. Las SPA usan ampliamente las API web para consultar y actualizar datos a medida que los usuarios interactúan con la aplicación.

Cuándo elegir Blazor

La siguiente sección es una explicación más detallada de cuándo elegir Blazor para la aplicación web.

La aplicación debe exponer una interfaz de usuario enriquecida

Al igual que las SPA basadas en JavaScript, Blazor las aplicaciones pueden admitir un comportamiento de cliente enriquecido sin recargas de páginas. Estas aplicaciones son más sensibles a los usuarios, capturando solo los datos (o HTML) necesarios para responder a una interacción de usuario determinada. Diseñadas correctamente, las aplicaciones del lado Blazor servidor se pueden configurar para que se ejecuten como aplicaciones del lado Blazor cliente con cambios mínimos una vez que se admita esta característica.

El equipo está más cómodo con el desarrollo de .NET que el desarrollo de JavaScript o TypeScript

Muchos desarrolladores son más productivos con .NET y Razor que con lenguajes del lado cliente como JavaScript o TypeScript. Dado que el lado servidor de la aplicación ya se está desarrollando con .NET, el uso Blazor de garantiza que todos los desarrolladores de .NET del equipo puedan comprender y crear potencialmente el comportamiento del front-end de la aplicación.

Tabla de decisiones

En la tabla de decisión siguiente se resumen algunos de los factores básicos que se deben tener en cuenta al elegir entre una aplicación web tradicional, una SPA o una Blazor aplicación.

Factor Aplicación web tradicional Aplicación de página única Blazor Aplicación
Conocimientos necesarios del equipo con JavaScript/TypeScript Mínimo Obligatorio Mínimo
Compatibilidad con exploradores sin scripting Soportado No compatible Soportado
Comportamiento mínimo de la aplicación Client-Side Well-Suited Exceso Viable
Requisitos enriquecidos y complejos de la interfaz de usuario Limitados Well-Suited Well-Suited

Otras consideraciones

Las aplicaciones web tradicionales tienden a ser más sencillas y tienen mejores criterios de optimización de motor de búsqueda (SEO) que las aplicaciones SPA. Los bots de los motores de búsqueda pueden consumir fácilmente contenido de aplicaciones tradicionales, mientras que el soporte para la indexación de SPAs puede ser insuficiente o limitado. Si la aplicación se beneficia de la detección pública por parte de los motores de búsqueda, esto suele ser una consideración importante.

Además, a menos que haya creado una herramienta de administración para el contenido del SPA, puede requerir que los desarrolladores realicen cambios. Las aplicaciones web tradicionales suelen ser más fáciles para que los no desarrolladores realicen cambios, ya que gran parte del contenido es simplemente HTML y puede que no requiera un proceso de compilación para obtener una vista previa o incluso implementar. Si es probable que los no desarrolladores de su organización necesiten mantener el contenido de la aplicación, una aplicación web tradicional puede ser una mejor opción.

Las SPA brillan cuando la aplicación tiene formularios interactivos complejos u otras características de interacción del usuario. En el caso de aplicaciones complejas que requieren autenticación para su uso y, por tanto, no son accesibles por arañas del motor de búsqueda pública, las SPA son una excelente opción en muchos casos.