Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

17 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
martes, 13 de febrero de 2024
Blazor

Como seguramente sabréis, Blazor es la gran apuesta de Microsoft para el desarrollo de aplicaciones web con .NET. Sólo hay que ver la cantidad de novedades que han introducido en la última versión para darse cuenta de que están poniendo toda la carne en el asador y, de alguna forma, está convirtiéndose en la opción preferida para el desarrollo de este tipo de aplicaciones.

Pues bien, es un placer anunciaros que, tras varios meses de preparación, hace unos días hemos puesto en marcha el nuevo curso de desarrollo de aplicaciones Web con Blazor en .NET 8, como siempre, en CampusMVP.

Ha sido un trabajo duro, porque esta última versión ha venida cargada de novedades (sobre todo en lo relativo al nuevo modelo unificado propuesto por las Blazor Web Apps) y hemos tenido que revisar en profundidad y reescribir parte del contenido del curso, rehacer ejemplos y regrabar material audiovisual, todo con el objetivo de seguir siendo el mejor y más completo curso de Blazor del mercado.

En este post voy a intentar responder a las siguientes preguntas:

¿Qué es Blazor?

El objetivo de partida de Blazor era bastante ambicioso: ofrecer a los desarrolladores .NET un framework para la construcción de aplicaciones web SPA, similar a otros como Angular, React o Vue, pero usando exclusivamente C#. Vaya, el sueño dorado de aquellos a los que JavaScript siempre les ha parecido la parte más dura de programar para la web ;)

Es decir, a diferencia de las soluciones tradicionales para crear aplicaciones web SPA:

  • Utilizaremos los entornos de desarrollo con los que nos sentimos cómodos los desarrolladores .NET, como Visual Studio, para crear, programar, depurar, testear y distribuir nuestras aplicaciones.
  • O, como ocurre en toda la nueva generación de tecnologías del ecosistema .NET, podremos desarrollar y ejecutar sobre cualquier sistema operativo y usar herramientas más ligeras como Visual Studio Code o la línea de comandos de .NET.
  • Utilizaremos C# en lugar de JavaScript para implementar la capa de presentación, algo que hasta ahora no era posible conseguir, con las ventajas que ello conlleva.
  • Aprovecharemos los conocimientos que ya tenemos de .NET para crear aplicaciones web SPA. Es decir, podremos usar los tipos y clases de .NET con las que llevamos años trabajando, pero para crear aplicaciones que corren en el navegador.
  • Será posible reutilizar código existente en todas las capas de las aplicaciones, así como compartir código entre cliente y servidor, pues ambos utilizarán las mismas tecnologías.

Seguro que alguno pensará que todo esto lo ha escuchado antes, pero el protagonista era el denostado Silverlight. Nada más lejos de eso; no estamos hablando de "incrustar" código .NET en un browser usando tecnologías propietarias como hacíamos años atrás, en la era RIA (Rich Internet Applications), sino en una tecnología respetuosa y alineada con estándares abiertos de la web.

Sólo con lo dicho hasta ahora, las ventajas de Blazor ya podrían ser suficientes para considerarlo una opción a la hora de acometer nuevos proyectos, pero la cosa no queda ahí.

A la vista de la simplicidad, potencia y productividad del modelo de componentes que utiliza, el ámbito de Blazor ha ido creciendo y, en la actualidad, Blazor es mucho más que un framework para crear aplicaciones web SPA.

En la última versión, Blazor ya no sólo permite crear aplicaciones de frontend, sino que Blazor se ha convertido en una plataforma de desarrollo completa o fullstack, con la que podemos crear también aplicaciones ejecutadas por completo en backend (como MVC o Razor Pages, por lo que, de alguna forma, puede llegar a sustituir estas tecnologías).

Puedes leer algo más sobre Blazor en los siguientes artículos:

¿Por qué es interesante aprender a desarrollar con Blazor?

Si trabajáis en la creación de aplicaciones web con tecnologías Microsoft, la respuesta es categórica: sin duda, deberías aprender Blazor. Dejad que os explique por qué.

La imparable popularización de las aplicaciones web SPA ha traído de la mano algunos problemas para los desarrolladores .NET. Incluso los frameworks más modernos y potentes, como ASP.NET Core MVC o Web API, no ofrecen herramientas para la creación de aplicaciones SPA, por lo que nos vemos obligados a:

  • Quedar relegados al desarrollo del backend del que normalmente hacen uso de este tipo de sistemas.
  • Movernos al frontend, aprendiendo a trabajar con frameworks como Angular, React, Vue o cualquiera de los muchos otros disponibles en el ecosistema Javascript.

Si, como es bastante habitual, sois de los que tienen que tocar un poco de todo (aka full-stack developers) probablemente habréis sufrido al elegir esta última opción. Para los desarrolladores .NET, los frameworks de frontend tradicionales suelen ser un territorio hostil e incómodo porque:

  • No es sencillo elegir en cuál de las cestas poner los huevos. Aunque últimamente parece haberse relajado algo la cosa y la propia selección natural ha ido haciendo su trabajo eliminando opciones que no aportaban demasiado, durante años, el mundillo de los frameworks SPA ha vivido constantes terremotos y no era sencillo decantarse por una u otra opción.
  • Debemos utilizar herramientas distintas a las habituales, y veces no se llevan demasiado bien entre ellas, por lo que nos vemos obligados a usar distintos "cinturones de herramientas" en función de lo que vayamos a hacer en cada momento.
  • Todo esto obliga a aprender un modelo de programación completamente nuevo: sintaxis, workflows de trabajo distintos, bibliotecas de clases y componentes totalmente diferentes, herramientas diversas (y a veces poco amigables), etc.
  • Por no hablar del lenguaje... aunque tiene sus cosas buenas, la experiencia de programación con Javascript queda muy lejos de lo que supone utilizar C#, un lenguaje moderno, potente y con un sistema de tipos estricto que nos defienda de nosotros mismos y nuestros constantes errores. (Es cierto que TypeScript ha suavizado algo este asunto, pero, aún así, la experiencia no está a la altura.)

Con Blazor podremos desarrollar aplicaciones web (SPA y no SPA) profesionales, solventando todos los problemas anteriores de un plumazo:

  • La experiencia desde Visual Studio es exactamente como la conocemos: compilación, ejecución, depuración, testing, etc. Todo lo haremos usando las mismas herramientas de siempre, con las que ya somos productivos.
  • ... aunque, si lo preferimos, podremos programar utilizando Visual Studio Code o cualquier otro editor ligero al que estemos acostumbrados y usar la línea de comandos para compilar, ejecutar, testear o distribuir.
  • En lugar de JavaScript, implementaréis la lógica de la interfaz de usuario en C#, y utilizaréis la biblioteca de clases de .NET que ya conocéis de sobra.
  • Lo anterior ya hace que la curva de aprendizaje sea suave, pero, aún hay más:
    • Si conocéis Razor de ASP.NET MVC, ASP.NET Core o Razor Pages, os sentiréis muy cómodos porque es la misma sintaxis usada para crear componentes Blazor.
    • También encontraréis que una de las formas en las que podemos ejecutar aplicaciones Blazor, llamada Blazor Server, es conceptualmente similar a ASP.NET Web Forms (aunque por supuesto sin sus conocidos problemas), por lo que no os costará mucho trabajo entenderlo si partís desde ese punto.

Obviamente tendréis que aprender a trabajar con Blazor, pero al menos no deberéis dedicar tiempo a conocer a fondo el entorno, las herramientas, las bibliotecas base o el lenguaje para sacarle partido: esa lección ya la traéis aprendida de casa ;)

Pero no sólo eso. Una vez conocemos Blazor, nos damos cuenta de que está construido sobre elementos muy sencillos, pensados disparar nuestra productividad desde el minuto uno. Una vez conocéis algunos fundamentos básicos, veréis que se pueden crear componentes, o elementos visuales reutilizables, con una facilidad y velocidad pasmosas.

Con Blazor, los desarrolladores .NET podemos crear espectaculares aplicaciones web sin abandonar las herramientas ni el lenguaje que ya utilizamos a diario.

Si ya hemos trabajado con ASP.NET Core y MVC, ¿siguen valiendo estos conocimientos?

Totalmente. De hecho, si conocéis ASP.NET Core estaréis mejor posicionados para exprimir Blazor al máximo, porque hay conocimientos que podréis aprovechar directamente.

Por ejemplo, las Blazor Web Apps, que es el nuevo modelo de proyecto unificado utilizado por defecto para las aplicaciones web con Blazor, son en la práctica aplicaciones ASP.NET Core. Esto significa que heredan de la plataforma muchas funcionalidades de forma directa: inicialización, inyección de dependencias, logging, settings, middlewares, routing, etc. y, por tanto, vuestros conocimientos previos os serán de utilidad.

En caso de optar por el modelo de ejecución puro en el lado cliente, denominado Blazor WebAssembly, los conocimientos de ASP.NET Core os vendrán también de perlas para la implementación del backend, imprescindible en cualquier aplicación SPA. Además, en este caso, podréis disfrutar de las ventajas de utilizar .NET en ambos extremos: ¡compartir código C# entre frontend y backend de forma directa!

Inicialmente, la ideal de Blazor no era sustituir a MVC ni Razor Pages, simplemente cubría un hueco que anteriormente no estaba resuelto en el stack de tecnologías .NET: la implementación de aplicaciones SPA en el frontend. Por tanto, no se trataba de un reemplazo, sino de una opción adicional que simplificaba el acceso al mundo de las aplicaciones SPA.

Sin embargo, la última versión de Blazor aparecida con ASP.NET Core 8, ha traído consigo un nuevo modelo de proyecto unificado que incluye capacidades de renderización completa en servidor, por lo que, ya podríamos implementar en Blazor lo que hasta ahora hacíamos mediante vistas MVC o páginas Razor.

Lo importante, como siempre, es disponer de varias alternativas para poder elegir la más apropiada en cada escenario.

¿En qué consiste el curso de desarrollo con Blazor?

Este curso se imparte completamente online utilizando la potentísima plataforma de eLearning SELF (de los mismos que están detrás de CampusMVP), y siguiendo su contrastada metodología para asegurar tu éxito a lo largo el proceso de formación.

Curso de Blazor en CampusMVP

Sin horarios y a vuestro propio ritmo, pero no en solitario: contaréis con todo el soporte del equipo de CampusMVP y, dado que soy el tutor, me tendréis a vuestra disposición para la resolución de dudas y ayudaros durante aprendizaje.

La dedicación estimada ronda las 6 u 8 horas semanales, durante un total de 12 semanas. A lo largo de ellas realizaremos un profundo recorrido en la última versión Blazor, partiendo desde cero, a través de las más de 200 lecciones que componen el temario. Éste, además, lo podréis descargar en formato PDF (¡600 páginas!) al finalizar el curso, para que lo tengáis como referencia.

Para afianzar los conocimientos, incluimos también más de 50 vídeos, sin paja ni rellenos, directos al grano y llevados a cabo de forma magistral por el gran José Manuel Alarcón, donde podréis ver en vivo el funcionamiento de muchas de las características que vamos estudiando.

Pero el curso no sólo consiste en contenido teórico: a lo largo del mismo encontraréis numerosas prácticas que os ayudarán a conseguir una mejor asimilación de los conceptos, así como proyectos descargables, consejos, trucos e ideas que seguro os resultarán de utilidad cuando vayáis a aplicar vuestros nuevos conocimientos en el mundo real.

¿Y cómo saber vuestro nivel de aprovechamiento? Sencillo. Conforme vayáis avanzando os propondremos autoevaluaciones que os permitirán conocer vuestro grado de conocimiento sobre los contenidos. Al finalizar el curso podréis acreditar su realización mediante un diploma, así como incluirlo en vuestro perfil certificado de CampusMVP, un perfil online verificable por terceros donde podéis demostrar qué habéis aprendido con nosotros.

¿Cuáles son los contenidos del curso?

En este curso hacemos un completo recorrido de Blazor, comenzando desde cero.

Tras una breve introducción para ponernos en contexto, inmediatamente comenzamos describiendo los distintos modelos de hosting disponibles para el desarrollo web: Blazor SSR, Blazor Server y Blazor WebAssembly. Veremos cómo funcionan, sus elementos arquitecturales y las ventajas e inconvenientes de cada uno, para que podáis elegir cuál es el que más conviene en cada caso.

A lo largo del curso estudiaremos los distintos modelos de hosting en paralelo, por lo que al finalizar estaréis en disposición de crear aplicaciones utilizando cualquiera de ellos.

Seguidamente, entraremos en faena creando nuestros primeros proyectos Blazor, echando un vistazo a la forma de organizarlos y los tipos de componentes con los que estructuraremos nuestras aplicaciones.

Estudiaremos también en la sintaxis Razor, fundamental a la hora de escribir componentes, detallando sus particularidades y diferencias respecto al Razor que usamos en MVC o Razor Pages, directivas, construcciones y técnicas para organizar y simplificar el código.

