Creando nuestra primer aplicación con Blazor

Habíamos visto una introducción a esta nueva tecnología que es Blazor en este post acerca de sus características y funcionalidades. Hoy veremos como crear una aplicación y cuales son lo requisitos necesarios para crear nuestro ambiente de desarrollo para empezar a trabajar con esta tecnología.

Utilizaremos en este ejemplo Visual Studio Code y una maquina con Windows 10.

Veremos ahora los prerrequisitos necesarios antes de empezar nuestro desarrollo de la aplicación con Blazor:

Pasos para crear la aplicación con Blazor

  1. Crear una carpeta en nuestra computadora para nuestro proyecto
  2. Luego si mantenemos la tecla shift presiona y hacemos click  derecho sobre la carpeta recién creada se desplegará un menú contextual, seleccionamos la opción “Abrir la ventana de PowerShell aqui” (esto es si tenemos PoweShell configurado en nuestro sistema) sino podemos utilizar la línea de comandos de Windows.
  3.  Ejecutamos el siguiente comando que se muestra  aquí debajo para instalar los templates de Blazor en nuestra maquina. Este comando solo lo tendremos que correr la primer vez, luego no será necesario correrlo para desarrollar nuestra próxima aplicación Blazor.

Luego de Instalados los templates, vamos a crear nuestra primer aplicación de Blazor corriendo el siguiente comando:

Esto creará una aplicación Blazor con el nombre “primerAplicacionBlazor“.

Una vez creada la aplicación, abriremos Visual Studio Code para ver la estructura de la solución. En la siguiente imagen se puede ver que fue lo que creo el comando anteriormente ejecutado:

Lo que podemos ver aquí es el template por defecto provisto por Blazor. La carpeta Pages tiene todos los archivos de nuestras vistas, los cuales tienen extensión .cshtml. Por defecto en esta carpeta tenemos 4 archivos de vistas en el proyecto:

  • _ViewImports.cshtml: Este archivo importará la vista principal de nuestra aplicación Blazor.
  • Counter.cshtml: Esta página contiene el siguiente código:

En la primer parte del código, es definida la ruta para esta página usando la directiva @page. Esto significaría que, si agregamos /page a la  URL de la aplicación, seremos redireccionados a esta página.

La sección del HTML contiene un botón que llama al método IncrementCount en el evento onClick. El método IncrementCount es definido en la sección @functions, y incrementa el valor de la varianle entera currentCount cada vez que es invocada.

El valor de la variable currentCount es deplegada usando la etiqueta <p> en la interfaz de usuario.

  • FetchData.cshtml: Esta página nos muestra como obtener datos desde un archivo JSON usando una Web API..

Aparte de la configuración de la ruta al principio del código de la página, también vemos que se esta inyectando un servicio HttpClient usando inyección de dependencias para facilitar una llamada a la Web API a través de HTTP.

Dentro de la sección @functions, se ha definido una clase WeatherForecast y creado una variable que es un vector, cuyo nombre es  forecasts del tipo WeatherForecast y que guardará la información que nos devuelve la llamada a la Web API.

El valor de los pronósticos será mostrado en una tabla HTML utilizando una sentencia de repetición foreach.

Obtendremos los datos de los pronósticos utilizando HTTP dentro del método OnInitAsync. Este método es llamado cuando el componente FetchData es inicializado, el cual asegura que los datos se completen en la interfaz de usuario a medida que la página web termina de cargarse.

  • Index.cshtml: Esta página contiene contenido estático y es la primer página que será desplegada en el navegador.

La carpeta Shared contiene las páginas que serán compartidas a través de todos los componentes y contiene las siguientes tres páginas:

  • MainLayout.cshtml: Configura el diseño principal de nuestra aplicación.
  • NavMenu.cshtml: Muestra un menú de navegación en la parte izquierda de la aplicación
  • SurveyPrompt.cshtml:  Formulario de consulta para proporcionar comentarios de Blazor

Dentro de la carpeta wwwroot, encontramos el archivo index.html. Dentro de este archivo tenemos la referencia al archivo  blazor.webassembly.js el cual necesitará Blazor para ejecutarse.

El archivo contiene el siguiente código:

Con respecto a los archivos Program.cs y Startup.cs tienen el código necesario para ejecutar la aplicación Blazor. Veremos a continuación cual es su función en la ejecución de la aplicación.

Como es el proceso de ejecución de Blazor ?

El punto de entrada de la aplicación (entry point) es el método Main, el cual esta definido en el archivo Program.cs. Este archivo contiene el siguiente código:

El método Main llamará al método CreateHostBuilder, el cual luego llamará al método UseBlazorStartup . UseBlazorStartup esta definida en la metada de la aplicación y es usada para configurar le interfaz Microsoft.AspNetCore.Blazor.Hosting.IWebAssemblyHostBuilder (una abstracción para configurar una aplicación basada en Blazor).

La clase Startup es difinida en el archivo Startup.cs y contiene el siguiente código:

El método Configure de la clase Startup llamará al método AddComponent, y proveerá el selector <app>, definido en Index.cshtml como un parámetro. El Método AddComponent asociará el tipo componente con la aplicación, y esto causará que sea mostrado en el elemento DOM especificado. Por lo tanto, el primer elemento  (elemento raíz) que será desplegado en el navegador sera <app>. Luego el archivo blazor.webassembly.js será cargado en el navegador el cual sera manejado por Mono runtime y cargará los archivos DLLs necesarios para la aplicación.

Generación del HTML por Blazor

Hasta aquí vimos como una aplicación Blazor se ejecuta. Luego la siguiente pregunta que nos podríamos hacer es,¿Cómo se genera y  muestra el código HTML en el navegador ?.

Blazor usa el DOM del navegador para generar las páginas Web, pero C# no puede acceder a los elementos DOM directamente. Por lo tanto, Blazor usa JavaScript interop para acceder al DOM y manipular los elementos del DOM, como por ejemplo divs, buttons, textboxes, etc.

Veamos como es el proceso de trabajo:

  1. El código C# genera un árbol de renderizado. Un árbol de renderizado/procesamiento es una estructura jerárquica de los componentes de la interfaz de usuario definidos en nuestra página ( la página CSHTML).

2. El árbol de procesamiento es enviado a la parte de JavaScript de Blazor  y  el código de JavaScript cambiará el contenido del DOM de acuerdo a la estructura del árbol de procesamiento.

3. Cada vez que el usuario interactúa con la interfaz de usuario con un click del ratón o presionando una tecla, crea un envento. El código JavaScript escucha el evento generado por el usuario y luego llama internamente la clase BrowserRenderEventDispatcher para enviar el evento a C#.

4. El evento se procesa mediante el código C#, que realizará los cambios necesarios.

5. Estos cambios realizados por el código C# deben transferirse a la interfaz de usuario. Por lo tanto, la parte de JavaScript de Blazor analiza el árbol de procesamiento una vez más y procede a aplicar solo los cambios de la interfaz de usuario (no toda la interfaz de usuario) al DOM que se han modificado.

¿Cómo generara los arboles de renderizado Blazor ?

En la sección anterior, hemos visto como  los arboles de procesamiento cumplen un papel fundamental  en la generación del HTML para nuestra aplicación. Pero otra pregunta que quedaria en el tintero es, ¿ Cómo se genera el árbol de procesamiento ? La respuesta a esta pregunta es que se genera a partir del código Razor cuando se compila la aplicación. Como sabemos Razor es un motor de vistas que combina C# y HTML para generar controles web dinámicos que se mostrarán en la página web. Cuando el proyecto es compilado, el motor de Razor genera código C# a partir del código de Razor.

Digamos que tenemos un archivo Razor con el nombre yyyyy.cshtml. Cuando se crea la aplicación, se genera un archivo de código C# con el nombre yyyyy.g.cs. Este archivo tiene un método BuildRenderTree que crea el árbol de procesamiento desde nuestros elementos de la interfaz de usuario.

Para entender un poco más acerca de los árboles de procesamiento vamos a compilar nuestra aplicación:

Abrimos la carpeta donde tenemos nuestro proyecto de Blazor con Visual Studio Code. Vamos al menú principal “View” | “Terminal” para abrir la ventana de terminal del Visual Studio Code.

Corremos el siguiente comando:

Una vez que la compilación ha finalizado satisfactoriamente, generará archivos con la extensión g.cs en la carpeta \obj\Debug\netstandard2.0\Pages, correspondiente a todas nuestros archivo de vistas en la carpeta Pages. Vamos a \obj\Debug\netstandard2.0\Pages y abrimos Counter.g.cs. Este archivo debería tener el siguiente código:

La clase definida en este archivo tiene el mismo nombre que nuestro archivo de vista, esto es Counter. Dentro de la clase Counter, se ha sobrescrito el método BuildRenderTree para crear el árbol de procesamiento desde nuestros elementos de la interfaz de usuario. Podemos también observar que las variables y métodos definidos en la sección @function de nuestra vista  también se definen aqui. Todos estos archivos de código C# que tienen extension g.cs son compilados a archivos con la extension .dll en tiempo de ejecución, y luego son descargados al navegador por mono.wasm.

Después de la compilación satisfactoria, un archivo blazor-boot.json es también creado dentro de la carpeta \obj\Debug\netstandard2.0\blazor. Este archivo contiene el siguiente código:

Este código contiene el punto de entrada de nuestra aplicación, y también las referencias a los archivos de ensamblado de .NET (.NET assembly) que serán descargados al navegador por mono.wasm.

Ejecución de la aplicación Blazor

Bien, hemos llegado al momento de correr nuestra aplicación Blazor.

Para ejecutar nuestra aplicación Blazor en el navegador seguiremos estos pasos:

1. Vamos a la ventana integrada de comandos de Visual Studio
2. Ejecutamos el siguiente comando

La aplicación se ha ejecutado, y nos devuelve dos URLs en la cual la aplicación esta ejecutando.

Una URL es usando el protocolo http, mientras que la otra es usando el protocolo https. Necesitamos abrir alguna de estas URLs en las cuales la aplicación esta escuchando en el navegador.

En este ejemplo hemos abierto la URL http://localhost:5001/ en el navegador de Google Chrome. Mientras carga la aplicación, abrimos la herramienta de desarrollador que tiene el navegador. Vamos hasta el tab de Network y veremos el proceso de carga de la aplicación Blazor.

Como señalábamos antes, podemos ver todo el proceso de ejecución de Blazor aquí. blazor.webassembly.js es el primer archivo que se descarga en el navegador. Luego, el navegador carga el archivo blazor-boot.json y después de eso, el archivo .NET runtime de mono.js. es descargado en el navegador. Luego de esto, mono.wasm descarga el archivo de la aplicación primerAplicaciónBlazor.dll. El navegador descargará  luego el resto de archivos de ensamblados mencionados en el archivo blazor-boot.json.

La primer página a ser desplegada en el navegador es la página Home, Esta es muy básica, y mostrará un mensaje de bienvenida y un link a la encuesta sobre Blazor.

El lado izquierdo de la página web tiene un menú de navegación , que contiene enlaces a las páginas de inicio, Contador y Fetch Data. El menú de navegación es un componente compartido, definido en el archivo \ Shared \ NavMenu.cshtml. Si hacemos click en Counter en el menú de navegación, seremos redirigidos a la página Contador, como vemos en la imagen aquí debajo:

Si nos fijamos la URL tiene agregado /counter. Esto representa la ruta de esta página, la cual fue definida usando la directiva @page en el archivo counter.cshtml. Esta página tiene un botón que incrementará el contador cuando sea clickeado. El valor del contador será desplegado en la pantalla cada vez que presione el botón.

Si hacemos click en Fetch data en el menú de navegación, esto lo redirigirá a la página de pronóstico del tiempo.

Esta página mostrará un conjunto de datos estáticos en una tabla HTML. Estos datos se obtienen del archivo \wwwroot\sample-data\weather.json y están vinculados a la tabla mediante una sentencia de repetición foreach.

Código de la Aplicación Blazor

Bueno hasta aquí hemos visto como crear un ejemplo de Blazor y cual es el modelo de ejecución de Blazor. Como mencionamos en el post anterior, Blazor es un proyecto experimental hasta ahora y no tiene un soporte oficial de Microsoft. Por lo tanto, no es aconsejable utilizarlo para aplicaciones en producción. Si desean comentar acerca de esta nueva tecnología o tienen alguna pregunta pueden dejarla aquí debajo. Hasta aquí todo por hoy, hasta el próximo post, Saludos !!!.

 

The following two tabs change content below.
Admin

Admin

Administrador de Dotnetuy, con más de 20 años de experiencia en el mundo de la informática y el desarrollo de software en diferentes lenguajes, trabajando en backend y frontend, desde sus primeros pasos con clipper cuando comenzaba la década de los 90’s , y continuando con pascal, C, C++, Visual basic, y multiples gestores de bases de datos hasta hoy en día con C# y todas las técnologias relacionadas con .NET.

2 thoughts on “Creando nuestra primer aplicación con Blazor

    1. Hola Carlos,

      Agradecemos mucho tus comentarios, y nos alegra mucho que fuera de tu interés este artículo. Te comento que en próximos post pensamos hablar un poco más acerca de esta nueva tecnología. Quedamos a las órdenes por cualquier consulta.

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *