First met MASA Blazor

MASA Blazor is a Blazor UI component library. Just like Bootstrap, Ant Design.

MASA Blazor 官网地址：https://blazor.masastack.com

MASA Blazor GitHub 地址：https://github.com/BlazorComponent/MASA.Blazor

MASA Blazor Pro 演示地址：https://blazor-pro.masastack.com/dashboards/ecommerce

MASA Blazor Pro GitHub 地址：https://github.com/BlazorComponent/MASA.Blazor.Pro

What is Blazor?

Before introducing MASA Blazor, it is necessary to know what Blazor is. If you already know what Blazor is, you can skip it directly and continue to see below.

Blazor is a framework that uses. NET to generate interactive client-side Web UIs. Using Blazor, developers can use the C#language to code on the server and client to build rich Web applications. Doesn't that sound good? Back-end partners who are not familiar with the front-end development language can also use Blazor for Web application development. Take a brief look at the official description.

如果想深入了解 Blazor 的小伙伴可以翻一下这篇文章，里面非常详细的介绍了什么是 Blazor 和 Blazor 与其他前端技术的对比。或者可以直接去翻官方文档，这里我就不过多的阐述了。

Material Design

After learning about Blazor, let's take a brief look at Material Design. Why Material Design, because MASA Blazor is designed based on Material Design.

** Introduction: **Material Design, Chinese name: Material Design Language, some people also call it Texture Design, is a cross-platform design language launched by Google that aims to provide mobile phones, tablets, desktops and "other platforms" Provide a highly consistent experience and visual effects.

** Advantages: **Material Design includes suggestions on how to use shadows, how to use animations, and even how many pixels of borders to use during design. It can help us build a more reasonable page structure, how to typesetting, font size and spacing, which defines an elegant and smooth interactive effect to guide the user's visual focus and interactive operations on the page.

Material Design 的核心就是简洁。大而简、简而精。它把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。它的优点当然不止这些。海外的很多应用包括大量 web 网站都是基于 MD 的设计。在国外还是非常火的。想了解更多关于 MD 的小伙伴可以去翻一下它的官方网站，这里就先介绍到这。

Vuetify

Vuetify 是一个在世界范围内广受欢迎的 VueUI 框架，它是建立在 Vue.js 之上的完备的界面框架。与其他框架不同。 Vuetify 从一开始就设计为易于学习的并且拥有来自 Material 设计规范 的数百个精心设计组件。Vuetify 采用移动优先的设计，这意味着无论是在手机、平板电脑还是台式电脑上，你的应用程序都可以开箱即用。

So friends using vue can easily build an application based on Material Design design style using Vuetify.

Isn't it great? Having said that all these things are front-end things from others, do we Blazor have such a UI component library? The answer is of course, and that is MASA Blazor. Finally it's our protagonist's turn.

MASA Blazor

As already mentioned at the beginning, MASA Blazor is a UI component library of Blazor. Blazor allows you to develop web applications without JavaScript, while MASA Blazor allows you to build a very beautiful web application without having to write or writing very little Css. MASA Blazor is a UI component library carefully designed in strict accordance with the design specifications of Material Design. Let's talk about his advantages.

1. Based on the design style of Material Design, it has all the design advantages of Material Design, and has excellent multi-terminal experience, interaction and operation.
2. Deep integration with Blazor makes it easy for back-end developers to get started.
3. It is inherently responsive. In addition to Vuetify's components, there are many preset components such as Url, breadcrumbs, navigation triple linkage, advanced search, i18n, etc.
4. Active community, easy to get started, full-time team maintenance

MASA Blazor deeply restores all components of Vuetify. In addition to the 1:1 restoration, it also adds very practical preset components to encapsulate some commonly used components or a group of components, which is more suitable for the daily use of developers. It greatly reduces development time and increases development efficiency. He also solved most of the worries of back-end folk tune styles. A few sentences of code can quickly build a beautiful page. So next let's take a look at how to introduce it into the Blazor project.

Using MASA Blazor

• Environment: . NET 6.0.0 + Visual Studio 2022
• Create a Blazor Server application

dotnet new blazorserver -o BlazorServerApp

• Add MASA.Blazor package

You can use the NuGet package management tool to search for MASA.Blazor additions, or you can directly

dotnet add package MASA.Blazor

• Add Masa Blazor-related services to Program.cs.

builder.Services.AddMasaBlazor();

What we use here is. net 6.0 Minimal Api without the Startup class. The code also looks relatively concise. If it was a previous version of. net, add services.AddMasaBlazor(); to Startup.ConfigureServices.

• Introducing styles, fonts, scripts in Pages/_Layout.cshtml

Add styles and fonts in 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")/font@5.x/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 to the bottom of the body

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

For versions before. net 6.0, the code is in Pages/_Host.cshtml(Server)

Reference MASA.Blazor in the_Imports.razor file, and BlazorComponent clearly defines the space, so that we don't have to quote every 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 develop based on MASA Blazor. But are the steps a little too many and a little complicated? Of course, these MASA Blazor have also been taken into account for us, so it provides a simpler installation method through templates.

1. Install the template via the dotnet command

dotnet new --install MASA.Template

2. Create a Blazor Server project based on the MASA Blazor component library

dotnet new masab -o BlazorServerApp

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

effect display

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

Two components, MNavigationDrawer and MAppBar, are used.

The renderings are 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, and a component is complete.

Take a look at the effect:

It's that simple.

Let's take a look at how the official Admin template (MASA Blazor Pro) works:

MASA Blazor Pro demonstrates the use of most MASA Blazor components. And it is an out-of-the-box backend front-end management template. They are all open source and free. Interested friends can go and explain it.

MASA Blazor 官网地址：https://blazor.masastack.com

MASA Blazor GitHub 地址：https://github.com/BlazorComponent/MASA.Blazor

MASA Blazor Pro 演示地址：https://blazor-pro.masastack.com/dashboards/ecommerce

MASA Blazor Pro GitHub 地址：https://github.com/BlazorComponent/MASA.Blazor.Pro

We are taking action, new framework, new ecology

我们的目标是自由的、易用的、可塑性强的、功能丰富的、健壮的。

所以我们借鉴 Building blocks 的设计理念，正在做一个新的框架MASA Framework，它有哪些特点呢？

• Native support for Dapr and allow Dapr to be replaced with traditional communication methods
• There is no limit to the architecture, supported by single applications, SOA, and microservices
• Support the. Net native framework, reduce the learning burden, insist on not building new wheels except concepts that must be introduced in specific fields
• Rich ecological support. In addition to the framework, there are also a series of products such as component libraries, rights centers, configuration centers, troubleshooting centers, and alarm centers.
• Unit test coverage of the core code base 90%+
• Open source, free, community-driven
• What else? We are waiting for you to discuss together

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

Currently, the source code has begun to be synchronized to GitHub (the document site is under planning and will gradually improve):

• MASA.BuildingBlocks
• MASA.Contrib
• MASA.Utils
• MASA.EShop
• BlazorComponent
• MASA.Blazor

** Technical exchange: **

• QQ 群：7424099
• WeChat group: Add MasaStackTechOps, comment on your intention, and invite you to join the group

​ ------ END ------

** Author Profile **

• Yan Pengju: Member of the MASA technical team.