Binary Coffee

Microsoft contraataca (Blazor)

blazor c# .net
**Blazor** es un nuevo *framework open-source* creado por el gigante de **Redmond Microsoft** que viene incluido de forma oficial en la nueva version de **.NET Core 3.0** para desarrollar Single Page Applicactions (SPA), utilizando **Razor** y **C#**. Su nombre proviene de las palabras “Browser” y “Razor”, este *framework* se ejecuta mediante estándares web, por lo que no será necesario utilizar ningún plugin ni realizar ninguna “transpilación” para que funcione, esto es posible porque todo el código se ejecuta en el navegador mediante un **.NET Runtime** implementado en **WebAssembly**. ¿En qué se diferencia **Blazor** de otras herramientas como **Silverlight**? **Blazor** se basa en HTML, CSS y otras tecnologías estándar de la web. Es un framework SPA moderno inspirado por otros frameworks ya existentes, como **React**, **Angular** y **Vue**, por lo que se trata de una herramienta muy potente para el desarrollo de frontales web con la potencia de **C#**. Para la ejecución de **Blazor** en el navegador, se ha de llevar a cabo el desarrollo de un **.NET Runtime** (Mono) que funcione sobre **WebAssembly** (para navegadores antiguos sobre asm.js). Esto es lo que ocurre al construir y ejecutar una aplicación en un navegador: 1. El código en **C#/Razor** es compilado en ensamblados de **.NET**. 2. Los ensamblados y el **.NET Runtime** son descargados por el navegador. 3. **Blazor** utiliza Jasvascript para lanzar el **.NET Runtime** y configurarlo para cargar los ensamblados referenciados. 4. La manipulación del DOM y las llamadas a la API del navegador son gestionadas por **Blazor** en tiempo de ejecución mediante la interoperabilidad con Javascript. ![Proceso de ejecucion](https://api.binary-coffee.dev//uploads/9927a636c34f4639bfde128b926a980d.png). ## Explicando el framework 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 SPA 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. Como vimos en la instalación existen dos modelos de aplicaciones **Blazor**: Aplicaciones Blazor de servidor En este modelo, basado en la plantilla **blazorserver**, las aplicaciones que se muestran en el navegador del usuario se comunican con el servidor mediante **SignalR Core**, de cara al usuario, toda la interacción en la IU sucede en el navegador, aunque en realidad la renderización de la página y la lógica de respuesta es ejecutada en el servidor de back-end. ![](https://api.binary-coffee.dev//uploads/453a333e53cc4c81bb1d1b939f1aa4d1.jpg) ## Instalación de las herramientas Antes de empezar, necesitamos en nuestro entorno de desarrollo la última versión de **.NET Core 3.0 SDK**, y las plantillas **Blazor** que se instalan con el siguiente comando desde la CLI: ``` dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview9* ``` Al finalizar, vemos las plantillas con prefijo **Blazor** que sirven para crear aplicaciones tanto del lado servidor (blazorserver), como lado cliente (blazorwasm), debe quedar como muestra la siguiente imagen: ![](https://api.binary-coffee.dev//uploads/694227e5c34f47559a861e2a8ed62fbe.jpg) En la lista vemos las 2 plantillas disponibles para crear aplicaciones **Blazor**: 1. **Blazor Server App (blazorserver)**: Esta plantilla genera una aplicación **Blazor** que se comunica entre el navegador del usuario y el servidor **.Net Core** en back-end. 2. **Blazor WebAssembly (blazorwasm)**: Esta plantilla crea una aplicación cliente **Blazor**, que funciona totalmente en el navegador del usuario mediante una tecnología llamada **WebAssembly**. Para desarrollar con **Blazor**, podemos elegir **Visual Studio Code** que no requiere configuración adicional o **Visual Studio 2019** que necesita añadir las extensiones desde el **MarketPlace**.
Opiniones