Skip to content

Commit a76e7cf

Browse files
milad-karimifardmilad-karimifard
authored
add mat blazor sample (#10)
1 parent 43177d1 commit a76e7cf

15 files changed

+245
-9
lines changed

Diff for: ‎BlazorBenchmarks.sln

+16
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,12 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Pure.Blazor.Benchmark.Serve
4545
EndProject
4646
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Pure.Blazor.Benchmark.Client", "Pure.Blazor.Benchmark\Client\Pure.Blazor.Benchmark.Client.csproj", "{A234F78D-4C5D-4E13-9853-F9A31400ADD2}"
4747
EndProject
48+
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "MatBlazor.Benchmark", "MatBlazor.Benchmark", "{FFB0EA65-EE0B-46B5-AC93-32C84C04BD95}"
49+
EndProject
50+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MatBlazor.Benchmark.Client", "MatBlazor.Benchmark\Client\MatBlazor.Benchmark.Client.csproj", "{CBF14D1A-17AE-492B-9D71-9A2579F70081}"
51+
EndProject
52+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MatBlazor.Benchmark.Server", "MatBlazor.Benchmark\Server\MatBlazor.Benchmark.Server.csproj", "{37974F2E-325D-48B2-80B6-EB8F3E3EEF21}"
53+
EndProject
4854
Global
4955
GlobalSection(SolutionConfigurationPlatforms) = preSolution
5056
Debug|Any CPU = Debug|Any CPU
@@ -107,6 +113,14 @@ Global
107113
{A234F78D-4C5D-4E13-9853-F9A31400ADD2}.Debug|Any CPU.Build.0 = Debug|Any CPU
108114
{A234F78D-4C5D-4E13-9853-F9A31400ADD2}.Release|Any CPU.ActiveCfg = Release|Any CPU
109115
{A234F78D-4C5D-4E13-9853-F9A31400ADD2}.Release|Any CPU.Build.0 = Release|Any CPU
116+
{CBF14D1A-17AE-492B-9D71-9A2579F70081}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
117+
{CBF14D1A-17AE-492B-9D71-9A2579F70081}.Debug|Any CPU.Build.0 = Debug|Any CPU
118+
{CBF14D1A-17AE-492B-9D71-9A2579F70081}.Release|Any CPU.ActiveCfg = Release|Any CPU
119+
{CBF14D1A-17AE-492B-9D71-9A2579F70081}.Release|Any CPU.Build.0 = Release|Any CPU
120+
{37974F2E-325D-48B2-80B6-EB8F3E3EEF21}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
121+
{37974F2E-325D-48B2-80B6-EB8F3E3EEF21}.Debug|Any CPU.Build.0 = Debug|Any CPU
122+
{37974F2E-325D-48B2-80B6-EB8F3E3EEF21}.Release|Any CPU.ActiveCfg = Release|Any CPU
123+
{37974F2E-325D-48B2-80B6-EB8F3E3EEF21}.Release|Any CPU.Build.0 = Release|Any CPU
110124
EndGlobalSection
111125
GlobalSection(SolutionProperties) = preSolution
112126
HideSolutionNode = FALSE
@@ -126,6 +140,8 @@ Global
126140
{8469A5C8-4300-46AD-A5D0-C604E12647C2} = {FD46BFF5-0F4B-424E-8C07-347B7E317D81}
127141
{75B75A53-93E0-494D-847E-4AD0E010281C} = {706084B7-6E80-4B2E-9A9A-AAC29C9791CD}
128142
{A234F78D-4C5D-4E13-9853-F9A31400ADD2} = {706084B7-6E80-4B2E-9A9A-AAC29C9791CD}
143+
{CBF14D1A-17AE-492B-9D71-9A2579F70081} = {FFB0EA65-EE0B-46B5-AC93-32C84C04BD95}
144+
{37974F2E-325D-48B2-80B6-EB8F3E3EEF21} = {FFB0EA65-EE0B-46B5-AC93-32C84C04BD95}
129145
EndGlobalSection
130146
GlobalSection(ExtensibilityGlobals) = postSolution
131147
SolutionGuid = {E284F5B4-146F-44A2-9962-B50F6216B1A7}

Diff for: ‎MatBlazor.Benchmark/Client/App.razor

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Router AppAssembly="@typeof(App).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
5+
</Found>
6+
<NotFound>
7+
<PageTitle>Not found</PageTitle>
8+
<LayoutView Layout="@typeof(MainLayout)">
9+
<p role="alert">Sorry, there's nothing at this address.</p>
10+
</LayoutView>
11+
</NotFound>
12+
</Router>
13+
14+
<MatPortalHost></MatPortalHost>

Diff for: ‎MatBlazor.Benchmark/Client/MainLayout.razor

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@inherits LayoutComponentBase
2+
3+
<main>
4+
@Body
5+
</main>

Diff for: ‎MatBlazor.Benchmark/Client/MatBlazor.Benchmark.Client.csproj

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net7.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
<InvariantGlobalization>true</InvariantGlobalization>
8+
<BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
9+
<BlazorWebAssemblyPreserveCollationData>false</BlazorWebAssemblyPreserveCollationData>
10+
</PropertyGroup>
11+
12+
<ItemGroup>
13+
<PackageReference Include="MatBlazor" Version="2.10.0" />
14+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.10" />
15+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.10" PrivateAssets="all" />
16+
</ItemGroup>
17+
18+
</Project>

Diff for: ‎MatBlazor.Benchmark/Client/Pages/Index.razor

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@page "/"
2+
3+
<div class="container">
4+
<MatButton @onclick="IncreaseCounter" Raised="true">Counter: @counter</MatButton>
5+
<MatCheckbox @bind-Value="@checkBoxValue" Label="Click me"></MatCheckbox>
6+
<MatDatePicker @bind-Value="@datePickerValue"></MatDatePicker>
7+
8+
<MatSelect Label="Pick a Food Group" @bind-Value="@selectValue">
9+
<MatOption TValue="int" Value="0"></MatOption>
10+
<MatOption TValue="int" Value="1">Bread, Cereal, Rice, and Pasta</MatOption>
11+
<MatOption TValue="int" Value="2">Vegetables</MatOption>
12+
<MatOption TValue="int" Value="3">Fruit</MatOption>
13+
</MatSelect>
14+
15+
<h3 class="mat-subtitle1">Progress</h3>
16+
<MatProgressBar Progress="0.6"></MatProgressBar>
17+
</div>
18+
19+
<style>
20+
.container {
21+
display: flex;
22+
flex-direction: column;
23+
gap: 1rem;
24+
width: 300px;
25+
}
26+
</style>
27+
28+
@code {
29+
int counter;
30+
bool checkBoxValue = true;
31+
public DateTime? datePickerValue { get; set; } = DateTime.Now.AddDays(-10);
32+
int selectValue;
33+
34+
35+
void IncreaseCounter(MouseEventArgs e)
36+
{
37+
counter++;
38+
}
39+
}

Diff for: ‎MatBlazor.Benchmark/Client/Program.cs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
using MatBlazor;
2+
using MatBlazor.Benchmark.Client;
3+
using Microsoft.AspNetCore.Components.Web;
4+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
5+
6+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
7+
8+
builder.RootComponents.Add<App>("#app");
9+
builder.RootComponents.Add<HeadOutlet>("head::after");
10+
11+
builder.Services.AddMatBlazor();
12+
13+
await builder.Build().RunAsync();

Diff for: ‎MatBlazor.Benchmark/Client/Properties/launchSettings.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"profiles": {
3+
"MatBlazor.Benchmark.Client": {
4+
"commandName": "Project",
5+
"launchBrowser": true,
6+
"environmentVariables": {
7+
"ASPNETCORE_ENVIRONMENT": "Development"
8+
},
9+
"applicationUrl": "https://localhost:52438;http://localhost:52439"
10+
}
11+
}
12+
}

Diff for: ‎MatBlazor.Benchmark/Client/_Imports.razor

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@using System.Net.Http
2+
@using System.Net.Http.Json
3+
@using Microsoft.AspNetCore.Components.Routing
4+
@using Microsoft.AspNetCore.Components.Web
5+
@using Microsoft.AspNetCore.Components.WebAssembly.Http
6+
@using Microsoft.JSInterop
7+
@using MatBlazor.Benchmark.Client
8+
@using MatBlazor

Diff for: ‎MatBlazor.Benchmark/Client/wwwroot/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>MatBlazor.Benchmark</title>
7+
<base href="/" />
8+
<script src="_content/MatBlazor/dist/matBlazor.js"></script>
9+
<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />
10+
</head>
11+
12+
<body>
13+
<div id="app">Loading...</div>
14+
<script src="_framework/blazor.webassembly.js"></script>
15+
</body>
16+
</html>

Diff for: ‎MatBlazor.Benchmark/Server/MatBlazor.Benchmark.Server.csproj

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net7.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
<RootNamespace>Pure.Blazor.Benchmark.Server</RootNamespace>
8+
</PropertyGroup>
9+
10+
<ItemGroup>
11+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="7.0.10" />
12+
</ItemGroup>
13+
14+
<ItemGroup>
15+
<ProjectReference Include="..\Client\MatBlazor.Benchmark.Client.csproj" />
16+
</ItemGroup>
17+
18+
</Project>

Diff for: ‎MatBlazor.Benchmark/Server/Program.cs

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
using Microsoft.AspNetCore.ResponseCompression;
2+
using System.IO.Compression;
3+
4+
var builder = WebApplication.CreateBuilder(args);
5+
6+
builder.Services.AddRazorPages();
7+
8+
builder.Services.AddResponseCompression(opts =>
9+
{
10+
opts.EnableForHttps = true;
11+
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[]
12+
{
13+
"application/octet-stream"
14+
}).ToArray();
15+
opts.Providers.Add<BrotliCompressionProvider>();
16+
opts.Providers.Add<GzipCompressionProvider>();
17+
})
18+
.Configure<BrotliCompressionProviderOptions>(opt => opt.Level = CompressionLevel.Fastest)
19+
.Configure<GzipCompressionProviderOptions>(opt => opt.Level = CompressionLevel.Fastest);
20+
21+
var app = builder.Build();
22+
23+
if (app.Environment.IsDevelopment())
24+
{
25+
app.UseWebAssemblyDebugging();
26+
}
27+
else
28+
{
29+
app.UseHsts();
30+
}
31+
32+
app.UseHttpsRedirection();
33+
if (app.Environment.IsProduction() || true)
34+
{
35+
app.UseResponseCompression();
36+
}
37+
app.UseBlazorFrameworkFiles();
38+
app.UseStaticFiles();
39+
40+
app.UseRouting();
41+
42+
app.MapRazorPages();
43+
app.MapFallbackToFile("index.html");
44+
45+
app.Run();

Diff for: ‎MatBlazor.Benchmark/Server/Properties/launchSettings.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"profiles": {
3+
"https": {
4+
"commandName": "Project",
5+
"launchBrowser": true,
6+
"environmentVariables": {
7+
"ASPNETCORE_ENVIRONMENT": "Development"
8+
},
9+
"dotnetRunMessages": true,
10+
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
11+
"applicationUrl": "https://localhost:7012;http://localhost:5249"
12+
}
13+
}
14+
}

Diff for: ‎MatBlazor.Benchmark/Server/appsettings.Development.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"Logging": {
3+
"LogLevel": {
4+
"Default": "Information",
5+
"Microsoft.AspNetCore": "Warning"
6+
}
7+
}
8+
}

Diff for: ‎MatBlazor.Benchmark/Server/appsettings.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"Logging": {
3+
"LogLevel": {
4+
"Default": "Information",
5+
"Microsoft.AspNetCore": "Warning"
6+
}
7+
},
8+
"AllowedHosts": "*"
9+
}

Diff for: ‎README.md

+10-9
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@ Blazor is revolutionizing the way web applications are built. With a myriad of U
77

88
The table below provides an overview of the file sizes of various popular Blazor UI libraries:
99

10-
| Library | File Size |
11-
|---------------|-----------|
12-
| **Blazor only** | 1.1 MB |
13-
| **bit BlazorUI** | 1.3 MB |
14-
| **MudBlazor** | 1.6 MB |
15-
| **Radzen** | 2.7 MB |
16-
| **Ant Design** | 3.2 MB |
17-
| **Telerik** | 4.4 MB |
18-
| **DevExpress** | 12.8 MB |
10+
| Library | File Size |
11+
|-------------------------------------------|-----------|
12+
| **Blazor only** | 1.1 MB |
13+
| **bit BlazorUI** | 1.3 MB |
14+
| **MudBlazor** | 1.6 MB |
15+
| [**MatBlazor**](https://www.matblazor.com/) | 2.3 MB |
16+
| **Radzen** | 2.7 MB |
17+
| **Ant Design** | 3.2 MB |
18+
| **Telerik** | 4.4 MB |
19+
| **DevExpress** | 12.8 MB |
1920

2021
The comparison above is based on the DLL, JS, and CSS files required to utilize five components from each of the mentioned libraries. While file size is just one of the many criteria to consider when choosing a UI library, it's imperative to understand its impact on the application's performance and user experience.
2122

0 commit comments

Comments
 (0)