Blazor Server vs. Blazor WebAssembly: Just the Facts

Aquí hay un problema: ¿Cómo ejecutar .NET en el navegador usando algo diferente a JavaScript, sin una conexión al servidor y sin complementos o complementos?

La solución: Blazor WebAssembly

Aquí hay otro problema: ¿Cómo crear aplicaciones orientadas al cliente que se clasifiquen bien en Google?

The solution: Blazor Server

Para entender todo sobre cómo funcionan Blazor Server frente a Blazor WebAssembly, cómo difieren, cuándo se utilizan y cómo exactamente forman uno de los frameworks más interesantes y relativamente nuevos que existen, Blazor, hemos reunido las siguientes secciones en el artículo:

Try Ignite UI for Blazor

¿Qué es Blazor WebAssembly?

Blazor WebAssembly, también conocido como WASM, es un estándar desarrollado por el W3C (World Wide Web Consortium) para crear software que se ejecuta en el navegador web. A diferencia de JavaScript, Blazor WebAssembly es un software compilado que se ejecuta a velocidades casi nativas en su CPU.

Blazor programas de WebAssembly se pueden escribir en otros lenguajes, como C, que luego se pueden compilar en código de bytes de WebAssembly. WebAssembly no está destinado a reemplazar JavaScript, sino a ejecutarse junto con él para programas (o partes de programas) que necesitan ejecutarse lo más rápido posible.

Blazor, que cuenta con el apoyo de Microsoft, es un marco de interfaz de usuario web de código abierto y multiplataforma para crear aplicaciones de una sola página con .NET y C# en lugar de JavaScript. Blazor ofrece dos formas compatibles de hospedar aplicaciones web: Blazor Server y Blazor WebAssembly.

Blazor Blazor Server vs Blazor WebAssembly

Como se mencionó anteriormente Blazor puede ejecutar el código de C# del lado cliente directamente en el explorador, mediante WebAssembly. Dado que se trata de .NET real que se ejecuta en WebAssembly, puede reutilizar el código y las bibliotecas de las partes del lado servidor de la aplicación.

Como alternativa, Blazor puede ejecutar la lógica de cliente en el servidor. Los eventos de la interfaz de usuario del cliente se devuelven al servidor mediante SignalR, un marco de mensajería en tiempo real. Una vez completada la ejecución, los cambios necesarios en la interfaz de usuario se envían al cliente y se fusionan en el DOM.

Servidor Blazor

Blazor Server utiliza una aplicación ASP.NET Core estándar. Dentro de esa aplicación, puede integrar la funcionalidad del lado del servidor, como la integración de una base de datos de SQL Server a través de Entity Framework (un marco de asignación relacional de objetos de código abierto que originalmente se envió como parte integral de .NET Framework).

La aplicación Blazor Server se comunica con el explorador a través de una conexión constante mediante SignalR. Puede crear páginas del lado del cliente utilizando componentes Razor o páginas Razor.

Blazor Las aplicaciones de servidor son rápidas de cargar y fáciles de implementar. La compatibilidad con Blazor Server está disponible con .NET Core 3.1 LTS.

Blazor WebAssembly

Blazor WebAssembly permite que el navegador descargue la aplicación Blazor.

Esto significa que la aplicación Blazor se ejecuta en el navegador web. No es necesaria una conexión constante con un servidor para que la aplicación funcione.

Sin embargo, dado que es únicamente una aplicación del lado del cliente, no puede integrar directamente ninguna funcionalidad del lado del servidor en la aplicación Blazor.

Para ello, tendría que conectarlo con una aplicación del lado del servidor, como una API web ASP.NET Core.

Al igual que con Blazor Server, podemos crear páginas del lado del cliente utilizando componentes Razor o páginas Razor.

De forma similar a JavaScript, Blazor aplicaciones WebAssembly se ejecutan de forma segura en el dispositivo del usuario desde el entorno limitado de seguridad del explorador. Estas aplicaciones se pueden implementar como sitios estáticos completamente independientes sin ningún componente de servidor .NET, o se pueden emparejar con ASP.NET Core para permitir el desarrollo web de pila completa con .NET, donde el código se puede compartir sin esfuerzo con el cliente y el servidor.

Línea completa de características Blazor

• Blazor WebAssembly viene repleto de funciones para mantenerlo productivo en su próximo proyecto de aplicación web:
• Aproveche la productividad de C# y la escritura en tiempo de ejecución sólida
• Creación del ecosistema de .NET estable y maduro
• Reutilice fácilmente el código y las bibliotecas estándar de .NET existentes en el cliente y el servidor
• Modelo de componentes compartidos con aplicaciones de servidor Blazor, implementado en archivos de componentes Razor​
• Implementa tu aplicación como un sitio estático independiente o alójala con ASP.NET Core
• Cree aplicaciones web progresivas (PWA) con capacidades sin conexión e integración nativa del sistema operativo
• Soporte integrado para la autenticación
• Soporte integrado de globalización y localización
• Environment-based configuration
• IL trimming and build-time precompression
• Full stack debugging
• Excelentes herramientas con Visual Studio, Visual Studio para Mac y Visual Studio Code

¿Qué es SignalR?

SignalR es una biblioteca para que los desarrolladores ASP.NET simplifiquen el proceso de agregar funcionalidad web en tiempo real a las aplicaciones. La funcionalidad web en tiempo real es la capacidad de hacer que el código del servidor envíe el contenido a los clientes conectados al instante a medida que esté disponible, en lugar de que el servidor espere a que un cliente solicite nuevos datos. La aplicación de chat se usa a menudo como ejemplo de SignalR.

Blazor Server vs Blazor WebAssembly – When to Use?

El modelo de hosting que debes utilizar dependerá de los objetivos y de las características que quieras ofrecer en tu aplicación. Si planea utilizar la aplicación donde la conectividad a Internet es débil, puede optar por Blazor WebAssembly, ya que funciona bien sin una conexión de servidor. También es una mejor opción si prefieres trabajar sin conexión.

Por otro lado, si está buscando crear aplicaciones orientadas al cliente que se clasifiquen bien en Google, Blazor Server es una mejor opción.

Blazor WebAssembly vs Angular

Angular, el sucesor de AngularJS, fue creado por Google para permitir a los desarrolladores de frontend interactuar con el frontend y el backend al mismo tiempo. Debido a que Angular está basado en JavaScript, hay muchos recursos con los que trabajar.

Angular existe desde hace mucho tiempo, a diferencia de Blazor. Es un marco listo para producción con soporte completo para aplicaciones MVC / MVVM y está siendo utilizado por muchas grandes empresas. Blazor, por otro lado, está en continuo cambio y aún no ha alcanzado la madurez suficiente para lidiar con Angular, a pesar de ser muy prometedor. Angular herramientas también son más maduras con soporte completo de depuración en IDE como VS Code.

Para obtener una visión más profunda de la comparación, consulte el blog Comparación entre Blazor y Angular en 2022.

Panel de control de las elecciones presidenciales de EE. UU. integrado en Blazor WebAssembly

Para ayudar a ilustrar el tipo de visualizaciones y análisis que se pueden admitir en una aplicación Blazor, nuestro equipo de Infragistics creó el Panel de control de las elecciones presidenciales de EE. UU., una aplicación de muestra que compara datos actuales e históricos e identifica tendencias de datos.

Este panel proporciona visualizaciones interactivas de los datos electorales hasta las elecciones de 2020. Built-in Blazor (WASM) con Ignite UI for Blazor, esta aplicación de ejemplo presenta nuestros componentes Blazor Data Grid, Blazor Tree Map, Blazor Map y Blazor Gráfico de datos.

Blazor WebAssembly Components

Ignite UI for Blazor de Infragistics incluye componentes de Blazor diseñados profesionalmente, incluida la compatibilidad total con Blazor Server, Blazor WebAssembly y .NET 6. Puede crear aplicaciones web enriquecidas con sus conocimientos de C# y eliminar JavaScript complejo y difícil de aprender. Ignite UI for Blazor controles incluyen la cuadrícula de datos más rápida, 60+ gráficos de alto rendimiento (gráficos de acciones, gráficos financieros, mapas geoespaciales, cuadro combinado de varias columnas) y más.

Construimos nuestra cuadrícula de datos Blazor y Blazor mesa ligeras y con todas las funciones para enfrentar el desafío de mostrar grandes volúmenes de datos, al tiempo que proporcionamos todas las funciones interactivas que sus clientes esperan. Data Grid y todos los componentes de Ignite UI Blazor se diseñaron para las aplicaciones modernas de C# Blazor, incluida la compatibilidad total con Blazor WebAssembly, por lo que puede implementarlo en cualquier explorador moderno para obtener la mejor experiencia de usuario posible.

Y aquí hay algo más emocionante para Blazor desarrolladores. ¡Hemos lanzado App Builder para Blazor! ¿Qué significa esto para el proceso de desarrollo de aplicaciones?

• App Builder es una completa herramienta de arrastrar y soltar WYSIWYG basada en la nube que elimina la complejidad del diseño de la interfaz de usuario con un IDE basado en la nube que le permite crear aplicaciones y temas y agregar enlaces de datos en un instante.
• ¡Estarás creando tus aplicaciones de Blazor 10 veces más rápido!
• Con el App Builder actuando como su herramienta de desarrollo de bajo código, todo lo que diseñe dará como resultado código listo para producción para Blazor.
• Con la vista previa del código, puede ver cómo se genera su código fuente limpio y comprobable en tiempo real mientras crea su aplicación.

Obtenga más información sobre nuestra red de datos de Blazor ultrarrápida y vea un ejemplo de cuadrícula Blazor aquí.

If you are considering Blazor and have any questions, shoot me an email jasonb@infragistics.com!

Y si tienes curiosidad, puedes leer nuestros artículos comparativos sobre Blazor vs Angular y Blazor vs React.

Happy Coding!