Blazor: Pasado, Presente y Futuro

Portada

En el artículo de hoy vamos a hablar de Blazor, sobre su Pasado, Presente y Futuro. No será un tutorial ni una guía, no tratará de cómo realizar un Hello World ❌. 

En este articulo veremos ¿Qué es Blazor? ¿Qué es lo que las personas creen que es? ¿Cómo funciona? y ¿Qué será en un futuro? 🤖

Pasado 🕒

Acá vamos a hablar un poco acerca de lo que es Blazor y como era hace años. 

¿Qué es Blazor? 

Es un framework para aplicaciones web de código abierto, mantenido por Microsoft, que se utiliza para crear y mantener aplicaciones web de una sola página (SPA) con C# y Razor, y que además funcionan con WebAssembly. 

WebAssembly es un formato de código binario para poder ejecutar en el navegador scripts de lado del cliente. Al ser un lenguaje de bajo nivel, le permite al navegador poder interpretar los archivos DLL de NET Core y ejecutarlos sin necesidad de ningún servidor. ¿Cuál es la mayor ventaja? Tener la posibilidad de crear sitios web muchos más avanzados y rápidos. 

Esta mal pensar que Blazor compila C# a WebAssembly. WebAssembly le permite al navegador interpretar las DLL

The Blazor stack

Este nuevo framework surge con la visión de poder crear un sitio web con C# corriendo en el navegador, utilizando WebAssembly. 

Durante el desarrollo de esta visión, con el lanzamiento de NET Core 3.0 llegó la primera versión estable de Blazor Server. Este permite alojar componentes de Blazor en el servidor y manejar las interacciones de la interfaz de usuario a través de una conexión SignalR en tiempo real con el navegador. 

¿Cómo hace esto? 

El servidor mantiene en memoria una representación del estado de la página, que es modificada por mensajes SignalR que son enviados cuando se producen cambios o interacciones en la interfaz de usuario. 

blazor server

Mientras tanto todavía no tenemos una versión estable de Blazor WebAssembly. 

La manera en cómo interactúan el navegador y el servidor con Blazor Server es muy similar a WebForms que se utilizaba años atrás. De hecho, Blazor Server es la tecnología propuesta por Microsoft para reemplazar a WebForms, al promover un tipo de desarrollo conceptualmente muy parecido. 

📆 Algunas fechas interesantes: 

  • WebAssembly fue anunciado el 17 de junio de 2015.
  • El primer commit del repositorio de GitHub de Blazor fue el 5 de diciembre del 2017.
  • La primera versión experimental de Blazor WebAssembly fue anunciada el 22 de marzo del 2018. 
  • La segunda versión experimental de Blazor WebAssembly fue anunciada el 17 de abril del 2018. 
  • La primera versión estable de Blazor Server fue anunciada junto con NET Core 3.0 el 23 de septiembre de 2019. 
  • La primera versión estable de Blazor WebAssembly saldrá en mayo de 2020.   

@functions VS @code 

Comencé a aprender esta nueva SPA cuando salió NET Core 3.0 y empecé leyendo la siguiente página https://blazor-tutorial.net

Me gustó mucho como explica todo, pero el código nunca me compilaba porque tenían el código desactualizado. Hubo un antes y un después de Blazor a partir de Net Core 3.0. 

Antes

Después

Antes del “Antes”

El “Antes”, el de @function, es a partir de la segunda versión experimental. Así se veía el código del Counter de Blazor en la primera versión experimental: 

Es en la versión 0.2.0 donde comienza a ser una SPA, a poder tener componentes reutilizables y dejar de ser contenido estático como lo son las Views de Razor. 

Presente 

Sin ser estable, se fue haciendo muy popular, fueron surgiendo muchas librerías, Microsoft realizó la NET Conf: Focus on Blazor 2020 y la gente empezó a hablar bien y mal de él.

Para que conozcan más y sepan qué es lo que puede hacer y lo que no, voy a contarles algunas opiniones que fui escuchando y voy a dar mi opinión acerca de cada una de ellas basadas en mi experiencia. 

“Es la muerte de Javascript” 💀

Esta es la que más escuche y más voy a disfrutar expresar mi opinión. 

Es cierto que si uno quiere puede olvidarse de aprender las mil librerías y frameworks de Javascript y ser un Desarrollador .NET FullStack donde todo lo desarrollas con C#. 

Pero WebAssembly tiene un límite, es decir, va más allá de Blazor, y es que no podrías modificar el DOM, no podrías realizar un document.GetElementByID y mucho menos realizar animaciones con C#.  Además por esta misma razón para iniciar tu sitio con esta tecnología se necesitan importar los archivos blazor.webassembly.js y mono.js, que se encargan de coordinar las modificaciones en el DOM.

Para estas situaciones uno debe usar la abstracción IJSRuntime que permite emitir llamadas de interoperabilidad (intercambiar información y utilizar la información intercambiada) de JavaScript. De esta manera podríamos ejecutar una función de JS desde .NET o ejecutar un método de .NET desde JS. 

“Es la misma tecnología de hace 10 años 👴 pero con un nombre nuevo” 

En este comentario se hace referencia a Razor, que tiene más de 10 años, y hoy en día comenzar un proyecto grande con Razor no es tan valorado.

Hay un par de puntos a tener en cuenta: 

  • Primero que al utilizar WebAssembly los sitios corren mucho más rápidos. 🚴‍♂️
  • Segundo, que Blazor es la combinación de Razor con la arquitectura moderna de framework SPA. Esto hace que el código sea más limpio y ordenado como son las SPA de React o Angular. 🧹🧼
  • Tercero, no es necesario utilizar Razor, podes armar todo un componente manualmente solo con C# con el método BuildRenderTree, aunque no es algo que yo recomiende. 😒
  • Y por último, y por más obvio que sea lo voy a decir igual, podes correr código C# en el navegador. 🎉🎊

