Blazor: El presente y futuro del desarrollo web

Por norma general, para crear aplicaciones web es necesario trabajar sobre 2 entornos diferentes: uno para la parte del servidor (Back-end) y otro para la parte del cliente (Front-end).

A la hora desarrollar el Back-end, se deben tener conocimientos en lenguajes de programación como Java, .NET, Node o PHP, para posteriormente presentar toda esta información en el navegador de forma rápida y atractiva para el usuario, mediante JavaScript o a través de frameworks o librerías como React, Angular o Vue.

Esta diferencia tecnológica en ambos entornos, obliga a las empresas desarrolladoras a contar con diferentes perfiles que dispongan de altos conocimientos en los lenguajes tanto de la parte del cliente como la del servidor, lo que se traduce en mayores costes en el desarrollo del proyecto, y por lo tanto, para el cliente.

Es precisamente aquí donde entra en escena Blazor: Una tecnología desarrollada por Microsoft para crear aplicaciones web utilizando únicamente C#, que es un lenguaje de programación ampliamente utilizado por programadores Back-end de todo el mundo, y que ahora se puede utilizar para programar también el Front-end, reduciendo de este modo las exigencias tecnológicas y permitiendo a los desarrolladores trabajar de forma más rápida y centralizada.

A continuación, repasamos rápidamente la funcionalidad de las librerías y Frameworks más comunes en el desarrollo web, para entender con perspectiva todas las ventajas que ofrece Blazor.

JavaScript

JavaScript es un lenguaje de programación que nació en 1995 con el objetivo de hacer las páginas web más dinámicas e interactivas. En esta época, se empezaron a desarrollar las primeras aplicaciones web y los sitios comenzaban a incluir formularios complejos.

Con una velocidad de navegación lenta propia de la época, surgió la necesidad de crear un lenguaje de programación que se ejecutara primero en el navegador, de tal forma que, en el caso de que un usuario cometiera alguna falta en la introducción de la información, no tuviera que esperar la respuesta del servidor para ser informado de los errores existentes.

En otras palabras, la ejecución de JavaScript en el navegador del cliente proporcionó agilidad en la interacción con la página web. Esto se debe a que reduce el número de peticiones adicionales al servidor, permitiendo que la página web muestre actualizaciones de contenido sin necesidad de recargas adicionales.

Los ejemplos más típicos de funcionalidades desarrolladas con JavaScript son: Validaciones de formularios, animaciones 2D, gráficos 3D, interacciones con mapas, respuestas a pulsaciones de botones, añadir productos al carrito de la compra, o incluso filtrado por atributos de un catálogo de productos .

Como contrapartida, JavaScript también tiene algunas limitaciones:

• No tiene acceso directo a la información de la base de datos, por lo que siempre necesita conexión al servidor mediante una API.
• No tiene la capacidad de ejecutar múltiples procesos de forma simultánea.
• Tampoco fue concebido para crear aplicaciones de mediana o gran escala. Este es el motivo por el qu surgieron nuevos Frameworks y librerías como Angular, React o Vue, mejor adaptadas para este tipo de proyectos.

JQuery

JQuery es una biblioteca ideada para hacer más sencillo el trabajo con JavaScrypt. Ofrece una serie de funcionalidades que evitan el uso masivo de código, consiguiendo los resultados deseados en menos tiempo y espacio. Entre sus principales características merece la pena destacar:

• Selección de elementos DOM.
• Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
• AJAX.
• Eventos.
• Manipulación de la hoja de estilos CSS.
• Efectos y animaciones personalizadas.
• Compatibilidad con la mayoría de los navegadores.
• Sencillo de entender por los desarrolladores.
• Fácil de escalar y mantener.

Con las nuevas exigencias de calidad y rendimiento a los sitios web promovidas por los principales buscadores, JQuery ha comenzado a perder gran parte de su popularidad. Esto se debe principalmente a que es una librería pesada y difícilmente modularizable, cuya utilización arroja resultados negativos en informes de rendimiento como los que ofrece la herramienta Lighthouse utilizada por el algoritmo de Google.

