Elección de una interfaz de usuario web de ASP.NET Core

  • Artículo
  • 4 minutos para leer

ASP.NET Core es un marco de interfaz de usuario completo. Elija qué funcionalidades desea combinar que se ajusten a las necesidades de la interfaz de usuario web de la aplicación.

Ventajas y costos de la interfaz de usuario representada por servidor y cliente

Hay tres enfoques generales para crear una interfaz de usuario web moderna con ASP.NET Core:

  • Aplicaciones que representan la interfaz de usuario desde el servidor.
  • Aplicaciones que representan la interfaz de usuario en el cliente en el explorador.
  • Aplicaciones híbridas que aprovechan los enfoques de representación de la interfaz de usuario de servidor y cliente. Por ejemplo, la mayor parte de la interfaz de usuario web se representa en el servidor, y los componentes representados del cliente se agregan según sea necesario.

Hay ventajas e inconvenientes que se deben tener en cuenta al representar la interfaz de usuario en el servidor o en el cliente.

Interfaz de usuario representada en el servidor

Una aplicación de interfaz de usuario web que se representa en el servidor genera dinámicamente el lenguaje HTML y CSS de la página en el servidor en respuesta a una solicitud del explorador. La página llega al cliente lista para mostrarse.

Ventajas:

  • Los requisitos de cliente son mínimos porque el servidor realiza el trabajo de la lógica y la generación de páginas:
    • Excelente para dispositivos de gama baja y conexiones de ancho de banda bajo.
    • Permite una amplia gama de versiones de explorador en el cliente.
    • Tiempos de carga de página iniciales rápidos.
    • JavaScript mínimo —o ninguno— para extraer en el cliente.
  • Flexibilidad de acceso a recursos de servidor protegidos:
    • Acceso de bases de datos.
    • Acceso a secretos, como valores para las llamadas API a Azure Storage.
  • Ventajas del análisis de sitios estáticos, como la optimización del motor de búsqueda.

Ejemplos de escenarios comunes de aplicaciones de interfaz de usuario web representadas en el servidor:

  • Sitios dinámicos como los que proporcionan páginas, datos y formularios personalizados.
  • Mostrar datos de solo lectura, como listas de transacciones.
  • Mostrar páginas de blog estáticas.
  • Un sistema de administración de contenido orientado al público.

Inconvenientes:

  • El costo del uso de proceso y memoria se centra en el servidor, en lugar de en cada cliente.
  • Las interacciones del usuario requieren un recorrido de ida y vuelta al servidor para generar actualizaciones de la interfaz de usuario.

Interfaz de usuario representada por el cliente

Una aplicación representada en el cliente representa dinámicamente la interfaz de usuario web en el cliente, actualizando directamente el DOM del explorador según sea necesario.

Ventajas:

  • Permite una interactividad enriquecida que es casi instantánea, sin necesidad de un recorrido de ida y vuelta al servidor. El control de eventos de la interfaz de usuario y la lógica se ejecutan localmente en el dispositivo del usuario con una latencia mínima.
  • Admite actualizaciones incrementales, guardando formularios o documentos completados parcialmente sin que el usuario tenga que seleccionar un botón para enviar un formulario.
  • Se puede diseñar para ejecutarse en modo desconectado. Las actualizaciones del modelo del lado del cliente se sincronizan finalmente con el servidor una vez que se restablece la conexión.
  • Carga y costo del servidor reducidos, el trabajo se descarga en el cliente. Muchas aplicaciones representadas por el cliente también se pueden hospedar como sitios web estáticos.
  • Aprovecha las funcionalidades del dispositivo del usuario.

Ejemplos de interfaz de usuario web representada por el cliente:

  • Un panel interactivo.
  • Una aplicación con funcionalidad de arrastrar y colocar.
  • Una aplicación social con capacidad de respuesta y colaborativa.

Inconvenientes:

  • El código de la lógica debe descargarse y ejecutarse en el cliente, lo que se agrega al tiempo de carga inicial.
  • Los requisitos de cliente pueden excluir a los usuarios que tienen dispositivos de gama baja, versiones anteriores del explorador o conexiones de ancho de banda bajo.

Elección de una solución de interfaz de usuario de ASP.NET Core representada en el servidor

En la sección siguiente se explican los modelos representados en el servidor de la interfaz de usuario web de ASP.NET Core y se ofrecen vínculos para empezar a implementarla. ASP.NET Core Razor Pages y ASP.NET Core MVC son marcos basados en servidor para compilar aplicaciones web con .NET.

ASP.NET Core Razor Pages

Razor Pages es un modelo basado en páginas. Los intereses relativos a la interfaz de usuario y la lógica de negocios se mantienen separados, pero dentro de la página. Razor Pages es la manera recomendada de crear nuevas aplicaciones basadas en páginas o en formularios para desarrolladores que no están familiarizados con ASP.NET Core. Razor Pages proporciona un punto de partida más sencillo que ASP.NET Core MVC.

Ventajas de Razor Pages, además de las ventajas de representación del servidor:

  • Compilación y actualización rápida de la interfaz de usuario. El código de la página se mantiene con la página, mientras que se mantienen separados los intereses relativos a la interfaz de usuario y la lógica de negocios.
  • Se puede probar y se escala a aplicaciones de gran tamaño.
  • Mantenga las páginas de ASP.NET Core organizadas de una manera más sencilla que ASP.NET MVC:
    • La lógica específica de la vista y los modelos de la vista pueden mantenerse juntos en su propio espacio de nombres y directorio.
    • Los grupos de páginas relacionadas se pueden mantener en su propio espacio de nombres y directorio.

