Зачем нужен Blazor: секреты мастеров с примерами кода для полноценного .NET в браузере

В мире веб-разработки долгое время царила гегемония JavaScript. Даже разработчики, привыкшие к строгой типизации и мощным фреймворкам бэкенда на .NET или Java, были вынуждены переключаться на экосистему JS для создания фронтенда. Blazor, часть платформы .NET, бросает вызов этому статус-кво, позволяя писать интерактивные веб-интерфейсы на C# и Razor. Но зачем он нужен? В этой статье мы раскроем секреты и преимущества Blazor, подкрепленные практическими примерами кода.

Суть Blazor в том, что он выполняет код .NET прямо в браузере через WebAssembly (режим Blazor WebAssembly) или на сервере с динамическим обновлением UI через SignalR (режим Blazor Server). Это открывает уникальные возможности. Первое и главное преимущество — **единая технологическая стек**. Команда может использовать один язык (C#), одну экосистему (.NET) и общие библиотеки как для серверной логики, так и для клиентского UI. Это резко снижает когнитивную нагрузку, упрощает найм и позволяет глубже повторно использовать код.

Рассмотрим пример компонента — строительного блока любого Blazor-приложения. Компонент — это файл с расширением `.razor`, сочетающий разметку (HTML с синтаксисом Razor) и логику на C#.
Counter.razor:
@page "/counter"

<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
Click me

@code {
 private int currentCount = 0;
 private void IncrementCount()
 {
 currentCount++;
 // Можно вызывать .NET библиотеки напрямую!
 var logger = new SimpleLogger();
 logger.Log($"Count increased to {currentCount}");
 }
}
Этот компонент имеет маршрут `/counter`. При нажатии кнопки вызывается метод C# `IncrementCount`, который обновляет состояние (`currentCount`). UI автоматически перерисовывается. Обратите внимание: мы можем создавать и использовать обычные классы .NET (`SimpleLogger`) прямо в клиентском коде при использовании WebAssembly.

Второй секрет — **мощная модель компонентов с параметрами и каскадными значениями**. Компоненты могут принимать параметры, генерировать события и быть вложенными.
ParentComponent.razor:

<p>Message from child: @messageFromChild</p>

@code {
 private string messageFromChild;
 private void HandleChildEvent(string message)
 {
 messageFromChild = message;
 }
}

ChildComponent.razor:

 <h3>@Title</h3>
 Say Hello


@code {
 [Parameter]
 public string Title { get; set; }
 [Parameter]
 public EventCallback OnButtonClicked { get; set; }
 private async Task NotifyParent()
 {
 await OnButtonClicked.InvokeAsync("Hello from Child!");
 }
}
Здесь `ParentComponent` передает данные в `ChildComponent` через параметр `Title` и подписывается на его событие `OnButtonClicked`. Это привычный для WPF/UWP/Xamarin паттерн, теперь доступный в вебе.

Третий ключевой аспект — **взаимодействие с JavaScript**. Несмотря на стремление к чистому .NET, мир веба построен на JS. Blazor предоставляет элегантный механизм Interop. Допустим, нам нужно вызвать функцию `alert` браузера или использовать JS-библиотеку.
В файле `wwwroot/index.html` (WebAssembly) или `_Host.cshtml` (Server) добавляем JS-функцию:

 window.showAlert = (message) => {
 alert('From Blazor: ' + message);
 };

В компоненте Blazor:
@inject IJSRuntime JS
Call JavaScript

@code {
 private async Task ShowAlert()
 {
 await JS.InvokeVoidAsync("showAlert", "Hello, JavaScript!");
 }
}
Аналогично можно вызывать методы C# из JavaScript, что открывает двери для интеграции с любыми существующими библиотеками, такими как Chart.js или Google Maps.

Четвертый секрет мастеров — **состояние и инъекция зависимостей (DI)**. Blazor имеет встроенный контейнер DI, идентичный ASP.NET Core. Это позволяет эффективно управлять состоянием приложения и сервисами.
Создадим сервис:
public interface ICounterService
{
 int CurrentCount { get; set; }
}
public class CounterService : ICounterService
{
 public int CurrentCount { get; set; }
}
Регистрируем его в `Program.cs`:
builder.Services.AddSingleton();
И используем в любом компоненте:
@inject ICounterService CounterService
<h2>Global Count: @CounterService.CurrentCount</h2>
Increment Global
Все компоненты, использующие `ICounterService`, будут получать один и тот же экземпляр (singleton), что идеально для глобального состояния приложения.

Пятое преимущество — **Blazor Server и его реальное время**. В режиме Server весь код C# выполняется на сервере. Каждое взаимодействие пользователя (клик, ввод) отправляется на сервер по соединению SignalR, там обрабатывается, и разница в DOM вычисляется и отправляется обратно клиенту. Это дает мгновенный доступ к серверным ресурсам (базам данных, внутренним API) без необходимости писать отдельный REST API. Однако это накладывает требования к задержке сети и масштабируемости сервера (каждое подключение — это состояние в памяти).

Наконец, будущее — **гибридные приложения с .NET MAUI**. Blazor позволяет не только создавать веб-сайты, но и встраивать эти же компоненты в нативные мобильные и десктопные приложения через гибридные движки, такие как WebView. Проект `.NET MAUI Blazor App` позволяет использовать компоненты Blazor для рендеринга UI внутри мобильного приложения, при этом имея доступ к нативным API устройства через C#. Это стирает последние границы между платформами.

Таким образом, Blazor нужен не просто как еще один фронтенд-фреймворк. Он нужен как стратегическое решение для .NET-команд, стремящихся к максимальной эффективности за счет общего стека, для проектов, где важна строгая типизация и безопасность, и для сценариев, где логика на C# может быть напрямую перенесена в браузер. С его мощной моделью компонентов, интеграцией с .NET экосистемой и гибкостью в выборе модели хостинга, Blazor представляет собой зрелую платформу для современной веб-разработки.