Evolución hacia TypeScript: Código tipado y mejores capacidades programación

Tal y como hemos visto en uno de los apartados anteriores, JavaScript presenta ciertas carencias que dificultan el desarrollo para trabajar en proyectos grandes y complejos.

Por esta razón, en el año 2012, Microsoft crea TypeScript, un lenguaje de programación construido por encima de JavaScript con el objetivo de solventar estas limitaciones y pensado para desarrollar aplicaciones robustas con características avanzadas.

Gracias a sus características adicionales, permite realizar una formulación de los tipos de JavaScript mediante una representación estática de sus tipos dinámicos. Además, brinda la capacidad de definir variables y funciones tipadas sin perder la esencia de JavaScript, evitando errores en los tiempos de ejecución.

Funciona perfectamente con todas las librerías y frameworks del Front-end, como por ejemplo Angular, donde todas sus aplicaciones se escriben en este lenguaje.

Como inconveniente, TypeScript no es un lenguaje soportado directamente por los navegadores, por lo que se debe transpilar a JavaScript. Esto añade un paso más en el desarrollo, aunque en la mayoría de las ocasiones se automatiza través de un compilador nativo del entorno de desarrollo en el que se esté programando.

Librerías y Frameworks basados en JavaScript para crear aplicaciones web de última generación

Se pueden encontrar muchas bibliotecas y Frameworks de JavaScript para desarrollar sitios web y aplicaciones con características y funcionalidades de última generación. A continuación, exponemos las 3 principales de este tipo.

Angular

Es un Framework de código abierto creado por Google. Facilita el desarrollo de aplicaciones web SPA, implementando el modelo MVC (Modelo-Vista-Controlador). Utiliza TypeScript para potenciar el uso de JavaScript, utilizando HTML y directivas para insertar la lógica a través de Templates.

Permite crear aplicaciones mucho más ágiles gracias a que es posible reutilizar el código de otros proyectos sin apenas esfuerzo. Convierte los componentes creados en componentes web nativos, lo que aporta una gran versatilidad al poder reutilizarlos en otras aplicaciones.

React

Es una librería Open Source que usa como base JavaScript. Utiliza un componente llamado JSX (JavaScript eXtension) para juntar la lógica y el marcado en el mismo componente. Es decir, combina HTML, CSS y JavaScript en un solo paquete, reutilizando el código en diferentes lugares de la aplicación.

Se trata de una de las tecnologías Front-end más utilizadas, pero al ser una librería necesita de otros componentes para completar el desarrollo de aplicaciones web. Esto puede suponer una ventaja o una desventaja según como se mire. Por ejemplo, Angular es un framework que proporciona herramientas completas para desarrollar una aplicación web al 100%, pero no ofrece tanta libertad como React a la hora de escoger las tecnologías con las se desea trabajar.

Vue

Vue es un framework Front-end progresivo que utiliza JavaScript para crear interfaces de usuario. Se trata de una capa añadida a JavaScript formada por herramientas, convenciones de trabajo y un lenguaje particular que permite crear aplicaciones de manera rápida, agradable y práctica. En los últimos años se ha popularizado para la creación de aplicaciones tipo SPA.

Al igual que React, una de sus características más importantes es el trabajo a través de componentes. Estos componentes permiten desarrollar proyectos modularizados y fáciles de escalar, al mismo tiempo que se pueden reemplazar de manera sencilla en el caso de ser necesario.

Blazor: La nueva era de aplicaciones web

Hemos visto que para programar con las últimas librerías y frameworks basados en JavaScript, es necesario contar con técnicos altamente especializados en diferentes  lenguajes y técnicas de desarrollo. Por ejemplo, para programar en React, es necesario aprender al menos 5 tecnologías como TypeScript, Saga, Redux, Hooks o i18Next.

Blazor elimina esta necesidad, centralizando todos los conocimientos en un único lenguaje, el cual se transpila para generar aplicaciones web ágilmente y sin errores de ejecución.

