Stop Over-Engineering Your UI: Material 3 for Blazor (Without the JS State Management Nightmare)

查看原文 / View Original 编辑 / Edit

Stop Over-Engineering Your UI: Material 3 for Blazor (Without the JS State Management Nightmare)

停止过度设计你的 UI：Blazor 的 Material 3（告别 JavaScript 状态管理的噩梦）

If you have built a web app in the last five years using the dominant JavaScript frameworks, you know the drill. You start a simple project, and within an hour, you are drowning in boilerplate. You are configuring Redux or Zustand for state management, wrestling with npm dependency hell, and trying to get your types to cooperate across a fractured backend/frontend stack. It feels like we spent the last decade making web development intentionally difficult. 如果你在过去五年中使用主流 JavaScript 框架构建过 Web 应用，你一定很熟悉这个套路：你开始一个简单的项目，不到一小时就淹没在样板代码中。你忙于配置 Redux 或 Zustand 进行状态管理，在 npm 依赖地狱中挣扎，并试图让前后端分离架构下的类型保持一致。感觉过去十年我们一直在刻意让 Web 开发变得复杂。

But if you are working in the .NET ecosystem, Blazor offers a massive escape hatch. It moves past the bloated state-management traps of modern JavaScript, allowing you to write clean, component-driven, type-safe UIs using pure C#. To prove exactly how streamlined this can be, I built Blazorm3—a lightweight, native implementation of Google’s modern Material 3 design system built entirely for Blazor, completely free of heavy JavaScript wrappers. 但如果你身处 .NET 生态系统，Blazor 提供了一个巨大的“逃生舱”。它摆脱了现代 JavaScript 臃肿的状态管理陷阱，让你能够使用纯 C# 编写简洁、组件驱动且类型安全的 UI。为了证明它有多么精简，我构建了 Blazorm3——这是一个轻量级的、原生的 Google Material 3 设计系统实现，完全为 Blazor 构建，且彻底摆脱了沉重的 JavaScript 包装器。

Why Blazor Moves Beyond the JS State Bloat

为什么 Blazor 能超越 JS 的状态臃肿

In a typical React or Vue application, a massive amount of your codebase is dedicated purely to bridging the gap between your UI and your data. You need state managers, context providers, action dispatchers, and custom hooks just to share a string between two components. Blazor handles this elegantly by treating components as first-class, stateful objects out of the box. 在典型的 React 或 Vue 应用中，大量的代码库纯粹是为了弥合 UI 和数据之间的鸿沟。仅仅为了在两个组件之间共享一个字符串，你就需要状态管理器、上下文提供者、动作分发器和自定义 Hook。Blazor 通过将组件视为开箱即用的“一等公民”状态对象，优雅地解决了这个问题。

  • Direct Component Communication: Parameters, EventCallbacks, and Cascading Values handle data flow natively. You don’t need a third-party architectural library just to update a sidebar toggle.

  • 直接组件通信： 参数（Parameters）、事件回调（EventCallbacks）和级联值（Cascading Values）可以原生处理数据流。你不需要为了更新一个侧边栏开关而引入第三方架构库。

  • Unified Tech Stack: Your frontend UI components share the exact same C# models, validation logic, and types as your backend APIs. There is zero translation layer.

  • 统一的技术栈： 你的前端 UI 组件与后端 API 共享完全相同的 C# 模型、验证逻辑和类型。不存在任何转换层。

  • True Reusability: When you encapsulate UI logic in a Blazor component, it stays in that component. Because Blazor handles the architecture so naturally, it leaves you free to focus on what actually matters: making the application look and feel incredible. That is exactly why I built Blazorm3.

  • 真正的可重用性： 当你在 Blazor 组件中封装 UI 逻辑时，它就保留在该组件内。由于 Blazor 处理架构的方式非常自然，你可以专注于真正重要的事情：让应用看起来和用起来都令人惊叹。这正是构建 Blazorm3 的原因。

Introducing Blazorm3: Modern UI for Modern .NET

介绍 Blazorm3：为现代 .NET 打造的现代 UI

Google’s Material 3 (Material You) is one of the most adaptive, beautiful design systems available today, featuring dynamic color toning, expressive typography, and highly responsive components. Many existing Blazor UI libraries are either wrappers around heavy JavaScript codebases, or they are still stuck on older Material 2 guidelines. Blazorm3 is a native C# UI library designed from the ground up to bring the clean, modern aesthetics of Material 3 to Blazor WebAssembly and Blazor Server apps. Google 的 Material 3 (Material You) 是当今最自适应、最美观的设计系统之一，具有动态色彩调配、富有表现力的排版和高度响应的组件。许多现有的 Blazor UI 库要么是沉重 JavaScript 代码库的包装器，要么仍停留在旧的 Material 2 指南上。Blazorm3 是一个从零开始设计的原生 C# UI 库，旨在将 Material 3 简洁、现代的美学带入 Blazor WebAssembly 和 Blazor Server 应用中。

Look at the Code (No Boilerplate Required)

看看代码（无需样板代码）

Here is how simple it is to drop a fully styled, interactive Material 3 Card into your application using Blazorm3: 使用 Blazorm3 将一个样式完整、交互式的 Material 3 卡片放入你的应用中是多么简单：

@page "/dashboard"
<M3Container MaxWidth="MaxWidth.Large">
    <M3Grid Container Spacing="3">
        <M3Grid Item Xs="12" Md="6">
            <M3Card Variant="CardVariant.Elevated">
                <M3CardHeader Title="Analytics Overview" Subtitle="Real-time data stream" Icon="analytics" />
                <M3CardContent>
                    <p>Your Blazor app is running at peak performance without a single line of JS state management logic.</p>
                </M3CardContent>
                <M3CardActions>
                    <M3Button Variant="ButtonVariant.Filled" OnClick="RefreshData">Update</M3Button>
                    <M3Button Variant="ButtonVariant.Text">View Details</M3Button>
                </M3CardActions>
            </M3Card>
        </M3Grid>
    </M3Grid>
</M3Container>

Notice what is missing? No complex imports, no initializing a state store, no complex setup. Just readable, type-safe markup that renders instantly. 注意到少了什么吗？没有复杂的导入，没有初始化状态存储，没有复杂的设置。只有可读、类型安全的标记语言，并且能立即渲染。

Launching Your Next Project in Seconds

秒级启动你的下一个项目

We recently crossed a major milestone: over 1,500 core library downloads and nearly 1,400 project template downloads. What makes me most excited about these numbers is the near 1:1 ratio. It means developers aren’t just looking at the library—they are using our dotnet template to spin up brand-new applications from scratch. To make adoption completely frictionless, I created a CLI template that sets up a gorgeous, production-ready Material 3 layout—complete with responsive navigation rails and clean layout structures—in a single terminal command. 我们最近跨越了一个重要的里程碑：核心库下载量超过 1,500 次，项目模板下载量近 1,400 次。让我对这些数字感到最兴奋的是近乎 1:1 的比例。这意味着开发者不仅仅是在查看该库，他们正在使用我们的 dotnet 模板从零开始构建全新的应用。为了让采用过程完全无摩擦，我创建了一个 CLI 模板，只需一条终端命令，即可设置一个华丽、生产就绪的 Material 3 布局，并配备响应式导航栏和简洁的布局结构。

Getting Started

开始使用

You can install the template and spin up your new Blazor project right now: 你可以立即安装模板并启动你的新 Blazor 项目：

# Install the Blazorm3 Project Template
# 安装 Blazorm3 项目模板
dotnet new install Blazorm3.Templates

# Create a brand new, fully styled project
# 创建一个全新的、样式完整的项目
dotnet new blazorm3 -n MyAwesomeM3App

Once it builds, you will have a beautiful, responsive, modern web application running on the leanest, most powerful developer stack available. Although Blazorm3 is a commercial product, it comes with a free version, and it is growing incredibly fast. We are currently in our active user-acquisition phase, which means your feedback directly shapes the components we build next. Please have a look at BlazorM3 website. You will find the live demo of the components, and of course a theme builder. 构建完成后，你将拥有一个美观、响应式、现代化的 Web 应用，它运行在目前最精简、最强大的开发者技术栈上。虽然 Blazorm3 是一个商业产品，但它提供免费版本，并且增长速度极快。我们目前处于活跃的用户获取阶段，这意味着你的反馈将直接决定我们接下来构建哪些组件。请访问 BlazorM3 网站，你可以在那里找到组件的实时演示，当然还有主题构建器。

If you are tired of the JavaScript framework treadmill and want to build stunning web apps with the speed and reliability of modern .NET, give it a spin. 如果你厌倦了 JavaScript 框架的“跑步机”，并希望以现代 .NET 的速度和可靠性构建令人惊叹的 Web 应用，不妨试一试。

📦 NuGet Package: Search for Blazorm3 📦 NuGet 包： 搜索 Blazorm3 🛠️ Template: Blazorm3.Templates 🛠️ 模板： Blazorm3.Templates

Have you made the switch from JS frameworks to Blazor? What has your experience been with state management? Let’s talk in the comments below! 你是否已经从 JS 框架转向了 Blazor？你在状态管理方面的体验如何？欢迎在下方评论区交流！

← 返回新闻列表 / Back to news list