Introducción a Blazor

Notas del editor

• #5: Antes de responder la pregunta, de qué es blazor.. Analicemos una aplicación web típica hoy en día. Normalmente, cuando creamos una aplicación para servidor, utilizamos alguna plataforma bastante popular, llámese java, .net, node.js entre muchas otras. Esto es algo común hoy en día.
• #6: También es común, que se escriban aplicaciones que se ejecutarán del lado del cliente, aplicaciones llamativas e interactivas. Esto para que la gente se quede en ellas el mayor tiempo posible.
• #7: Estos desarrollos, comúnmente utilizan algún framework popular, tales como vue, angular, react, etcétera, pero aprender alguno de ellos, e incluso, varios de ellos conlleva una ruta de aprendizaje algo tardada.
• #8: Y a final de cuentas, todos ellos, generan código javascript, el cual, admitámoslo, es algo lento y carece de características potentes que brindan lenguajes como C# ó Java.
• #9: Aunado a esto, si volvemos a ver los lenguajes y frameworks que se utilizan para el backend y el frontend, vemos que son completamente diferentes. Es decir, existe un déficit de utilización de tu lenguaje preferido en el lado del frontend, lo que significa, que tendríamos que aprender, sí ó sí, Javascript, ya sea puro o con algún framework.
• #10: Bueno, eso se acaba con la entrada de WebAssembly. Y seguramente ya se estaran haciendo la pregunta, de qué es eso de webassembly?
• #11: Bueno, Web Assembly es un formato de instrucciones binario para una máquina virtual basada en una pila (stack).  Y que quiere decir esto, bueno, esto quiere decir que al requerir apenas esfuerzo para convertir el código en binario, esto hace que WebAssembly sea más rápido. Y seguramente viendo la imagen, debes pensar, ¡ja! Facilísimo de programar. Bueno, la gran ventaja que nos ofrece webassembly,
• #12: Es que no hace falta trabajar con este lenguaje de programación, ya que, en la práctica, la aplicación web puede escribirse en C , C++ ó C#, la cual correrá en el sandbox del runtime javascript. Gracias a las empresas que se han esforzado para lograr llevar a cabo la conversion de nuestro codigo como C, C#, etc.. nosotros ya podemos escribir codigo en estos lenguajes, despues este pasa por un compilador, posteriormente se convierte en codigo binario y este se ejecuta de una manera instantanea en el navegador atraves de WebAssembly, que es uno de los sabores de Blazor.
• #13: El código fuente, será compilado a código bytecode de webassembly, y será ejecutado a una velocidad casi nativa. Pero no sólo eso, sino que no se necesita un plugin como anteriormente se hacía con flash, ó Silverlight, ya que webassembly, es una característica soportada por todos los navegadores modernos, tanto de escritorio, como móviles, lo que se resume en que podrás ejecutar tu aplicación, en cualquier lugar. Pero cómo se ejecuta el código C#, que es el lenguaje que nos interesa, en webasembly?
• #14: Bueno, esto es posible, ya que el rumtime de .net es compilado en código bytecode de webassembly. Este runtime, se ejceuta en el navegador, y esto permite que podamos ejecutar cualquier dll compatible con .net.
• #15: Lo que nos permite entonces, ejecutar código C# escrito con Blazor, que se ejecutará directamente en el navegador. ---------------------------------------------
• #17: Una vez que conocemos acerca de WebAssembly, y su importancia en el mundo blazor, ahora sí, es el momento de descubrir qué es realmente blazor. La definición por parte de Microsoft, nos dice, que blazor es un nuevo framework open-source (licencia Apache 2.0) que viene incluido de forma oficial en la nueva version de .NET Core 3.0 para desarrollar Single Page Applications (SPA) en el mundo .NET utilizando Razor y C#. Si vienes de otros frameworks que tienen el mismo objetivo, como Angular, Vue o React, todas estas características te sonarán porque ya las has visto antes. ¿Nada nuevo bajo el sol?
• #18: Esto lo que significa, es que tenemos un nuevo framework, que nos permitirá crear single page application Este nuevo framework blazor, es simple y divertido de usar , ya que podemos escribir código con C# en lugar de javascript. Las aplicaciones Blazor están basadas en componentes web reutilizables, que podemos escribir con c#, html y css. Este tema lo veremos más adelante. De igual forma, la lógica del cliente y servidor son escritos en el lenguaje c#, lo que te permite compartir código y bibliotecas. Y por último, es una característica de ASP.NET. ------------------------------------------
• #19: Pero obviamente, hay mucho por detrás de esta escueta descripción. Blazor incluye todo lo que necesitamos para construir aplicaciones profesionales en una única página (SPA) y de calidad:
• #20: Podemos utilizar Blazor del lado del cliente en cualquier navegador que soporte WebAssembly. Hoy en día cualquier navegador moderno soporta WebAssembly, por lo que en la mayoría de los casos no deberías tener problemas sin embargo es bueno verificar el soporte WebAssembly y verificando las versiones de los navegadores que soportan WebAssembly y ver si tu no necesitas darle soporte a una de esas versiones de los navegadores.
• #21: En la grafica podemos ver cuales son navegadores que soportan WebAssembly> Edge, FireFox, Chrome, Safari, Opera, iOS Safari, Android Browser, Opera Mobile, Chrome para Android, Firefox para Android y Samsung Internet. Como puedes ver los navegadores mas utilizados soportan WebAssembly, sin embargo es de entender que a veces necesitamos dar soporte a navegadores mas antiguos como Internet Explorer.Si este fuera su caso no podran utilizar Blazor del lado del cliente, además en la documentación oficial de Microsoft solamente listan a Internet Explorer 11 para ser soportada por Blazor del lado del servidor y aun asi se requiere el uso de Polley feels . En resumen, si necesitas solamente soportar navegadores modernos estas de suerte y puedes utilizar Blazor sin problemas. Sin embargo si necesitas darle soporte a navegadores como Microsoft Internet Explorer entonces probablemente no sea buena opción utilizar Blazor. https://caniuse.com/#feat=wasm
• #22: Tal vez aún tengan dudas, sobre porqué deberian utilizar blazor, para despejar esas dudas, vamos a enumerar una serie de beneficios que obtendremos al utilizar blazor. En primer lugar, al ser webassembly una característica implementada en todos los navegadores modernos, tanto desktop como móivles, podemos desplegar nuestras aplicaciones desarrolladas con blazor en casi cualquier dispositivo. Si ya has trabajado anteriormente con .net, seguramente, reutilizar tus conocimientos con C# te será de gran utilidad, ya que no tendrás que volverte un experto en jvascript, o algún framework similar como vue, angular, etcétera. Otra gran característica, y que aporta muchísimo valor, es que podremos reutilizar bibliotecas escritas en .net. Esto quiere decir que podrás utilizar bibliotecas del repositorio de nugets, o bien, alguna que hayas escrito anteriormente con un propósito específico. Contaremos con un rendimiento casi nativo, Y por útlimo, tendremos a nuestra disposición, los mejores entornos de desarrollo, estoy hablando, de Visual studio. Estas características, seguramente como me pasó a mí, te han sonado fantásticas, no es cierto? ----------------------------------
• #23: Blazor, inicialmente era un proyecto separado independiente en GitHub, pero finalmente Microsoft decidió integrarlo en ASP. NET Core 3.0. Éste nos brinda toda la potencia para construir aplicaciones web de tipo Single Page Applications capaces de ejecutar en cualquier navegador moderno que incluyen dentro del propio framework, inyección de dependencias, enrutamiento, componentes, seguridad, gestión de estado y errores, incluso interoperabilidad con JavaScript.
• #24: Blazor es un marco web diseñado para ejecutar el lado cliente en el explorador en un entorno de tiempo de ejecución de .NET basado en WebAssembly ( Blazor WebAssembly) o el lado servidor en ASP.NET Core (Servidor Blazor ). Independientemente del modelo de hospedaje, los modelos de la aplicación y los componentes son los mismos. A continuación, vamos a hablar sobre estos modelos de hospejado un poco más a detalle.
• #26: Hablemos primero de Blazor WebAsemby, en este tipo de proyecto, todos los recursos son descargados al navegador. Esto es, que los archivos htmls, css y javascript, si es que existen, son descargados al navegador. Adicionalmente, también son descargados el .net runtime, y cada uno de los archivos de la aplicación ó bibliotecas .net standard que requiera la aplicación. El .net runtime se ejecuta sobre web assembly, y esto nos proporciona un entorno en el cual, una vez se descarga la aplicación, no es necesaria una conexión a internet.
• #27: Los principales beneficios de este modelo de hospejade, son, en primer lugar, que tenemos un rendimiento casi nativo. También, al ser descargados los recrusos al navegador, se puede trabajar con un concepto fuera de línea. De igual forma, no es necesrio un servidor, ya que podemos generar los archivos estáticos, y trabajar directamente con ellos. En este tipo de aplicaciones, también se utilizan los recursos del lado del cliente, y por último, como ya hemos mencionado antes, es posible ejecutar estas aplicaciones en todos los navegadores modernos.
• #28: Si tuviéramos que enumerar algunos contras de blazor webassembly, serían los siguientes. Primero, al ser el navegador el que ejecuta toda la aplicación, estamos restringidos a sus capacidades. De igual forma, al ser descargado el .net runtime y todas las bibliotecas al mismo, esto provoca que exista un mayor tiempo en la descarga de los recursos. También, al ser descargada toda la información al navegador, no sería conveniente almacenar información sensible como contraseñas en este tipo de aplicaciones Y por último, al ser webassembly relativamente nuevo, los navegadores con mucha antigüedad no podrían ejecutar aplicaciones tipo blazor webassembly.
• #29: Los principales beneficios de este modelo de hospejade, son, en primer lugar, que tenemos un rendimiento casi nativo. También, al ser descargados los recursos al navegador, se puede trabajar con un concepto fuera de línea. De igual forma, no es necesrio un servidor, ya que podemos generar los archivos estáticos, y trabajar directamente con ellos. En este tipo de aplicaciones, también se utilizan los recursos del lado del cliente, y por último, como ya hemos mencionado antes, es posible ejecutar estas aplicaciones en todos los navegadores modernos.
• #30: El segundo modelo de hospedaje, se llama blazor server. En este modelo, los recursos son procesados por el servidor, y no se descarga ningún tipo de componente .net, ni el runtime .net. Va más enfocado en crear clientes ligeros, es decir, aplicaciones pequeñas que se descarguen rápidamente al navegador. La conexión con el servidor en tiempo real, se realiza a través de una conexión SignalR, con el uso de web sockets. Por último, gracias a que se ejecuta en el servidor, se tiene acceso al framework asp.net completo.
• #31: Los principales beneficios de este esquema, son que En primer lugar, se realiza una descarga pequeña. Se tiene acceso al framework asp.net completo. No se requiere webassembly, por lo que los navegadores antiguos puede ejecutar este tipo de aplicaciones también. Y por último, podemos acceder a bases de datos y almacenar claves de una forma más segura.
• #32: Pero también tenemos algunas desventajas. Primero, no tenemos un soporte a conexiones fuera de línea, es decir, siempre tendremos que tener una conexión activa a internet. De igual forma, necesitaremos sí o sí, un servidor asp.net core para ejecutar la aplicación. Y también, al necesitar de una conexión constante al servidor,la aplicación será menos rápida que blazor webassembly. Con esto no quiero decir que la aplicación se ejecutará lentamente, puede que ni siquiera notemos la diferencia de velocidad, pero siempre una aplicación blazor webaasembly se ejecutará más rápido que una aplicación tipo blazor server. Ahora que hemos visto teóricamente ambos hosting models, vamos a revisarlos de forma práctica. --------------------------------
• #35: Visto el punto anterior, no parece que Blazor aporte mucho sobre los numerosos frameworks existentes que persiguen el mismo fin, la construcción de aplicaciones SPA y que, de hecho, se parecen bastante entre ellos. Pero Blazor añade un objetivo, tan ambicioso como atractivo, que es lo que lo hace único…. Y es que nosotros como desarrolladores no tendremos que utilizar JavaScript, sino C#, lo cual aporta las siguientes ventajas interesantes:
• #36: No he dicho eso 😉 De hecho, sería una pena desaprovechar la gran cantidad de bibliotecas, componentes y código que la comunidad JavaScript ha estado aportando a la humanidad durante tantos años. Aunque Blazor está diseñado para que todo lo implementemos con C#, existen "puentes" que permiten utilizar JavaScript en dos direcciones, de forma que podemos aprovechar lo mejor de ambos mundos: Por ejemplo, si nos gusta Bootstrap, resulta sencillo crear componentes Blazor que encapsulen los componentes de este framework, tanto en lo relativo a presentación (marcado HTML) como el código de métodos y eventos JS que presentan ciertos elementos visuales, como los diálogos modales, pestañas, etc. De esta forma, los consumidores de estos componentes Blazor no tendrán que ver JS en absoluto, interactuarán con Bootstrap directamente desde C#, dando lugar a "componentes nativos Blazor".