Comparación Blazor vs React: Explore las tecnologías

Cuando tenga la intención de desarrollar aplicaciones de una sola página con React, debe usar JavaScript. Sin embargo, cuando no desee lidiar con una curva de aprendizaje empinada, una biblioteca limitada que depende de bibliotecas externas que también traen sus paquetes a la aplicación, problemas de rendimiento repetitivos, etc., cambie a Blazor.

Lo bueno de este marco al compararlo con React:

• Aprovecha los últimos estándares web.
• No requiere complementos ni complementos adicionales para la implementación Blazor del lado del servidor o del lado del cliente con WebAssembly.
• Tanto el servidor como el lado del cliente están escritos en C#.
• Puede compartir bibliotecas y códigos más fácilmente.

Para comprender mejor las tecnologías, esta publicación de blog lo guiará a través de las principales diferencias entre Blazor y React, ayudándolo a tomar una decisión informada basada en la experiencia de su equipo, la complejidad de la aplicación, las necesidades de rendimiento y la capacidad de mantenimiento a largo plazo.

Comparación rápida Blazor vs React

Los comentarios de la comunidad (por ejemplo, en Reddit) generalmente se reflejan. Los desarrolladores de NET dan la bienvenida a Blazor para reducir el cambio de contexto del lenguaje y simplificar la infraestructura. Mientras que los especialistas en front-end favorecen React por la flexibilidad, la profundidad del ecosistema y el ajuste del rendimiento.

La comprobación de la realidad del rendimiento muestra que: 

• React generalmente gana en la primera carga, gracias a su carga útil delgada y estrategias de carga diferida.
• Blazor WASM puede ser más lento de arrancar, pero AOT (compilación anticipada) y la optimización mejoran significativamente el rendimiento en tiempo de ejecución.
• Blazor Server ofrece una carga inicial casi instantánea, pero necesita conectividad constante y administración de estado del lado del servidor.

Pero esto es lo que necesita saber.

	React	Blazor
Type	Biblioteca front-end: se centra en la interfaz de usuario del cliente y las interacciones de su sitio web.	Full Framework – client side (WASM) and server side (ASP.NET)
Developer	Facebook	microsoft
License	MIT	Apache
Language	JavaScript/JSX/TypeScript	C#
Performance	Peso ligero con un gran rendimiento.	Las aplicaciones del lado del cliente de WASM tienen una carga más pesada a la primera. Lado del servidor de alto rendimiento.
Curva de aprendizaje	Curva de aprendizaje empinada	Fácil de aprender
Soporte de PWA	Sí	Yes (Blazor WebAssembly)
Enrutamiento	Sí	Sí
Http Client	No incluido	Sí
Inserción de dependencias	No incluido	Sí
Requiere una conexión activa por cliente	No	Sí
Almacena el estado del componente del lado del servidor para cada cliente	No	Yes (Blazor Server)
Estilos con ámbito para componentes	Sí	Sí
Static Deployment	Sí	Yes (Blazor WebAssembly)
Server-Side Rendering	Sí	Sí
Optimizado para SEO / Crawlers	Sí	Sí
Tamaño del paquete	12 KB comprimidos con gzip, pero solo un marco de renderizado de cliente, no una pila completa.	Mínimo para Blazor Server. Tan bajo como 393 kb, hasta 780 kb para .NET Framework en una aplicación WASM del lado cliente.
Utillaje	CLI más muchas opciones de terceros.	CLI, Visual Studio y opciones de terceros.
Listo para la producción	React está listo para la producción hoy con años de implementaciones probadas en batalla de empresas como Uber, Drop Box, Twitter, PayPal, Netflix, Walmart y más.	Sí

Descripción general de Blazor: estado/características actuales

Blazor se basa en tecnologías web que ya existen como CSS y HTML. Pero este marco también le permite usar la sintaxis de Razor y C# en lugar de JavaScript para desarrollar una interfaz de usuario web reutilizable e interactiva.

• Puede hacer esto para aplicaciones basadas en cliente implementadas en WebAssembly.
• Y aplicaciones del lado del servidor con ASP.NET.

Con el servidor y el cliente escritos en C#, le permite compartir bibliotecas y códigos. Proporciona una plataforma para permitir el desarrollo de plataformas de aplicaciones de una sola página contemporáneas y vibrantes cuando se usa .NET.

Lo bueno de Blazor al compararlo con React es que aprovecha los últimos estándares web. Además, Blazor no requiere complementos ni complementos adicionales para la implementación Blazor del lado del servidor o del lado del cliente con WebAssembly.

¿Qué es WebAssembly?

WebAssembly generalmente se conoce como Wasm para abreviar. Es un estándar web que puede ejecutarse en navegadores web modernos. Aporta diversidad lingüística a la plataforma web. A diferencia de JavaScript, HTML y CSS, Wasm es un formato de instrucción binaria para programas ejecutables que está diseñado para ser más rápido que JavaScript y muy cercano a los lenguajes compilados. Sigue siendo un lenguaje interpretado, pero está diseñado para ser interpretado por máquinas, no por humanos. Wasm ejecuta navegadores modernos de forma nativa.

Versions of Blazor

Los desarrolladores tienen dos opciones a la hora de desarrollar una aplicación Blazor: Blazor servidor que se ejecuta en el contexto de ASP.NET en el servidor y Blazor cliente, que es un modelo de ejecución de WebAssembly del lado cliente.

• Blazor Servidor: ASP.NET Core servidor es el host de las aplicaciones desarrolladas en Blazor. Este hosting se realiza en formato ASP.NET Razor. A medida que los clientes en áreas remotas funcionan como clientes ligeros, el servidor asume la pesada carga de procesamiento. Un navegador web de los clientes descarga una pequeña página y actualiza su interfaz de usuario. Esto sucede a través de una sola conexión. Este servidor se publicó como parte de .NET Core 3.

• Blazor WebAssembly: en este modo, las aplicaciones de una sola página se descargan en el navegador web del cliente antes de ejecutarse. Aquí, el tamaño de la descarga será mayor en comparación con el servidor Blazor. Sin embargo, habrá una diferencia según la aplicación. Además, el procesamiento se realiza íntegramente en el hardware del cliente. El tiempo de respuesta rápido es el lado beneficioso de este tipo de aplicación. Como puede comprender por el nombre, el marco del lado del cliente no está escrito en JavaScript, sino en WebAssembly. También se pueden usar juntos.

Obtenga más información sobre Blazor WebAssembly y por qué tiene tanta repercusión.

Características clave

Como Blazor es relativamente nuevo, si no está siguiendo los desarrollos en el ecosistema web de Microsoft, existe la posibilidad de que aún no haya oído hablar de Blazor.  Sin embargo, existen algunos conceptos erróneos comunes en torno a Blazor, así que echemos un vistazo a lo que Blazor trae a la mesa.

CSS y HTML

Una pregunta que la gente suele hacerse cuando se acerca a Blazor es sobre CSS. Cuando Blazor utiliza plantillas Razor para la creación de componentes, el resultado se representa en HTML en el navegador. El CSS y el HTML generados por Blazor no son diferentes al navegador que otros CSS o HTML. El significado es que puede usar todas las características de CSS que incluyen preprocesadores como Sass, propiedades personalizadas de CSS y diseño receptivo en Blazor.

CSS Isolation

El aislamiento de CSS forma parte de Blazor. Esta función ayuda a evitar conflictos de estilo entre bibliotecas y componentes Blazor como Blazor Data Grid, etc. Esta característica se genera en tiempo de compilación. Durante este tiempo, Blazor se adjunta a un identificador a los selectores CSS que van con un atributo HTML.

Componentes del formulario

Blazor tiene características adicionales para ayudar con la generación de HTML, como componentes de entrada y formulario incorporados. La tarea común de crear un formulario con validación se abstrae de estos componentes opcionales. Al final, los componentes renderizan HTML estándar. Pueden usar completamente atributos HTML estándar como aria-, id y class, por nombrar algunos.

Muchos ingenieros de software de hoy en día ven a Blazor como la encarnación de la próxima gran novedad en los frameworks frontend, especialmente cuando se dirige a WebAssembly en lugar de JavaScript. Con Blazor, Microsoft está multiplicando el rumor en torno a WebAssembly al hacer que sea muy simple para los desarrolladores crear aplicaciones con él en Blazor.

¿Cómo se compara Blazor con React JS? Echemos un vistazo.

React Visión general – Estado/Características actuales:

React es una biblioteca de JavaScript flexible, eficiente y declarativa, diseñada para crear interfaces de usuario sofisticadas. Por supuesto, al comparar React con Blazor, ambos comparten la misma característica de ser bibliotecas/marcos del lado del cliente para aplicaciones modernas interactivas y ricas del lado del cliente.

Sin embargo, esto es lo que lo distingue:

Creado para el desarrollo de la interfaz de usuario 

• Permite a los desarrolladores crear componentes de interfaz de usuario reutilizables, incluidas cuadrículas de datos, gráficos y otros, de una manera más eficiente.
• Ideal para crear aplicaciones web modernas del lado del cliente.

Agnóstico del lenguaje y la plataforma

• Utiliza principalmente TypeScript/JavaScript.
• Los desarrolladores de otros orígenes pueden aprenderlo fácilmente.
• React Native permite el desarrollo multiplataforma: cree aplicaciones iOS, Android y web con código compartido.

Creado para la simplicidad y la reutilización 

• Desarrollado por Facebook para simplificar las tareas de codificación que eran tediosas en marcos anteriores como Angular.
• Promueve una arquitectura basada en componentes, lo que permite a los desarrolladores desglosar interfaces de usuario complejas y reutilizar el código de manera eficiente.

