First met Masa blazor

Time:2022-1-15

MASA BlazorIt’s aBlazorUI component library. Just like bootstrap and ant design, which are well known in the front end.

Masa blazor official website address: https://blazor.masastack.com
Masa blazer GitHub address: https://github.com/BlazorComp…
Massa Blazer Pro demo address: https://blazor-pro.masastack….
Masa Blazer Pro GitHub address: https://github.com/BlazorComp…

What is blazor

In introductionMASA BlazorBefore, it is necessary to know what isBlazor, if you already knowBlazorWhat is it? You can skip it directly and continue to look below.

BlazorIs a use Net framework for generating interactive client Web UI, usingBlazor, developers can use c# language to code on the server and client to build rich web applications. Doesn’t that sound good? Small back-end partners who are not familiar with the front-end development language can also use itBlazorWeb application development. Take a brief look at the official description.

First met Masa blazor

If you want to know more aboutBlazorYou can turn to this article, which introduces blazor and the comparison between blazor and other front-end technologies in great detail. Or you can go directly to the official documents. I won’t elaborate more here.

Material Design

Finished understandingBlazorLet’s have a brief lookMaterial Design, whyMaterial DesignBecauseMASA BlazorIs based onMaterial DesignDesigned.

Introduction:Material Design, Chinese Name: material design language, also known as texture design, is a cross platform design language launched by Google. It aims to provide highly consistent use experience and visual effects for mobile phones, tablets, desktops and “other platforms”.

advantage:Material DesignIt includes suggestions on how to use shadows, animation, and even how many pixels of borders to use in design. It can help us build a more reasonable page structure, how to layout, font size and spacing. It defines elegant and smooth interactive effects, and guides users’ visual focus and interactive operation in the page.

Material DesignThe core of is simplicity. Big and simple, simple and refined. It brings the experience of the physical world to the screen. Remove the impurities and randomness in reality, retain its most original and pure form, spatial relationship, change and transition, cooperate with the flexible characteristics of the virtual world, restore the closest to the real experience, and achieve a concise and intuitive effect. Of course, its advantages are more than these. Many overseas applications, including a large number of Web sites, are designed based on MD. It is still very popular abroad. If you want to know more about MD, you can go to its official website. Here’s the introduction.

Vuetify

Vuetify Vueui is a popular vueui framework in the world. It is based on Vue JS. Different from other frameworks.VuetifyIt was designed to be easy to learn from the beginning and has hundreds of carefully designed components from the material design specification.VuetifyThe mobile first design means that your applications can be used out of the box, whether on a mobile phone, tablet or desktop.

So usevueSmall partners can useVuetifyIt’s easy to build a system based onMaterial DesignApplication of design style.

Isn’t it great? After saying so much, it’s all the front-end things of others. Let’sBlazorIs there such a UI component library? The answer is, of course, yesMASA Blazor。 Finally, it’s our protagonist’s turn.

MASA Blazor

MASA BlazorAs I said at the beginning, he isBlazorA UI component library,BlazorIt took you awayJavaScriptWeb application development, andMASA BlazorYou can build a very beautiful web application without writing or writing very little CSS.MASA BlazorIs strictly in accordance withMaterial designThe design specification is a well-designed UI component library. Next, let’s talk about his advantages.

  1. be based onMaterial DesignDesign style, withMaterial DesignAll design advantages, multi terminal experience, excellent interaction and operation
  2. AndBlazorDeep integration makes it very easy for back-end developers to get started.
  3. Naturally responsive, exceptVuetifyIn addition to some components, there are many preset components, such as URL, bread crumbs, navigation, advanced search, I18N, etc
  4. The community is active, easy to start, and maintained by a full-time team

MASA BlazorDeep restoreVuetifyIn addition to 1:1 restoration, a very practical preset component is added to encapsulate some commonly used components or a group of components, which is more suitable for the daily use of developers, greatly reducing the development time and increasing the development efficiency. At the same time, he also solved the problem of style adjustment of most back-end people. A few sentences of code can quickly build a beautiful page. Then let’s take a look at how toBlazorIntroduce it into the project.

Using Masa blazor

  • Environment: NET 6.0.0 + Visual Studio 2022
  • establishBlazor Serverapplication

    dotnet new blazorserver -o BlazorServerApp
  • Add Masa Blazor package

    You can search using the nuget package management toolMASA.BlazorAdd or directly

    dotnet add package MASA.Blazor

    First met Masa blazor

  • In program Add in CSMasa BlazorRelated services.

    builder.Services.AddMasaBlazor();

    What is used here is Net 6.0 minimal API has no startup class. The code also looks concise. If it was before Net versionStartup.ConfigureServicesAdd inservices.AddMasaBlazor();Just fine.

  • Pages/_ Layout. Introducing styles, fonts and scripts into cshtml

    Add style and font 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")/[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 a JS script at the bottom of the body

    <script></script>

    First met Masa blazor

    If it is. net6. Before 0, these codes are in pages/_ Host. Cshtml (server)

  • In_ Imports. References in razor filesMASA.BlazorBlazorComponentClear space, so we don’t have to reference each file

    @using MASA.Blazor
    @using BlazorComponent

    First met Masa blazor

  • Replace shared / mainlayout What’s in razor

    <MApp>
        @Body
    </MApp>

    First met Masa blazor

Quickly create blazor projects using templates

After the above steps, you can be based onMASA BlazorDeveloped. But are the steps a little more and a little complicated? Of course theseMASA BlazorIt is also considered for us, so it provides a simpler installation method, which can be installed through templates.

  1. Install the template through 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 done in two simple steps. The created project will help you complete the above steps.

Effect display

Next, we will replace the components of the original demo with the side bar and top toolbar of masa blazor. Screenshot of some codes:

UsedMNavigationDrawerandMAppBarTwo components.

First met Masa blazor

The renderings are as follows:

First met Masa blazor

There are also many beautiful and interesting components. There are examples and code on the official website, such as this oneAppBar

First met Masa blazor

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

First met Masa blazor

See the following effect:

First met Masa blazor

It’s that simple.

Let’s take a look at the official admin template(MASA Blazor Pro)How effective:

First met Masa blazor

First met Masa blazor

Masa razor Pro demonstrates the use of most Masa razor components. It is also an out of the box background front-end management template. Are open source and free. Interested partners can solve it.

Masa blazor official website address: https://blazor.masastack.com
Masa blazer GitHub address: https://github.com/BlazorComp…
Massa Blazer Pro demo address: https://blazor-pro.masastack….
Masa Blazer Pro GitHub address: https://github.com/BlazorComp…

We are moving towards a new framework and a new ecology

Our goal isFreeEasy to useHighly malleableFeature richRobust

Therefore, we are making a new framework based on the design concept of building blocksMASA Framework, what are its characteristics?

  • The native supports dapr and allows dapr to be replaced by traditional communication methods
  • The architecture is unlimited, and single applications, SOA and microservices are supported
  • support. Net native framework to reduce the learning burden. In addition to the concepts that must be introduced in specific fields, we insist on not making new wheels
  • Rich ecological support, in addition to the framework, there are a series of products such as component library, permission center, configuration center, troubleshooting center, alarm center and so on
  • The unit test coverage of the core code base is 90%+
  • Open source, free, community driven
  • What else? We’re waiting for you to discuss it together

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

At present, the source code has been synchronized to GitHub (the document site is under planning and will be gradually improved):

MASA.BuildingBlocks

MASA.Contrib

MASA.Utils

MASA.EShop

BlazorComponent

MASA.Blazor

QQ group: 7424099

Wechat group: add technology operation wechat (masastacktechops), note the purpose, and invite to join the group

First met Masa blazor

​ —— END ——

Introduction to the author

Yan Pengju:Masa technical team member.