Найти тему
CTO Pro IT & .NET

Blazor и ни строчки JS (ну почти)

Blazor
Blazor

Подписывайтесь также на мой Телеграм!

Хочу поделиться своими идеями по разработке SPA (Single Page Application - одностраничное приложение) на .NET.

Уже почти 3 года разрабатываю на Blazor. И реально получаю от этого удовольствие.

Вкратце о Blazor: это web framework свободный и с открытым кодом, который позволяет создавать пользовательские интерфейсы, основанные на компонентах, используя C# и HTML (и, если очень хочется, JS, но это совсем не обязательно). Разработан Microsoft как часть ASP.NET Core.

На Blazor можно разрабатывать следующие виды приложений:

  • Blazor WebAssembly (или WASM) – приложение, выполняющееся непосредственно в браузере в среде выполнения .NET. То есть тот самый SPA, похожий на Angular или React, но только пишете на C#. Среда выполнения .NET загружается вместе с приложением и его зависимостями в браузер, при этом не требуются никакие браузерные расширения или модули. Приложение работает в безопасной песочнице браузера используя WebAssembly.
Blazor WASM
Blazor WASM

  • Blazor Server – компоненты запускаются на сервере, а не в браузере на стороне клиента. Обновления UI, обработка событий и вызовы JavaScript происходят через SignalR соединение с использованием WebSockets протокола.
Blazor Server
Blazor Server

  • Blazor Hybrid – можно использовать компоненты для нативных приложений, таких как .NET MAUI, WPF, Windows Forms.
Blazor Hybrid
Blazor Hybrid

Лично я получаю огромное удовольствие от того, что наконец-то можно писать SPA на C#. Систему управления проектами, про которую рассказывал ранее, написал вообще без JS на Blazor WASM. Хотя JS использовать в приложениях Blazor можно, причем в обе стороны: можно вызывать JS из C# кода (то есть при желании можно подключать свои любимые и незаменимые JS библиотеки и вызывать код в них из C#), а можно вызывать код C# из JS. Возможности невозможные!

Кстати, .NET Aspire Dashboard написан на Blazor.

Еще нужно упомянуть библиотеки компонентов, которые есть для Blazor, и при помощи которых можно делать UI любой сложности, а если готовых подходящих компонентов нет – всегда можно написать на C# свой! И самое главное с такими наборами компонентов приложения можно писать супер быстро. Буквально за неделю можно написать (при определенной сноровке) вполне себе работающий MVP (знаю, пробовал, делал), а за месяц так вообще!

  • Radzen Blazor – пользуюсь этой библиотекой в своих проектах. Исходники открыты. Компоненты шикарные. Какой-нибудь DropDownDataGrid во времена моей молодости можно было бы писать на JS месяцами. А как вам DataGrid с встроенной поддержкой OData, виртуализацией, иерархичным представлением, группировками, drag & drop, inline редактированием, сохранением/загрузкой настроек и т.д. Короче библиотека огонь.
Пример DataGrid
Пример DataGrid

  • Остальные библиотеки не использовал, но они тоже вполне. Поделюсь списком, который удалось собрать за долгое время:
  • MudBlazor - компоненты
  • Plotly.Blazor – различные графики
  • Babylon.Blazor – обертка над известной 3D библиотека Babylon.js
  • MASA Blazor – компоненты
  • ApexCharts – графики – обертка Blazor для ApexCharts.js
  • Piral.Blazor – компоненты для реализации micro frontend
  • Blazorise - компоненты
  • и др.