Getting to know MASA Blazor

MASA Blazoris a Blazorlibrary of UI components. Just like Bootstrap and Ant Design, which are familiar to everyone in front-end writing.

MASA Blazor official website address: https://blazor.masastack.com MASA Blazor Github address: https://github.com/BlazorComponent/MASA.Blazor MASA Blazor Pro demo address: https://blazor-pro.masastack.com/ dashboards/ ecommerce MASA Blazor Pro Github address: https://github.com/BlazorComponent/MASA.Blazor.Pro

What is Blazor

Before the introduction MASA Blazor, it is necessary to know what it is Blazor. If you already know what it is, you Blazorcan skip it directly and continue reading below.

BlazorIt is a framework that uses .NET to generate interactive client-side Web UI. BlazorUsing C#, developers can code on the server and client-side to build rich Web applications. Does it sound very good? Back-end partners who are not familiar with front-end development languages can also use it Blazorfor web application development. Just take a look at the official description.

If you want to know more about Blazorit, you can read this article , which introduces in great detail what is Blazor and how Blazor compares with other front-end technologies. Or you can go directly to the official documentation , I will not elaborate too much here.

Material Design

After understanding , Blazorlet’s briefly understand Material Designwhy Material Design, because it MASA Blazoris based on Material Designdesign.

Introduction:Material Design , Chinese name: Material design language, some people also call it texture design, is a cross-platform design language launched by Google, which aims to provide a highly consistent user experience and visual experience for mobile phones, tablets, desktops and "other platforms" Effect.

Pros:Material Design Contains suggestions on how to use shadows, how to use animations, and even how many pixels to use when designing, it can help us build a more reasonable page structure, how to typography, font size and spacing, it defines elegance Smooth interaction effects guide the user's visual focus and interaction in the page.

Material DesignThe core is simplicity. Big and simple, simple and refined. It brings the experience of the physical world to the screen. Remove impurities and randomness in reality, retain its most original and pure form, spatial relationship, changes and transitions, and cooperate with the flexible characteristics of the virtual world to restore the most realistic experience to achieve a concise and intuitive effect. Of course its advantages don't stop there. Many overseas applications, including a large number of web sites, are based on the design of MD. It is still very popular abroad. If you want to know more about MD, you can go to its official website , which will be introduced here first.

Vuetify

Vuetify It is a VueUI framework that is very popular in the world. It is a complete interface framework built on Vue.js. Unlike other frameworks. VuetifyDesigned from the ground up to be easy to learn and has hundreds of well-designed components from the Material Design Specification . VuetifyA mobile-first design means your app works right out of the box, whether it's on a phone, tablet, or desktop.

Therefore vue, the small partners who use Vuetifyit can easily build a set Material Designof applications based on design style.

Isn't it cool? Having said so much, it's all about the front-end of others, so do we Blazorhave such a UI component library? The answer is of course there is, that is MASA Blazor. Finally it's our protagonist's turn.

MASA Blazor

MASA BlazorAs mentioned at the beginning, it is Blazora UI component library that Blazorfrees you from JavaScriptweb application development, and MASA Blazorallows you to build a very beautiful web application without writing, or writing very little Css. MASA BlazorIt is a UI component library carefully designed in strict accordance with Material Design的design specifications. Next, let's talk about his advantages.

Based on Material Designthe design style, it has Material Designall the design advantages, and the multi-terminal experience, interaction and operation are excellent.
With Blazordeep integration, back-end developers can easily get started.
Innately responsive, in addition to Vuetifysome components, there are many preset components such as Url, breadcrumbs, navigation triple linkage, advanced search, i18n, etc.
Active community, easy to use, full-time team maintenance

MASA BlazorIn addition to 1:1 restoration of all the components that have been deeply Vuetifyrestored, a very practical preset component has been added, and some commonly used components or a group of components are encapsulated, which is more suitable for the daily use of developers and greatly reduces development. time, increasing the efficiency of development. He also solves most of the back-end human tuning troubles. A few lines of code can quickly build a beautiful page. Then let's take a look at how Blazorto introduce it in the project.

Use MASA Blazor

Environment: .NET 6.0.0 + Visual Studio 2022

Create Blazor Serveran app

dotnet new blazorserver -o BlazorServerApp

Add MASA.Blazor package
You can use the Nuget package management tool to search MASA.Blazorand add, or you can directly
```
dotnet add package MASA.Blazor
```
Masa BlazorAdd related services in Program.cs .
```
builder.Services.AddMasaBlazor();
```
The .net 6.0 Minimal Api is used here without the Startup class. The code also looks simpler. If it is the previous .net version, just Startup.ConfigureServicesadd services.AddMasaBlazor();it there.

Introduce styles, fonts, scripts in Pages/_Layout.cshtml

Add styles and fonts to the head

<link href="_content/MASA.Blazor/css/masa-blazor.css" rel="stylesheet">
<link href="_content/MASA.Blazor/css/masa-extend-blazor.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@("@mdi")/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">

Add js script at the bottom of body

<script src="_content/BlazorComponent/js/blazor-component.js"></script>

If it is a version before .net6.0, these codes are in Pages/_Host.cshtml(Server)

Reference in the _Imports.razor file MASA.Blazor, BlazorComponentobviously space, so that we don't have to refer to each file
```
@using MASA.Blazor
@using BlazorComponent
```
Replace the content in Shared/MainLayout.razor
```
<MApp>
	@Body
</MApp>
```

Quickly create Blazor projects using templates

After the above steps, you can MASA Blazordevelop based on it. But are the steps a little more and a little complicated? Of course, these MASA Blazorare also considered for us, so it provides a simpler installation method, which is installed through templates.

Install the template via dotnet command
```
dotnet new --install MASA.Template
```
Create a Blazor Server project based on the MASA Blazor Component Library
```
dotnet new masab -o BlazorServerApp
```

It's done in two easy steps. The project created in this way will help you complete the above steps.

Show results

Next, we will replace the original demo components with the sidebar and top toolbar of MASA Blazor. Some code screenshots:

The MNavigationDrawerand MAppBartwo components are used.

The effect diagram is as follows:

There are also many beautiful and interesting components with examples and code on the official website, such as this AppBar:

Click to view the source code, then copy the code over, and a component is complete.

Take a look at the effect:

It's that simple.

Let's take a look at the MASA Blazor Proeffect of the official Admin template ( ):

MASA Blazor Pro demonstrates the use of most MASA Blazor components. And it is an out-of-the-box back-end front-end admin template. All are open source and free. Interested friends can go to find out.

MASA Blazor official website address: https://blazor.masastack.com MASA Blazor Github address: https://github.com/BlazorComponent/MASA.Blazor MASA Blazor Pro demo address: https://blazor-pro.masastack.com/ dashboards/ ecommerce MASA Blazor Pro Github address: https://github.com/BlazorComponent/MASA.Blazor.Pro

We are in action, new framework, new ecology

Our goals are 自由的, 易用的, 可塑性强的, 功能丰富的, 健壮的.

So we draw on the design concept of Building blocks and are making a new framework MASA Framework. What are its characteristics?

Natively supports Dapr and allows replacing Dapr with traditional communication methods
Unlimited architecture, monolithic applications, SOA, and microservices are supported
Support .Net native framework, reduce learning burden, and insist not to create new wheels except for concepts that must be introduced in specific fields
Rich ecological support, in addition to the framework, there are a series of products such as component library, authority center, configuration center, troubleshooting center, and alarm center
Unit test coverage of core code base is 90%+
Open source, free, community driven
what else? We are waiting for you, let's discuss together

After several months of production project practice, the POC has been completed, and the previous accumulation is currently being refactored into a new open source project

At present, the source code has begun to be synchronized to Github (the documentation site is under planning and will be gradually improved):

QQ group: 7424099

WeChat group: add technology operation WeChat (MasaStackTechOps), note your intention, invite to join the group