C#, .Net

Curso de Blazor

Domina el framework del ecosistema .NET de Microsoft con todos los recursos para realizar aplicaciones SPA o PWA sin necesidad de Javascript.
En marcha
Intermedio
37 Clases 10 h (aprox.)
Blazor es un framework del ecosistema .NET de Microsoft, pensado para aportar a los desarrolladores de C# todos los recursos necesarios para realizar proyectos de aplicaciones web modernas, como SPA (Single Page Applications) o PWA (Progressive Web Apps), sin necesidad de usar Javascript.

El uso de Blazor nos ofrece varias ventajas. La primera consiste en la reutilización de los conocimientos de C# al desarrollar proyectos web, donde de otro modo se requeriría un alto dominio del lenguaje Javascript. En segundo lugar, gracias a desarrollar un proyecto web enteramente en C#, tanto la parte del backend como la del frontend, se puede alcanzar mayor coherencia y productividad, con un menor desgaste al pasar de un entorno al otro. Además, se trata de un framework gratuito y de código abierto creado por el propio Microsoft, lo que nos asegura la mejor interacción con todo el ecosistema de .NET.

Qué aprenderé en el Curso de Blazor

  • Qué es Blazor y cómo funciona
  • Los dos modelos de desarrollo de Blazor (server side y webasm)
  • Desarrollo de componentes en Blazor
  • Crear una pequeña aplicación web en Blazor
  • Desarrollo de actividades frecuentes como la validación de formularios o el acceso a servicios web
  • Cómo comunicar y operar entre procesos Blazor y Javascript

Objetivos del curso

El objetivo del curso ofrecer a los estudiantes el conocimiento necesario sobre el framework de desarrollo web Blazor, que permite desarrollar aplicaciones web SPA con C# y sin necesidad de conocimientos JavaScript.

Por qué debes aprender Blazor

Blazor es un framework que permite el desarrollo de aplicaciones web sin necesidad (apenas) de usar JavaScript. Se basa en un modelo de componentes “inspirado” en React y se apoya en tecnologías como Web Assembly para permitirte desarrollar aplicaciones web… ¡usando C#!

De este modo, si eres conocedor de .NET y de C# puedes reaprovechar toda tu experiencia y desarrollar aplicaciones web modernas y totalmente compatibles sin necesidad de cambiar de tecnología ni de herramientas.

Blazor es por tanto adecuado para desarrolladores .NET que desean una experiencia unificada en la creación de aplicaciones web modernas. Gracias al framework podrán realizar proyectos web sofisticados, pero implementados de manera sencilla y sin salirse de su zona de confort, compartiendo además la lógica de negocio entre el código del lado del cliente y el código del lado del servidor, lo que ofrece una mayor consistencia y reutilización.

Qué tengo que saber

  • Conocimientos de programación web (HTML, JS, CSS).
  • Conocimientos de .NET y C#.

Para el curso se asume que el alumno tiene conocimientos de programación web y de programación básica en .NET. El curso será posible seguirlo si no se conoce .NET pero algunos aspectos pueden resultar un poco confusos.

Clases y contenidos

Blazor, modos de desarrollo e inicio de proyectos Gratis
  • Introducción a Blazor y a sus dos modelos de desarrollo
  • Estructura de un proyecto Blazor y la sintaxis de Razor
Desarrollo de componentes y páginas en Blazor
  • Componentes y páginas en Blazor
  • Enrutamiento y navegación

Componentes en Blazor

A continuación vamos a ver cómo se implementan los componentes en Blazor, conociendo su estructura, el lenguaje Razor, el enlace de datos y los eventos.

Inicio de proyectos Blazor desde terminal y desde Visual Studio

Cómo iniciar proyectos Blazor desde la línea de comandos con el CLI y con el IDE Visual Studio.

Estructura de componentes Blazor

Revisión de la estructura de los componentes de Blazor.

Código Razor en Componentes Blazor

Entendiendo el código Razor que se escribe en los componentes de Blazor. Sintaxis declarativa e integración con el código C# para definir propiedades y manejadores.

Ampliando información sobre Componentes de Blazor

Entrando en el detalle de la sintaxis y posibilidades de definición declarativa en los componentes de Blazor.

Interoperabilidad de Componentes Blazor

Vamos a ver cómo realizar la interoperabilidad de componentes en Blazor y cómo comunicar entre ellos por medio de propiedades y eventos

Event Callback para interoperabilidad entre componentes

Cómo un componente padre pasa información a un componente hijo y cómo los componentes hijos pueden enviar devolución de respuestas mediante eventos a los componentes padre en Blazor.

Entendiendo la renderización de los componentes Blazor

Explicaciones sobre el redibujado o renderización de los componentes Blazor cuando se modifican las propiedades y cómo afecta a la interoperabilidad entre componentes. Introducción al ciclo de vida de los componentes Blazor.

Gestión de formularios en Blazor

En los siguientes vídeos vamos a avanzar en el desarrollo de componentes de Blazor, analizando funcionalidades para la gestión de formularios, como el enlace de datos, las validaciones, los tipos de eventos en formularios, etc.

Introducción a EditForm

Explicaciones de las herramientas disponibles en Blazor para trabajar con formularios y gestionar la entrada y salida de datos mediante componentes de interfaz gráfica basados en elementos de formulario.

Utilización de EditForm para creación de formularios en Blazor

Utilización de EditForm para creación de formularios en Blazor Práctica de creación de un formulario en el que usaremos componentes de formulario EditForm con datos que estarán disponibles en una clase de la aplicación Blazor.

Enlace de datos y validación con DataAnnotations

Verificamos el 2 way data binding y trabajaremos con las validaciones automáticas de datos de los formularios que nos ofrece Blazor mediante los DataAnnotations.

ValidationMessage y ValidationSummary

Estos dos artefactos nos permiten en Blazor mostrar los errores de validación en nuestros componentes. Mostramos cómo se utilizan en un formulario.

Cómo crear validaciones personalizadas en Blazor

Crear clases de validación personalizadas en nuestros propios DataAnnotations, creadas mediante clases en el proyecto Blazor.

Validaciones de formulario cruzadas en Blazor con EditContext

EditContext en Blazor nos ofrece una representación del estado de edición de un formulario. Lo usamos para poder gestionar las validaciones cruzadas en nuestro proyecto Blazor.

Eventos de EditContext y EditForm

Para finalizar el tema de la gestión de formularios en Blazor explicamos cómo gestionar distintos tipos de eventos que encontramos en los formularios de Blazor mediante EditContext y EditForm.

Ciclo de vida de los componentes Blazor

Explicaciones detalladas sobre los distintos métodos disponibles en Blazor para ejecutar acciones en los distintos puntos del ciclo de vida de los componentes.

Trabajar con Render Fragments

En los siguientes vídeos se introducirá el concepto de RenderFragment y se explicarán las distintas posibilidades que tenemos en Blazor para configurarlos.

Introducción a los RenderFragments

Seguimos hablando de componentes explicando cómo hacer componentes que usan RenderFragments para permitir renderizar código "blazor" que pasa el padre hacia el componente hijo.

Ejemplo básico de RenderFragments

Mostrar cómo se crean los RenderFragments, para pasar el código Razor a los componentes hijos que puede incluir HTML y/o otros componentes Blazor.

Cómo pasar datos a los RenderFragments

Veremos cómo pasar datos incluidos en los render fragments, para definir un contexto.

Nombrar los RenderFragments y disponer de varios en un component

Aprendemos a nombrar los render fragments, lo que nos da pie a crear componentes a los que se les puede pasar varios RenderFragments.

Componentes genéricos con RenderFragment

Cómo convertir los componentes de los ejemplos anteriores en componentes genéricos en los que yo pueda especificar el tipo con la directiva @typeparam.

Cómo usar los componentes genéricos en Blazor y detectar RenderFragments nulos

Avanzamos en los ejemplos del curso viendo cómo vamos a usar ahora los componentes genéricos que trabajan con cualquier tipo de datos. Además veremos cómo tratar los casos especiales en los que ciertos RenderFragments puedan ser nulos.

Establecer código Razor predeterminado para RenderFragments nulos

Qué podemos hacer si queremos establecer código Razor predeterminado para renderfragments que no se hayan enviado, con valores de parámetros también opcionales.

Layouts en Blazor

Qué son los layouts en Blazor. Cómo se definen los layouts y cómo se indica en los componentes de página qué layout deben usar.

Layouts en Blazor

Veremos cómo se trabaja en Blazor para crear layouts. Estudiaremos el layout predeterminado que viene en el proyecto básico de Blazor, con sus distintos componentes. Además estudiaremos el componente de enrutado de Blazor y cómo crear otros layouts

CSS en Blazor

Cómo trabajar con las hojas de estilos en las aplicaciones desarrolladas con Blazor. Veremos cómo definir los estilos a nivel de componente y los estilos globales a nivel de aplicación. Conoceremos el aislamiento del CSS en los componentes de Blazor.

Introducción al CSS en Blazor

Explicaciones sobre cómo se trata el CSS en Blazor y cómo funciona el CSS Component Isolation, o aislamiento del CSS de los componentes.

Definición de CSS a nivel de componente en un proyecto Blazor

Veremos un ejemplo sencillo de aplicación de CSS en un componente de Blazor.

Estilos CSS en una aplicación

Veremos en ejecución el componente con su CSS y explicaremos cómo se puede colocar CSS a nivel de aplicación en un proyecto Blazor.

Repositorios

En los siguientes vídeos vamos a empezar a trabajar con datos en la aplicación Blazor de ejemplo de este curso. Veremos cómo crear repositorios y servicios. Además veremos cómo configurar el sistema de inyección de dependencias para trabajar con servicios que traigan los datos de diversos sistemas de almacenamiento, adoptando prácticas SOLID.

Creando un componente para listar tareas

En este vídeo veremos cómo se crea un componente para listar tareas, que usaremos en la aplicación de ejemplo del curso y sobre la que luego integraremos el repositorio para acceder a los recursos.

Creando un repositorio que trabaja con tareas en memoria

En este vídeo hacemos un primer ejemplo de repositorio para almacenar y recuperar las tareas. Comenzamos con un primer repositorio que trabaja simplemente en memoria.

Configurar el sistema de inyección de dependencias de Blazor

Queremos acceder a datos de bases de datos pero no queremos estar acoplados a un servicio determinado, por lo que vamos a seguir prácticas SOLID de inyección de dependencias. Blazor está preparado para eso pero tenemos que configurar el sistema de inyección de dependencias

Añadir funcionalidad aplicación de ejemplo

Veremos cómo organizar la funcionalidad de la aplicación, definiendo qué competencias o responsabilidades dependen de cada componente y cómo implementarlas.

Escalar eventos desde componentes meramente representacionales

En este vídeo añadimos funcionalidad a nuestro listado de tareas, que decidimos que solamente se va a encargar de representar el listado, delegando al padre la realización de las operaciones.

Recuperar los datos de los eventos y realizar las operaciones

En este vídeo realizamos la operación de marcado de tareas como completadas, recuperando los datos de los eventos del componente de listado.

Configuración Server Side y Web Assembly

En esta clase vamos a ver cómo configurar un proyecto Blazor tanto en Server Side como en Web Assembly y cómo podemos definir qué partes del código se ejecutan en cada modelo de trabajo.

Creando proyecto con configuración automática Server Side / Web Assembly

Cómo realizar un proyecto de Blazor que sea capaz de renderizar componentes ya sea en Server Side como en Web Assembly.

Adaptando el código del proyecto de aplicación

Veremos cómo adaptar el código del proyecto de aplicación que comenzamos en clases anteriores para poder usarlo tanto en Server Side como en Web Assembly y cómo crear proyectos que nos permitan compartir clases entre ambos modos de trabajo.

Adaptando servicios para funcionar en implementaciones distintas

En este vídeo vamos a comenzar a implementar el servicio que nos ofrece datos de dos maneras diferentes, una orientada a componentes Blazor que se renderizan en servidor y otra para componentes Blazor que se renderizan con Web Assembly.

Asociar fichero con los datos de configuración para el servicio

Realizamos configuración adicional para los servicios de datos. Además veremos cómo procesar los JSON con datos (serializar y deserializar), de modo que el formato para los nombres de las propiedades sea camel-case.

Diferencias de trabajo con datos en server side y Web Assembly

Entendiendo las diferencias de trabajo a la hora de trabajar con los modelos server side y Web Assembly.

Valoraciones

DOCAL ARTAJO / JAIME

Excelente curso!!!! Sugerencia para la nueva temporada que comienz en Septiembre mas curso con Eduard. Faltan de colgar el PDF como el repositorio de GitHub con el código.

Cursos que también te pueden interesar

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete