Blazor — это UI-фреймворк, разработанный компанией Microsoft и позволяющий разработчикам создавать интерактивные веб приложения, используя C#, HTML и CSS.
Модели работы Blazor
Blazor имеет несколько режимов, или моделей, работы:
-
Сервер-сайд рендеринг (SSR, он же Blazor Server)
-
Клиент-сайд рендеринг (CSR, он же Blazor Client или Blazor wasm)
-
Интерактивный режим
-
Гибридный режим (Blazor hybrid)
Blazor Server
Приложение запускается на стороне сервера, а все взаимодействие между браузером и сервером происходит через SignalR — абстракцию, работающую поверх сокетов. То есть когда пользователь заходит на сайт, сервер возвращает статическую страницу, после чего устанавливается соединение между браузером клиента и сервером. При изменении состояния (стейта) сервер возвращает клиенту готовый HTML, и браузер рендерит его. К плюсам этого подхода можно отнести SEO и быструю инициализацию приложения, а к минусам большие объемы трафика и нагрузку на сервер.
Blazor Client
Приложение запускается на стороне клиента, используя технологию WebAssembly — низкоуровневый язык, аналог ассемблерного кода, но только для браузера. Для размещения такого приложения достаточного любого статического хостинга или даже S3-хранилища. К плюсам можно отнести небольшую нагрузку на сервер, а к минусам — довольно большой размер скачиваемого бандла, относительно долгую инициализацию приложения и плохую поддержку SEO.
Интерактивный режим
Приложение, которое берет лучшие стороны от Blazor server и Blazor client, инициализируется в режиме Blazor server, через SignalR устанавливается соединение, и в фоне начинает скачиваться wasm-бандл. После того как бандл был загружен, происходит переинициализация приложения с сохранением текущего состояния, и режим работы меняется на Blazor Client.
Blazor hybrid
Дает возможность запускать Blazor-приложение внутри нативного приложения, используя NET MAUI для Android, iOS, macOS и Windows. К достоинствам данного подхода можно отнести полную интеграцию с целевой платформой и возможность переиспользования UI между веб- и мобильным приложением.
Далее предлагаю вместе создать небольшое веб-приложение и запустить его в интерактивном режиме, используя Timeweb Cloud Apps.
apps
Шаг 1: Настраиваем окружение
Для разработки нам понадобится IDE и DotNet SDK. Для этого установим Visual Studio 2022 Community. Скачиваем установщик с сайта «Майкрософт» по ссылке.
Запускаем, выбираем рабочую нагрузку «ASP.NET and web development» и жмем «Install».
После того как Visual Studio установлена, можем приступить к следующему шагу.
Шаг 2: Создание тестового приложения
Открываем IDE и создаем новый проект.
В списке шаблонов находим и выбираем «Blazor Web App».
Даем ему название, в нашем случае это будет «BlazorApp».
И конфигурируем наше будущее приложение. Тут нам нужно указать в качестве «Interactive render mode» режим «Auto».
После создания приложения у нас в обозревателе решений будет следующая структура проекта:
BlazorApp — это основное веб-приложение, которое запускается на сервере и будет отдавать отрендеренную страницу при первом обращении, а также будет хостить сборку клиентского приложения.
BlazorApp.Client — это уже клиентская часть приложения, она собирается в wasm-бандл и будет скачиваться браузером после того, как Blazor server отрендерит начальную страницу.
Для демонстрации приложения предлагаю добавить компонент, для этого жмем правой кнопкой мыши на Add → New item.
Выбираем «Razor Component» и даем ему название «RenderMode».
Внутри добавляем следующий код:
@using System.Runtime.InteropServices
<label>Render mode: @renderMode</label>
@code {
string renderMode = "";
protected override void OnInitialized()
{
renderMode = RuntimeInformation.ProcessArchitecture.ToString();
}
}
В блоке @code { } обычно пишется код C#. В данном примере мы объявляем переменную renderMode, где записываем архитектуру, на которой выполняется приложение. Для серверного режима это будет x86, для клиентского — wasm. Также стоит обратить внимание на перегруженный метод OnInitialized, он выполняется в момент инициализации компонента. Далее мы эту переменную выводим внутри HTML-тега label: <label>Render mode: @renderMode</label>.
В компоненте Counter.razor изменим режим рендеринга на @(new InteractiveWebAssemblyRenderMode(true)) и добавим компонент RazorMode. Должно получиться так:
Также добавим компонент и в Home.razor:
Настало время запустить проект. Для этого в панели инструментов жмем на «https».
Далее откроется браузер с запущенным приложением.
Шаг 3: Деплой приложения
Для деплоя приложения переходим в панели Timeweb Cloud в раздел Apps и создаем новое приложение. Далее выбираем тип приложения «Backend» и находим «ASP.NET».
Затем указываем репозиторий, откуда будет склонирован наш проект при деплое. Для этого предварительно нужно закоммитить наш тестовый проект, например, на GitHub.
Выбираем GitHub, авторизуемся, выбираем наш проект и жмем «Install & Authorize».
Тут мы можем указать ветку из которой будет собираться приложение и настроить автодеплой по коммиту.
На следующем шаге выбираем минимальную конфигурацию — ее нам хватит, чтобы запустить и протестировать наше приложение.
И, наконец, на заключительном этапе настраиваем наше приложение. Здесь нам понадобится к стандартным командам добавить аргументы запуска приложения, чтобы оно запускалась на 5000 порту и было доступно в Интернет, а также путь к проекту:
dotnet run --project BlazorApp --urls http://0.0.0.0:5000
Жмем кнопку «Запустить деплой», и через пару минут наше приложение будет в облаке и доступно всему миру.
Шаг 4: Демонстрация
После деплоя приложение будет доступно на техническом домене, найти его можно на дашборде.
Открываем этот URL в браузере и попадаем на главную страницу приложения, которая работает в режиме «Render mode: X64».
Переходим на страницу Counter и видим, что изначально режим этой страницы «Render mode: X64», но через пару секунд он меняется на «Render mode: Wasm».
Как мы писали выше, это происходит потому, что страница инициализируется на сервере, а после того, как в фоне скачается WebAssembly-сборка клиентской версии приложения, оно переключается в режим client side. Если мы повторно откроем страницу Counter, то практически мгновенно режим рендеринга изменится на wasm, потому что сборка уже есть в кэше браузера и заново качать ее нет необходимости.
Заключение
Blazor является частью экосистемы дотнета и отлично подойдет как разработчикам знакомым с языком программирования C#, так и начинающим разработчикам. Как мы могли убедиться выше, для создания и деплоя простого веб приложения достаточно нескольких несложных шагов, а Visual Studio и Timeweb Cloud Apps делают эти шаги еще проще и приятней.
