©2024 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
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.
Material disponible
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.
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
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
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
- Introducción a Blazor y a sus dos modelos de desarrollo
- Estructura de un proyecto Blazor y la sintaxis de Razor
- 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.
Cómo iniciar proyectos Blazor desde la línea de comandos con el CLI y con el IDE Visual Studio.
Revisión de la estructura de los componentes de 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.
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
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.
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.
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 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.
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.
Estos dos artefactos nos permiten en Blazor mostrar los errores de validación en nuestros componentes. Mostramos cómo se utilizan en un formulario.
Crear clases de validación personalizadas en nuestros propios DataAnnotations, creadas mediante clases en el proyecto Blazor.
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.
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.
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.
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.
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.
Veremos cómo pasar datos incluidos en los render fragments, para definir un contexto.
Aprendemos a nombrar los render fragments, lo que nos da pie a crear componentes a los que se les puede pasar varios RenderFragments.
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.
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.
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.
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.
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.
Veremos un ejemplo sencillo de aplicación de CSS en un componente de Blazor.
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.
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.
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.
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.
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.
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.
Cómo realizar un proyecto de Blazor que sea capaz de renderizar componentes ya sea en Server Side como en Web Assembly.
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.
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.
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.
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.
¿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.