JSX/TSX para la productividad de los desarrolladores 

• Utiliza JSX (JavaScript XML), una extensión de sintaxis que le permite escribir código similar a HTML dentro de JavaScript.
• Facilita la creación de estructuras de código verificables y legibles por máquina, mejorando tanto el rendimiento como la capacidad de mantenimiento.

Cuando Facebook desarrolló React, otras tecnologías como Angular ya estaban presentes. En ese momento, la mayoría de los desarrolladores se veían obligados a hacer mucha codificación. Los desarrolladores, que utilizan otros frameworks, se enfrentan al reto de reelaborar la mayor parte del código. Buscaban un marco que les permitiera descomponer componentes complejos. Querían reutilizar los códigos para terminar sus proyectos a un ritmo más rápido. React lo hizo posible para ellos.

React Características principales

Si bien el rendimiento de Blazor vs React es importante, repasemos las características clave de React.

JSX

JSX, o JavaScript XML, permite a los desarrolladores escribir HTML en React y colocar esos elementos HTML en el DOM sin ningún método createElement() y/o appendChild(). Cuando se compila, JSX convierte las etiquetas HTML en elementos React. Aunque no es necesario, el uso de JSX facilita la escritura de aplicaciones React.

Virtual DOM

React utiliza DOM virtual. A su vez, los desarrolladores pueden crear aplicaciones que tengan un rendimiento más rápido al realizar una comparación de rendimiento Blazor frente a React. Al desarrollar React, los creadores han predicho acertadamente que la actualización del HTML antiguo sería un proceso costoso y lento. Con este entendimiento, crearon la idea de Virtual DOM. Con esta función, la plataforma puede saber exactamente qué volver a renderizar o cuándo no considerar algunas partes particulares de DOM. La razón es que la plataforma puede identificar cuándo han cambiado los datos. Una interfaz de usuario que reaccione rápidamente es muy importante para proporcionar la mejor experiencia de usuario.

Comparación de Blazor y React

Al hablar con los desarrolladores, realmente depende de con qué se sientan cómodos en su habilidad de desarrollo al decidir sobre React o Blazor.

• Si eres un desarrollador de .NET / Visual Studio, es lógico elegir un marco de pila completa como .NET y Blazor.
• Si es un desarrollador de JavaScript experimentado, puede elegir React, que es solo una biblioteca de interfaz de usuario, y luego elegir otras bibliotecas para crear su propia pila de React.

Tanto Blazor como React son herramientas de código abierto, y ambas tienen una inmensa popularidad entre los desarrolladores de aplicaciones.

¿Es Blazor mejor que React entonces? Al comparar los dos, la mayoría de las pruebas directas mostrarán React se cargará y representará más rápido que Blazor porque si se compara con Blazor como WASM, la aplicación descarga todo el entorno de ejecución de .NET junto con las bibliotecas DLL de la aplicación en el explorador. Esto da la percepción (y la realidad en al menos el primer renderizado) de que Blazor no puede seguir el ritmo del rendimiento de React.

Sin embargo, no significa que Blazor sea lento, pero el tiempo de descarga y renderizado que experimentan los desarrolladores de aplicaciones en React será mejor. Si tiene en cuenta toda la pila de React de una aplicación, su aplicación React podría experimentar una carga más lenta a la primera. Cada aplicación es diferente, cada experiencia será diferente. Blazor aplicaciones de servidor pueden superar React rendimiento.

Al comparar Blazor WebAssembly frente a React, ambos son buenos marcos con un impresionante conjunto de características. Encontrará que la mayoría de los desarrolladores web admiten ambos marcos y están satisfechos con el rendimiento de ambos. Por lo tanto, cuando hagas una comparación entre Blazor y React, siempre debes hacer tus propias pruebas y decidir qué funciona mejor para la experiencia de tu aplicación.

Should You Choose Blazor or React?

Tanto Blazor como React son excelentes opciones para su próximo proyecto. Todo se reduce a algunas consideraciones:

• ¿Está dispuesto a lidiar con algunos baches en el camino con un marco más nuevo como Blazor?
• ¿Estás dispuesto a sumergirte y aprender React para obtener el beneficio de una biblioteca de interfaz de usuario madura?
• ¿Es usted un desarrollador de C# que desea una vía de acceso más fácil a las aplicaciones web modernas en el ecosistema de Microsoft .NET?
• ¿Es usted un desarrollador de JavaScript experimentado que le gustaría elegir su propia pila de bibliotecas para respaldar el desarrollo de aplicaciones React?

Creemos que, independientemente de lo que elijas, hay compensaciones, pero podrás crear experiencias web hermosas, rápidas y receptivas en cualquiera de las dos opciones.

En Infragistics, apoyamos ambos marcos. Visite nuestras páginas de Ignite UI for React y Ignite UI for Blazor para conocer los detalles de cada uno.

Read more: Blazor vs Angular Comparison.