Aprenderemos las distintas fórmulas para comunicar componentes, y a sacar provecho de los eventos del ciclo de vida de los mismos, así como a controlar aspectos como la liberación de recursos o la renderización de componentes.

Empezaremos creando componentes simples, pero iremos profundizando sucesivamente hasta llegar a componentes complejos que usan toda la potencia de Blazor para crear elementos altamente reutilizables gracias a la parametrización, uso de fragmentos o tipado genérico. Veremos cómo consumir y producir eventos del sistema o personalizados para facilitar la comunicación bidireccional entre componentes.

Haremos también una parada en la inyección de dependencias y aprenderemos a utilizarla para crear componentes más sencillos, limpios y reutilizables.

Dedicaremos un módulo al sistema de navegación y routing de Blazor, aprendiendo a construir sitios navegables y controlar la navegación del usuario.

También pondremos el foco en el potente sistema de binding, ese mecanismo que enlaza la UI con nuestras clases .NET de forma casi mágica. Seguidamente, nos centraremos en estudiar las herramientas que ofrece Blazor para ayudarnos a crear formularios de datos y validar la información suministrada.

La interoperación con Javascript también toma su protagonismo en el curso. Las fórmulas para comunicar nuestro código Blazor con este lenguaje abre la puerta al aprovechamiento del enorme ecosistema del mismo, consiguiendo que en muchas ocasiones no tengamos que partir de cero a la hora de crear interfaces espectaculares.

Para la creación de aplicaciones renderizadas por completo en el servidor, iremos viendo en distintos puntos las mejoras progresivas o progressive enhancements que nos ofrece Blazor SSR para conseguir una experiencia de usuario similar a la obtenida con una SPA.

Ya casi finalizando, nos detendremos en estudiar los mecanismos de autenticación y autorización que nos permitirán construir aplicaciones seguras y adaptadas a distintos perfiles de usuario. Veremos también cómo crear aplicaciones internacionalizadas, crear y distribuir componentes reutilizables o algunas técnicas para testear nuestros componentes.

De forma trasversal, al final de cada módulo te demostraremos sobre una aplicación real cómo "encajan" los conceptos que hemos ido viendo en él. Esa aplicación es BlazorStore, la plataforma de comercio electrónico que desarrollaréis al finalizar el curso, y para la que hemos reservado sus últimas lecciones.

¿Qué conocimientos previos se necesitan para seguir el curso?

Si estáis leyendo esto, probablemente ya los tengáis ;)

En primer lugar, dado que se trata de un curso de programación de aplicaciones web, es necesario conocer los fundamentos de este tipo de sistemas, al menos a un nivel básico. Debéis saber identificar cliente y servidor, entender las responsabilidades de cada uno de estos extremos y conocer mínimamente los mecanismos de comunicación entre ellos.

También es importante que conozcáis algo de HTML y CSS, y muy recomendable que tener algunas nociones de Javascript, aunque no es indispensable.

Por último, dado que una de las premisas de Blazor es desarrollar usando C# y .NET en todos los extremos, ¡qué menos que conocerlos! En el curso asumiremos que tenéis un nivel razonable de C# y que habéis trabajado con la biblioteca de clases base de .NET. Es decir, en el curso no explicaremos qué es una expresión lambda o qué es un objeto de tipo List<string>, se supone que debéis saberlo antes de comenzar.

En cambio, no es necesario conocer nada sobre tecnologías de acceso a datos, pues el curso no entraremos en ello. En algunos ejemplos usaremos Entity Framework Core, pero no es necesario que lo conozcáis para poder seguirlos sin problema.

Me convence, ¿cuándo empezamos?

Pues ya, en cuanto queráis :) Sólo tenéis que visitar la web de CampusMVP, inscribiros, y casi sobre la marcha os facilitarán las credenciales de acceso a la plataforma.

Recordad que, si trabajáis para una empresa española, este curso podríais hacerlo prácticamente sin coste, gracias a la Formación Bonificada.

¡Eso es todo! Ahora es vuestro turno...

Bueno, pues creo que con esto quedarán despejadas todas vuestras dudas sobre el curso, o al menos muchas de ellas. Si no es así, no dudéis en contactar con CampusMVP, donde os van a atender de maravilla, o conmigo a través de un comentario, correo electrónico o usando el formulario de contacto del blog.

¡Espero veros a muchos por allí!

Publicado en Variable not found.

Aún no hay comentarios, ¡sé el primero!