Blazor Open Source Component Library- Masa Blazor

Official explanation of Blazor

Blazor 允许您使用C#而不是 JavaScript构建交互式Web UI`。 Blazor 应用由可重用的 Web UI 组件组成，这些组件使用 C#、HTML 和 CSS 实现。客户端和服务器代码都是用 c#编写的，允许您共享代码和库。

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：

使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。
Share server-side and client-side application logic written in. NET.
Render the UI as HTML and CSS to support many browsers, including mobile browsers.
与新式托管平台（如 Docker）集成。

Using. NET for client-side web development provides the following advantages:

Use C#instead of JavaScript to write code.
利用现有的 .NET 库生态系统。
Share application logic between server and client.
Benefit from the performance, reliability and security of. NET.
在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。
Generations are based on a stable, feature-rich and easy-to-use set of common languages, frameworks and tools.

Seeing that some friends here are about to throw out melons in their hands, some of them are indeed exaggerated. At least VS works efficiently on three platforms, um... Keep eating the rest

Blazor Vs MVC

what is MVC

Official explanation: ASP.NET Core MVC is a rich framework for building web applications and APIs using the "Model-View-Controller" design pattern.

Blazor is an interactive web UI, while MVC is a web application and API.

What is Interactive Web UI?

Google, Baidu turned a circle, there is no explanation, even Wiki is also a face confused.

Try to understand it. Interactive Web UI focuses on interaction, and Blazor's official explanation is to replace JavaScript with C#. Then let's see what JavaScript has. Baidu looks for a paragraph:

Embed dynamic text into HTML pages
Respond to browser events
Read and write HTML elements
Verify data before it is submitted to the server
Detect visitor browser information. Control cookies, including creation and modification

With these basic functions, users no longer need to jump around in static pages, and the experience is indeed much better

What are the advantages of Blazor?

It provides some interactive capabilities and is no longer a purely static page. Although mvc can use JavaScript to achieve the same effect, you need to master JavaScript and even learn jQuery, Angular, Vue, etc. The interactive capability provided by Blazor is the use of C#.

I'm done, but can you really be 100% C#? It's hard and you'll encounter all kinds of issues such as compatibility, performance, etc. Okay, can I stop using it? Wait, there are melons below

Blazor Vs Modern Front End (Angular, Vue, etc.)

Let's compare it from several aspects

debugging

Blazor：Vistual Stuidio + F5，VS Code/命令行工具 + dotnet watch

Much faster than WebPack, similar to Vite

Hot Reload is okay in non-complex scenarios, but there are too many weird problems, and the prospects are good. For now, we should still use Ctrl + F5 to start it or use the command line.

VS 2022 's Ctrl + F5 already supports Hot Reload

Modern Front-End: Webpack/Vite

family bucket

Take Vue as an example. Vue family buckets include Vue Cli, Vue Router, and Vuex

Blazor：

Cli：dotnet cli
Router：Microsoft.AspNetCore.Components.Routing.Router
Vuex: Blazor state management, the difference is that WASM state is stored in browser memory, while Server state is stored in server memory. Moreover, Blazor state management is more powerful because of the capabilities of. Net, which natively supports persistent storage, cross-line storage (shared server memory under Server), and ASP.NET Core protected browser storage (exclusive to Server)

component library

Mainstream Bootstrap, Ant Design, Material Design, etc. are available on both sides. However, due to years of accumulation in modern front-end, there is indeed a certain gap in quality.

In addition to its richness, Blazor allows it to be loaded by JavaScript calls and generate components such as Angualr and React.

Although this may seem a bit inconsistent with using C#to solve JavaScript, it's good to integrate into the larger environment.

The following figure illustrates an example of an inventory-grid Component provided by Blazor being referenced by React (of course, it can also be given to Angular):

Even more amazing is that the Blazor Component reused in React also supports Hot Reload. Let's not talk about Hot Reload, but this direction alone is actually worth looking forward to the future of Hot Reload.

Not only can it provide React with reusable components, it can also provide WPF with

third-party libraries

Give a few commonly used front-end libraries to compare.