A continuación, explicamos qué es Blazor y las razones por las que ofrece una experiencia de desarrollo web moderna y de alto rendimiento.

¿Qué es exactamente Blazor?

Técnicamente hablando, Blazor es un potente Framework creado por Microsoft que nace bajo la necesidad de crear un entorno de trabajo capaz de desarrollar Single Page Application (SPA) para los desarrolladores .NET, usando como lenguaje de programación C# y Razor.

Posibilita desarrollar aplicaciones web utilizando únicamente HTML, CSS y C#, sin necesidad de programar directamente con JavaScript. Esto significa que se puede escribir en el mismo lenguaje de programación tanto en el lado del servidor como en el lado del cliente.

Permite llamar desde C# a funciones de JavaScript y viceversa, consiguiendo una comunicación ágil entre ambos entornos. Para conseguirlo, Blazor utiliza WebAssembly, una tecnología muy reciente que permite ejecutar código binario en el navegador del usuario convirtiéndolo en código nativo de JavaScript, lo que ofrece un gran rendimiento en la web y elimina la necesidad de instalar complementos de terceros en el navegador para su ejecución.

Los desarrolladores pueden crear aplicaciones web vanguardistas con Blazor de forma más rápida y centralizada que con React, Angular o Vue, por lo que cabe esperar que Blazor, desbanque a sus competidores en los próximos años, dando la bienvenida a nuevos desarrolladores de ASP.NET.

Puntos clave de Blazor

Blazor ofrece las siguientes ventajas para los desarrolladores:

• Ya no es necesario conocer a fondo el lenguaje de JavaScript para desarrollar con JavaScript.
• Todo está centralizado en un único lenguaje de programación, escribiendo el código en C#.
• Es el propio SDK es el que se encarga de transpilar el código C# en su correspondiente JavaScript.
• Permite una comunicación total entre JavaScript, C# y viceversa.
• Se puede reutilizar el código, ecosistema y las bibliotecas de .NET ya existentes.
• Uso compartido de la lógica de aplicación en el servidor y en el cliente.
• Mayor rendimiento, confiabilidad y seguridad .NET.
• Utiliza IDE (Entornos de desarrollo integrados) tan potentes como Visual Studio o Rider en PC, Linux y macOS.

El futuro de Blazor y conclusiones

En definitiva, Blazor ha llegado para quedarse. Microsoft está apostando muy fuerte por este Framework dado que es idóneo para desarrollos en los que se requiera una alta carga de Front-end, desarrollando interfaces altamente enriquecidas e interactivas para el usuario.

Proporciona una gran agilidad a la hora de desarrollar gracias a la reutilización de componentes. Todo se desarrolla en C# y dependiendo de las necesidades del proyecto, se pueden crear aplicaciones desde el lado del cliente o desde el lado del servidor.

Microsoft empezará a utilizar Blazor para desarrollar aplicaciones .NET MAUI: un marco multiplataforma para la creación de aplicaciones móviles y de escritorio con C#, que se podrán ejecutar en Android, iOS, macOS y Windows. Podrá implementar la mayor parte de la lógica de la aplicación y del diseño de la interfaz del usuario utilizando únicamente un código base. Es un avance muy interesante debido a que se podrá utilizar para crear todo tipo de aplicaciones híbridas.

Zimaltec Soluciones siempre ha apostado por las tecnologías de Microsoft, y gran parte de su equipo de desarrollo web, viene utilizando Blazor desde sus primeras versiones.
En los últimos meses hemos desarrollado PWA (Progresiver Web App) muy similares a Twitter, donde se integra Blazor en el WebAssembly para crear  aplicaciones de páginas únicas que utilizan las APIs y funciones de exploradores modernos, comportándose como una aplicación de escritorio que puede trabajar sin conexión y/o carga instantánea.

Para más información sobre Blazor, sus beneficios, o cómo crear desde cero su proyecto online, no dude en contactar con nosotros.