¿Saben que significa Blazor? Es el juego de palabras de Browser + Razor. 

“Con JavaScript haces de todo y tiene más comunidad, no vale la pena aprender Blazor” 

Con JavaScript haces de todo porque su comunidad es una de las más grandes y por eso mismo hay tantas librerías, frameworks y tecnologías. Todo por ser el lenguaje más utilizado en sitios web (diría que es el único lenguaje, pero todavía existe VbScript). Pero como verán, pronto habrán muchos más lenguajes que se ejecutaran en el navegador gracias a WebAssembly, y el gran crecimiento que tuvo JavaScript ahora lo puede tener cualquiera. Y si no me creen, esperen a leer la sección Futuro de este artículo. 😉

“Es inseguro” 

Totalmente de acuerdo, es decir, tener los archivos DLL en el navegador hace que cualquiera pueda descargarlas, descompilarlas y leer el código. Y más todavía si tenemos información delicada ahí. ¿Qué recomiendo? Que todo lo que sea información sensible se mantenga en el servidor, para estas situaciones está bueno usar Blazor Server. 

Futuro 

Por último, en esta sección les voy a contar que será Blazor en el futuro. 

Roadmap
Roadmap

Según la imagen, luego de lanzar Blazor WebAssembly van a anunciar PWA, Hybrid y Native

Y lo más interesante es que ya hay un gran avance en todas esas tecnologías. 💪 Vamos a ver una por una. 

Blazor PWA

Con solo buscar en Google “Blazor PWA” ya aparecen varios ejemplos. El que más me gusto a mi es el siguiente: https://wellsb.com/csharp/aspnet/create-pwa-from-blazor-app/. Ese artículo nos muestra que existe una librería para facilitar este desarrollo: https://github.com/SQL-MisterMagoo/Blazor.PWA.MSBuild. Tienen el código fuente y una simple demo donde se utiliza esa librería. 

Con estas herramientas podremos utilizar el sitio offline, recibir notificaciones push, o instalarlas en los equipos de los usuarios 

Screenshot de la demo
Screenshot de la demo

Blazor Hybrid 

Poder realizar aplicaciones Desktop con Blazor también ya es posible. Existe una librería llamada WebWindow. Básicamente lo que hace es crear una aplicación Desktop con una WebView donde encapsula cualquier sitio web.

Y de la mano viene la librería WebWindow.Blazor que proporciona de manera más directa compilar todo el sitio de Blazor a la aplicación Desktop. El resultado es exactamente el mismo sitio hecho con Blazor pero Desktop y multiplataforma. 

También se está experimentando para poder utilizar Blazor con Electron

Utilizando WebWindow.Blazor -  NET Conf: Focus on Blazor 2020
Utilizando WebWindow – NET Conf

Blazor Native 

Pareciera que todas las SPA deben poder armar sitios PWA, aplicaciones de escritorio y aplicaciones mobiles. Blazor no se queda atrás, Xamarin ha anunciado una versión experimental de Mobile Blazor Bindings para poder desarrollar aplicaciones Android y IOS con Blazor.  

Esto permitirá a que los desarrolladores .NET, que todavía no lo hicieron, puedan desarrollar aplicaciones con Xamarin con una curva de aprendizaje mucho más corta. 

Librerías de componentes 

Blazor se volvió tan popular que ya hay muchas librerías de componentes para poder reutilizar. 

Para que vos no tengas que estar armando funciones JavaScript, varias librerías ya traen componentes que encapsulan llamados a funciones JS a través del IJSRuntime, ya que con JavaScript se pueden realizar mejores experiencias de usuario. 

Y si te gusta programar con F# tenes un proyecto de ejemplo 👉 aquí.

Bonus Track: MicroFrontends

Hace unas semanas se me ocurrió una idea un poco descabellada. 🤪
Ya sabemos que con WebAssembly se van a poder crear herramientas mucho más potentes que se ejecuten solo en el navegador sin servidor como un editor de vídeo profesional, una herramienta de modelado 3D o si nos volvemos futuristas, un minador de Bitcoins, o en mi caso poder ejecutar Roslyn en el navegador.😱😱

Y también sabemos que Blazor no es el mejor (sin Javascript) creando sitios web con una buena UX. Pero ¿Saben que SPA sí podría lograr un sitio con una buena UX? React es una de ellas.💅

Entonces, se me ocurrió crear un proyecto donde tenga lo mejor de los mundos con las ventajas de la arquitectura de Micro Frontends 🥂 .

Con un poco de ayuda logre crear un sitio con una arquitectura de Micro Frontends, donde pueda ejecutar Roslyn en el navegador con Blazor y además tener un lindo layout hecho con React 😍.

Repositorio: https://github.com/lauchacarro/MicroFrontend-Blazor-React
Demo: https://awesome-swirles-33a9a7.netlify.com/
Micro Frontends: https://micro-frontends-es.org/

Screenshot React + Blazor
Screenshot de mi Demo

Aprende Blazor 

¿Todavía no aprendiste Blazor? Por suerte su curva de aprendizaje es muy corta. No te quedes atrás que este nuevo framework promete bastante. 
https://www.youtube.com/watch?v=K8dJh-aqEXw&list=PL0kIvpOlieSNdIPZbn-mO15YIjRHY2wI9 

Y si crees que yo te puedo dar una mano no dudes consultarme mediante mis redes sociales 😀