Network: Modern front-end has axios, Blazor has HttpClient
Data manipulation: Modern front-end has Lodash, Blazor has Linq
Time: Modern front-end has moment.js and Day.js, Blazor has DateTime family buckets
Responsive programming: Modern front-end has rx.js, Blazor has Rx.Net (I haven't used it, theoretically, basically. Net can be used, error correction is welcome)
Mock: Modern front-ends have Mock.Js, Blazor has Moq, and of course, in addition to mock, there are end-to-end ones, and both parties have them.

In comparison,.Net actually has some advantages. Is that perfect? Of course not, let's talk about the disadvantage.

Charts: Modern front-ends have ECharts, etc., Blazor doesn't want to talk

Although Blazor does not currently have a mature and free Charts component library, because of Blazor's ability to interact with JS, calling ECharts is also very simple, which slightly tests the hands-on skills of your friends.

Rich text editor, drag and drop...
Blazor quit the Group chats while cursing...

package management

Blazor：NuGet
Modern front-end: NPM, Yarn

performance

The data is not intuitive, let's take a look at the demo screenshots on. Net Conf 2021 first:

Is there quantitative data? There are:

视频地址：https://sec.ch9.ms/ch9/daba/468d5211-982b-4c86-8b51-e1c8824edaba/dotNETConfNewBlazorWebAssembly_high.mp4

Can AOT solve thousands of worries? Not really. At least the application size is indeed much larger, but this does not prevent AOT from solving problems in specific scenarios. Technology must always choose to use it in the right scenario, not blindly.

are we done

Of course not. In fact, this comparison is unfair to Blazor, because Blazor has more highlights on the shoulders of. Net, such as natively supported generics, DI, object-oriented design (although TS is also), countless. Net class libraries, cross-platform applications (MAUI), etc.

In fact, there is no need to only see Blazor's disadvantages, but also see how far you can go standing on the front end of. Net. Isn't this what we expect?

Seeing this, some. Net antique bosses are about to come forward and speak out, Silverlight! Yes, but this time WASM no longer required plug-ins to download.

Web Assembly Vs Server (server-side rendering)

Web Assembly: WebAssembly is a new way of encoding that can be run in modern web browsers-it is a low-level assembly-like language with a compact binary format that can run near native performance and provides a compilation target for languages such as C/C ++ so that they can run on the Web. It is also designed to coexist with JavaScript, allowing the two to work together.
Server (Server Side Render-SSR): Render components as server-side HTML strings, send them directly to the browser, and finally "activate" these static tags into a fully interactive application on the client side.

Why use SSR

The main advantages of server-side rendering (SSR) are:

Better SEO, because search engine crawler crawlers can directly view fully rendered pages.
Faster content arrival times (time-to-content)

When to use SSR

There are some tradeoffs when using server-side rendering (SSR):

Limited by development conditions. Browser-specific code can only be used in certain lifecycle hooks; some external libraries may require special handling to run in server rendering applications.
More requirements related to build setup and deployment. Unlike fully static single-page applications (SPAs) that can be deployed on any static file server, server-rendering applications requires a server-side running environment.
More server-side load.

Server-side rendering vs pre-rendering (SSR vs Prerendering)

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

Blazor Server supports Prerendering

Blazor should you choose Web Assembly or Server?

Take a look at a picture from the. Net Conf 2021 conference:

To summarize:

Server needs to persist long connections and has higher UI latency
Web Assembly has a larger download size and slower runtime performance

what we're doing

Another cliché issue. The vast coverage of. Net makes it difficult to solve all problems. After weighing the pros and cons, can we contribute our own small contribution to the. Net ecosystem?

Open source component library

Going back to component libraries, there are actually quite a few component libraries on the market. Why should we continue to interfere in this quagmire?

Students who have developed component libraries or contributed source code should realize how complex it is to write a component. And everyone's aesthetic perspective on a design is also different. What if the design you like doesn't provide implementation? Writing from scratch? It was too tiring, so we tried something.

Let's take a look at the general idea first:

架构图

A simple analysis:

Based on Blazor, build a new component library called Blazor Component

So what are his characteristics?

Provides only interaction, no styles
Standardized Dom structure
Open up almost all customizable Slots (the concept is taken from Vue), allowing you to replace Slots 'Dom

Unified unit testing of slots and interactions (currently underway at 38%, short-term target at 80%, long-term target at 90%+)
Sample projects based on Material Design (style quoted from Vuetify) can be production-ready (used by our own company and by Fortune 500 companies)
Quickly implement new component libraries, just based on a certain Design + style control attribute + special interactions

The future is worth looking forward to, and we hope the future will be like this:

Shame on me, I have been getting a wave of popularity

MASA Blazor

Blazor component library based on Blazor Component and Material Design

Up to now, there are 68 basic components, which will continue to be added in the future
Preset components, providing deep integration with. Net functions and commonly used combination components, such as Url, breadcrumbs, and menu linkage, advanced search, i18n, etc.
MASA Blazor Pro provides preset layouts for a variety of common scenarios
Full-time team maintenance, issue response quickly
Well-known companies are using it, and the MASA Stack product line will always be using it in the future, continuing to add new functions
Free, open source

We also plan to support one-click switching of themes (code switching is already provided), preset layouts, data display components, WorkFlow components, etc. in the future.

MASA Blazor Pro

Based on the Admin template provided by MASA Blazor, put a few design drafts first, and the source code will be released together with MASA Blazor.

MASA EShop

EShopOnDapr, built based on the MASA Framework, will use MASA Blazor Pro to provide complete front-end examples

eshop

开源地址：https://github.com/masalabs/MASA.EShop

##Summary

After all, there is no perfect technology. After you weigh the pros and cons, it is the most appropriate to use it in the right situation.

It doesn't matter whether it is spring or cold winter. What matters is whether this moment solves your pain points.

Finally, a little advertisement

- MASA Blazor will be released soon **, so stay tuned. If you are interested in our component library, whether it is code contribution, use, or issue presentation, please contact us

reference

欢迎加入技术交流群: MASA Stack