Para empezar a crear su primera aplicación ASP.NET Core Razor Pages, consulte Tutorial: Introducción a Razor Pages en ASP.NET Core. Para obtener información general completa de ASP.NET Core Razor Pages, su arquitectura y sus ventajas, vea: Introducción a Razor Pages en ASP.NET Core.

ASP.NET Core MVC

ASP.NET MVC representa la interfaz de usuario en el servidor y usa un patrón de arquitectura Modelo-Vista-Controlador (MVC). El patrón MVC separa una aplicación en tres grupos de componentes principales: modelos, vistas y controladores. Las solicitudes de usuario se enrutan a un controlador. El controlador es el responsable de trabajar con el modelo para realizar acciones del usuario o recuperar los resultados de las consultas. El controlador elige la vista para mostrar al usuario y proporciona cualquier dato de modelo que sea necesario. La compatibilidad con Razor Pages se integra en ASP.NET Core MVC.

Ventajas de MVC, además de las ventajas de representación del servidor:

  • Se basa en un modelo escalable y maduro para crear aplicaciones web de gran tamaño.
  • Clara separación de intereses para la máxima flexibilidad.
  • La separación de responsabilidades de Modelo-Vista-Controlador garantiza que el modelo de negocio puede evolucionar sin estar estrechamente acoplado a los detalles de implementación de bajo nivel.

Para empezar a familiarizarse con ASP.NET Core MVC, consulte Introducción a ASP.NET Core MVC. Para obtener información general sobre la arquitectura y los beneficios de ASP.NET Core MVC, consulte Información general de ASP.NET Core MVC.

Elección de una solución de ASP.NET Core representada por el cliente

En la sección siguiente se explican brevemente los modelos representados por el cliente de la interfaz de usuario web de ASP.NET Core y se ofrecen vínculos para empezar a implementarlos.

Blazor

Las aplicaciones de Blazor están formadas por componentes de Razor: interfaz de usuario web reutilizable implementada con C#, HTML y CSS. Tanto el código de cliente como el de servidor se escriben en C#, lo que permite el uso de código compartido y bibliotecas. Los componentes de Razor se pueden representar o representar previamente desde vistas y páginas.

Ventajas de componentes de Razor:

  • Crear interfaces de usuario web interactivas con C# en lugar de con JavaScript. El uso del mismo lenguaje para el código de front-end y back-end permite lo siguiente:
    • Acelerar el desarrollo de aplicaciones.
    • Reducir la complejidad de la canalización de compilación.
    • Simplificar el mantenimiento.
    • Aprovechamiento del ecosistema .NET existente de bibliotecas .NET.
    • Que los desarrolladores comprendan y trabajen en el código del lado cliente y del lado servidor.
  • Crear componentes de interfaz de usuario que se pueden reutilizar y compartir.
  • Ser productivo rápidamente con componentes de interfaz de usuario reutilizables de Blazor procedentes de los mejores proveedores de componentes.
  • Trabajar con todos los exploradores web modernos, incluidos los exploradores para dispositivos móviles. Blazor usa estándares web abiertos sin complementos ni transpilación de código.

Para obtener más información, vea Integración y representación previa de componentes Razor de ASP.NET Core.

Opciones de hospedaje de Blazor:

Los componentes de Razor tienen la flexibilidad de hospedarse mediante Blazor Server o Blazor WebAssemblypara aprovechar la representación del servidor o el cliente. Para obtener más información, vea Modelos de hospedaje de Blazor: Server frente a WebAssembly.

Aplicación de página única (SPA) de ASP.NET Core con marcos de JavaScript como Angular y React

Compile la lógica del lado del cliente para las aplicaciones de ASP.NET Core utilizando marcos de JavaScript populares, como Angular o React. ASP.NET Core proporciona plantillas de proyecto para Angular y React, y también se puede usar con otros marcos de JavaScript.

Ventajas de SPA de ASP.NET Core con marcos de JavaScript, además de las ventajas de representación en el cliente enumeradas anteriormente:

  • El entorno de ejecución de JavaScript ya se proporciona con el explorador.
  • Comunidad grande y ecosistema maduro.
  • Compile la lógica del lado del cliente para las aplicaciones de ASP.NET Core utilizando marcos de JS populares, como Angular o React.

Desventajas:

  • Se requieren más lenguajes de codificación, marcos y herramientas.
  • Es difícil compartir código para que se pueda duplicar alguna lógica.

Para empezar, consulte:

Elección de una solución híbrida: ASP.NET Core MVC más Blazor.

MVC y Blazor forman parte del marco ASP.NET Core y están diseñados para usarse juntos. Los componentes de Razor se pueden integrar en aplicaciones de Razor Pages y MVC en una solución Blazor WebAssembly o Server hospedada. Cuando se representa la página o la vista, los componentes se pueden representar previamente al mismo tiempo.

Beneficios de MVC más Blazor, además de los beneficios de MVC:

  • Representación previa:
    • Ejecuta componentes de Razor en el servidor y los representa en una página o vista.
      • Mejora el tiempo de carga percibido de la aplicación al configurar la interactividad.
  • Agrega islas de interactividad a las vistas existentes (páginas) con el asistente de etiquetas de componente.

Para empezar a familiarizarse con ASP.NET Core MVC más Blazor, consulte Integración y representación previa de componentes Razor de ASP.NET Core.

Pasos siguientes

Para más información, consulte: