Aprende a construir aplicaciones web utilizando blazor con la libreria mudblazor

1. Aplicaciones web
con
Blazor + MudBlazor

2. Developer Presentation Template
Hello, I AM
MIGUEL TEHERAN
Developer and consultant
Microsoft MVP
C# Corner MVP
Alibaba Cloud MVP
You can find me at:
Mteheran
Mteheran.dev

3. Developer Presentation Template
Blazor for
web
applications
01. Framework to create
web applications
02. Free and Open Source
03. Cross Platform
04. Extension of ASP.NET
05. C#, HTML and CSS
06. Base on components

4. Developer Presentation Template
Blazor Server vs Blazor
WebAssembly
01. It runs in the server
02. Use SignalR to update the
client
03. Faster processing
large amount of data
01. It runs in the browser
using Web Assembly
02. Single page application
03. Progressive web app
(PWA)
Ambas son excelentes soluciones en la creación de
aplicaciones web para desarrolladores . NET

5. Blazor - Línea de tiempo
Preview .NET 3.1 .NET 5 .NET 6
•Web Assembly
•Blazor Server
•SPA application
•Visual Studio
Support
•Mono
•.NET core
integration
•Share component
•.NET Standard
•CSS Isolation
•Virtualization
•Web SDK
•Wasm size
improved
•Lazy loading
•New Template
•Hot reload
•Required
parameters
•AOT compilation
•Error boundaries
•Components for
react.js and angular
2018
.NET 7
•Hot reload
improved
•.NET MAUI
•New console
output
•Inject services into
custom validation
attributes in Blazor
2019 2020 2022
2021

6. Developer Presentation Template
MudBlazor
MudBlazor is a material
design component
framework for Blazor,
which facilitates web
development framework
without having to struggle
with CSS and javascript.
If we are looking for date
selectors, progress bars,
sorting, etc. MudBlazor has
our back and almost all
components use only C#
and no JavaScript except
when strictly necessary.

7. Developer Presentation Template
TryMudBlazor
A playground for
MudBlazor
https://try.mudblazor.com/

8. Paso a paso con MudBlazor
1. dotnet new blazorwasm
2. dotnet add package MudBlazor
3. @using MudBlazor
4. add styles to index.html file
5. add javascript
6. add services
7. add components

9. Configuración
de un proyecto
Demo

10. Librería de MudBlazor
● Themes, Colors, Typography
● Layout
● Buttons
● Inputs
● Data Display
● Navigation
● Feedback
● Utilities

11. Librería
MudBlazor
Demo

12. ¿Por qué usar MudBlazor?
● Rich controls
● Easy to use (based on components)
● Great support
● Good performance

13. Artículos recomendados
- CI/CD For Blazor Applications In Azure Devops (c-
sharpcorner.com)
- New Features In Blazor With .NET 6 (c-sharpcorner.com)
- Unit Test For Blazor Components (c-sharpcorner.com)

14. Gracias
mteheran.dev