Blazor представляет UI-фреймворк для создания интерактивных приложений, которые могут работать как на стороне сервера, так и на стороне клиента, на платформе .NET. В своем развитии фреймворк Blazor испытал большое влияние современных фреймворков для создания клиентских приложений - Angular, React, VueJS. В частности, это проявляется в роли компонентов при построении пользовательского интерфейса. В то же время и на стороне клиента, и на стороне сервера при определении кода в качестве языка программирования применяется C#, вместо JavaScript. А для описания визуального интерфейса используются стандартные HTML и CSS.
Фреймворк Blazor развивается как opensource-проект, исходный код которого можно найти в репозитории на github: https://github.com/dotnet/aspnetcore/tree/master/src/Components
Blazor предоставляет разработчикам следующие преимущества:
Написание кода веб-приложений с помощью C# вместо JavaScript
Использование возможностей экосистемы .NET, в частности, библиотек .NET при создании приложений, безопасности и производительности платформы .NET
Клиентская и серверная части приложения могут использовать общую логику
Использование Visual Studio в качестве инструмента для разработки, который имет встроенные шаблоны для упрощения создания приложения
Функционально на текущий момент Blazor подразделяется на несколько подсистем:
Blazor Server: позволяет создавать серверные приложения и поддерживается ASP.NET
Blazor WebAssembly: позволяет создавать одностраничные интерактивные приложения клиентской стороны, которые запускаются в браузере пользователя и работают с помощью технологии WebAssembly
Blazor Hybrid: позволяет создавать десктопные и мобильные приложения поверх технологии .NET MAUI
Первая превью-вервия Blazor вышла в 22 марта 2018 года. В полненоценный релиз Blazor Server вышел в сентябре 2019 года, а Blazor WebAssembly - в мае 2020 года, и обе эти платформы включены в .NET и полноценно могут использоваться для создания серверных приложений и клиентских приложений. То есть фактически Blazor покрывает потребности в веб-приложениях как на стороне сервера, так и на стороне клиента.
Долгое время написание клиентских веб-приложений было уделом языка JavaScript. Внедрение поддержки WebAssembly изменило ситуацию. И технология Blazor WebAssembly позволяет создавать интерактивные приложения на языке C#, которые запускаются и отрабатывают в браузере пользователя с помощью технологии WebAssembly. При построении и запуске приложения Blazor WebAssembly файлы с кодом C# и Razor компилируются в сборки .NET. Затем Blazor WebAssembly (а если точнее скрипт blazor.webassembly.js) загружает среду выполнения .NET, сборки и их зависимости и настраивает среду выполнения .NET для выполнения сборок. Посредством взаимодействия с JavaScript фреймворк Blazor WebAssembly может обращаться к DOM и API браузера.
Такая модель выполнения имеет ряд преимуществ. Так, Blazor WebAssembly не зависит от сервера. Все необходимые файлы среды выполнения .NET и загружаемых сборок могут кэшироваться в браузере и работать без доступа к сети. По большому счету нам может быть достаточно статического сервера, на котором размещены все файлы приложения.
Поскольку приложение работает полностью на стороне браузера и совершенно не зависит от сервера, то снижается нагрузка на сервер.
В то же время Blazor WebAssembly имеет ряд ограничений. Например, браузер должен поддерживать технологию WebAssembly - на данный момент последние версии распространенных браузеров (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge, Yandex Browser) поддерживают эту технологию. Однако более старые версии, либо Internet Explorer не имеют подобной подобной поддержки. Также браузеру необходимо загрузить файлы большого размера, так как приложение полностью отрабатывает на стороне клиента, что увеличиваает нагрузку на сеть и время загрузки. Также, поскольку все файлы приложения доступны пользователю, то нивелируется возможность скрыть какой-нибудь код, который представляет коммерческую ценность. Ну и кроме того, в этом случае возможности приложения ограничены браузером, в котором запускается приложение.
В Blazor Server приложение отрабатывает на стороне сервера. Обновление элементов пользовательского интерфейса, обработка событий, вызовы JavaScript на клиентской стороне осуществляются посредством взаимодействия сервера и клиента через SignalR.
То есть когда пользователь взаимодействует с приложением в браузере, вызывает события пользовательского интерфейса (например, нажимает на кнопку), то клиентская сторона посылает на сервер информацию о событии, сервер обрабатывает полученную информацию и посылает клиенту в ответ инструкции, как необходимо обновить элементы интерфейса. В какой-то степени это похоже на подход, применявшийся в ASP.NET WebForms.
Поскольку большая часть логики приложения сосредоточена на стороне сервера, то все загружаемые клиентом файлы имею гораздо меньший размер по сравнению с Blazor WebAssembly. Приложение не ограничено браузером и может воспользоваться возможностями серверной обработки. Кроме того, приложение может работать с устаревшими браузерами, которые не поддерживают WebAssembly.
В то же время для работы приложения необходима постоянная поддержка сетевого подключения. Если количество пользователей велико, что увеличивается нагрузка на сервер. Также задержки в сети могут оказать негативное воздействие. В частности, при задержках в более чем 200 миллисекунд интерфейс становится гораздо менее отзывчивым, начинает тормозить.
В .NET 8, который вышел в ноябре 2023 года, модель приложения Blazor получила дальнейшее развитие. Обе модели - Blazor Server и Blazor WebAssembly были объединены в одну модель, которая сочетает рендеринг на сервере и интерактивность Blazor WebAssembly. При необходимости мы можем использовать либо рендеринг на стороне сервера, либо рендеринг на стороне клиента, либо совмещать оба вида рендеринга. Таким образом, объединенная модель применяет следующие способы рендеринга:
Статический рендеринг на стороне сервера: выполняет код на стороне сервера, как это делают Razor Pages и MVC. Полный ответ затем отправляется в браузеру для отображения, и дальнейшее взаимодействие между сервером и клиентом прекращается до тех пор, пока браузер не выполнит новый HTTP-запрос.
Потоковый рендеринг: код выполняется на стороне сервера. Подходит, когда данные формируются в результате асинхронной операции. Пока асинхронная операция выполдняется, в браузере отображается одна HTML-разметка. Когда асинхронная операция завершена, сервер отправляет окончательную разметку для обновления содержимого страницы. Это улучшает взаимодействие с пользователем, поскольку он видит некоторый контент, например, сообщение "Загрузка…", ожидая финального результата.
Интерактивный рендеринг на сервере: во время интерактивного взаимодействия пользователя с компонентом на веб-странице с помощью SignalR выполняются запросы к серверу. Сервер обрабатывает запрос и присылает в ответ клиенту результат, который отображается на веб-странице. Подобные интерактивные запросы с помощью SignalR более эффективны, чем полноценные HTTP-запросы. Тем не менее между браузером и сервером необходимо постоянное соединение SignalR, что ограничивает масштабируемость. Наиболее подходит для веб-приложений, запущенных во внутренней сети/интранете, с ограниченным числом клиентов и высокой пропускной способностью сети.
Интерактивный рендеринг WebAssembly: код целиком выполняется на стороне клиента, что означает, что код имеет доступ только к ресурсам в браузере. Это может усложнить реализацию, поскольку если потребуется новая порция данных, то необходимо будет выполнять новый запрос к серверу. Наиболее подходит для веб-приложений, где потенциально имеется большое количество клиентов и соединения с некоторыми из них характеризуются низкой пропускной способностью.
Интерактивный автоматический рендеринг: начинается с рендеринга на сервере для более быстрого первоначального отображения, загружает компоненты WebAssembly в фоновом режиме, а затем переключается на WebAssembly для последующей интерактивности.
Подобная модель означает, что при разработчик может написать компоненты Blazor один раз, а затем выбрирать их способ рендеринга.
С выходом .NET 6 вышел также Blazor Hybrid, который работает поверх фрейворка .NET Multi-platform App UI (MAUI) подобно технологии Electron. Содержимое приложения Blazor запускается через специальный элемент - BlazorWebView. Blazor Hybrid позволяет запускать те же компоненты, что используются в Blazor WebAssembly или Blazor Server практически без изменений. Таким образом, Blazor покрыл и серверный веб, и клиентский веб, и десктоп и мобайл. Но в данном руководстве мы сделам акцент на создание именно веб-приложений с помощью Blazor.
Ключевым элементом приложения Blazor являются компоненты. Кто работал с фреймворками клиентской стороны, такими как Angular, React, VueJS, то сталкивался с компонентами, которые по сути структурируют приложение. В Blazor применяется похожая концепция. Здесь компонент представляет элемент интерфейса, например, какое-то определенное содержание, меню, диалоговое окно, форма ввода данных или даже целая страница. Все есть компонент.
Компоненты определяют логику рендеринга элементов интерфейса, а также логику обработки пользовательского ввода. Компоненты могут быть вложенными в другие компоненты. Компоненты можно повторно использовать в других проектах и переносить в виде библиотеки классов Razor. Обычно класс компонента располагается в файле с расширением .razor, а для их определения применяется синтаксис Razor, который позволяет объединить разметку HTML с кодом на C#.
Благодаря компонентам уменьшается количество повторяющегося кода и упрощается поддержки и обновление приложения.
Blazor прост и легок в обучении
Наличие инструментария, в частности, среды Visual Studio, которые облегчают разработку с Blazor.
Развитая экосистема разработчиков, благодаря чему в сети проще найти ответ на интересующий вопрос. Наличие большого количества различных компонентов и библиотек от других разработчиков, которые можно использовать в своих приложениях.
Использование Blazor не навязывает использование определенных стандартов для архитектуры приложения. Кому-то нравится MVVM (model-view-viewmodel), кому нравится другой паттерн - выбор всецело ложится на разработчика.
Мы можем использовать для построения приложений сервера и клиента один и тот же язык - C#, для создания клиентского браузерного приложения использовать и знать JavaScritpt необязательно. Кроме того, можно определять некоторую бизнес-логику на C# и использовать ее в как в приложениях Blazor, так и в приложениях, построенных с помощью других технологий - WinForms, WPF, MAUI, ASP.NET и т.д.
Если говорить о клиентских приложениях на Blazor WebAssembly, то для них даже не нужен установленных .NET на компьютере клиента, так как приложение разворачивается в браузере. Даже не нужен сервер на .NET.