Что такое Blazor?

Blazor — это фреймворк, с помощью которого можно создавать приложения для браузера. Он написан на .NET и запускается с WebAssembly, поэтому разработчики могут работать как со стороной клиента, так и со стороной сервера. Его можно скачать по ссылке.

Blazor

На появление Blazor повлияли современные SPA-фреймворки, такие как React, Vue и Angular.

Blazor WebAssembly

Blazor WebAssembly используется в создании и запуске одностраничных приложений, а также включения в браузере при поддержке WebAssembly. .NET использует Razor Pages для компиляции файлов в приложение, а также C# для построения и запуска программы. 

Для настройки соединений среды .NET используется специальный скрипт — blazor.webassembly.js, который загружает среду .NET и настраивает ее.

Фреймворк Blazor может обращаться к объектам DOM и API в браузере, используя JavaScript.

Blazor может обращаться к объектам DOM и API в браузере

Главное преимущество WebAssembly — в оптимизации всех загружаемых соединений.Компоновщик IL убирает незадействованный код, а .NET-файлы и соединения кешируются в браузере.

Для работы Blazor WebAssembly достаточно использовать статический сервер с размещенными файлами приложений. Все необходимое загружается браузером, а после загрузки файлы работают в независимости от сервера.

Однако существуют и свои недостатки. В нашем случае это ограничения. Например, браузер обязан иметь поддержку технологии WebAssembly для ее использования. Хорошая новость в том, что она доступна в популярных браузерах: Opera, Mozilla, Chrome, Yandex, Microsoft Edge. 

Файлы, загруженные браузером, имеют большой размер, что влияет на увеличение нагрузки сети и на время загрузки в целом, так как приложения работают на стороне клиента. Поэтому возможности приложений ограничиваются браузером, в котором они были запущены.

Blazor Server

Все разрабатываемые и запускаемые приложения Blazor Server работают только на стороне сервера. Связь с SignalR позволяет обрабатывать события и обновлять пользовательский интерфейс, а также вызывать JS со стороны клиента к серверу. 

Взаимодействуя с приложениями, например, нажимая кнопки, пользователь создает событие интерфейса в браузере. Далее клиент отсылает на сервер информацию об обработанном событии. В это же время сервер обрабатывает полученные данные и отсылает в ответ клиенту инструкции (команды), как именно нужно обновить элементы интерфейса.

Скорее всего этот метод работы может показаться вам схожим с использованием ASP.NET WebForms.

Метод работы может вам напомнить ASP.NET

Приложение может воспользоваться всем спектром возможностей серверной обработки, не ограничиваясь браузером. К тому же, на стороне сервера находится большая часть логики приложения, потому загружаемые файлы имеют небольшой размер по сравнению с WebAssembly.

Также браузеры, которые не поддерживают технологию WebAssembly, могут работать с приложением, но для этого понадобится стабильное подключение сети.

Компоненты Blazor

Сегодня компоненты SPA-фреймворков используются в создании приложений. В основном, это UI-элементы, например: страница, набор вкладок, диалог, меню или форма ввода данных.

Давайте поговорим об их свойствах. Эти компоненты:

• представляют элементы пользовательского интерфейса; 
• определяют логику обработки ввода и обработки рендеринга элементов интерфейса.;
• могут быть вложены в другие компоненты;
Онлайн-курс “PR-менеджмент” від Laba.
Дізнайтесь як створювати дієві PR-стратегії в сучасних українських реаліях навіть з невеликим бюджетом та зробіть крок на зустріч до позиції PR-директора під менторством експертки з 20-річним досвідом. .
Про курс
• имеют возможность повторно использоваться и переносить библиотеки классов Razor.

Компоненты в Blazor — это .NET-класс, который можно писать напрямую через C# или как страницы разметки Razor-файла (.cshtml).

Синтаксис Razor используется для комбинирования разметки с кодом C#. При поддержке intellisense разработчики могут без проблем переключаться между разметкой и C#. Ниже предоставлен один из простых компонентов диалога в Razor-файле (.cshtml):

<div class="my-styles">
  <h2>@Title</h2>
  @RenderContent(Body)
  <button onclick=@OnOK>OK</button>
</div>

@functions {
    public string Title { get; set; }
    public Content Body { get; set; }
    public Action OnOK { get; set; }
}

Чем не является Blazor

Предыдущие попытки Microsoft разместить приложение в браузере не увенчались успехом с Silverlight, однако он не похож на Blazor. Silverlight не мог работать на iOS-устройствах, так как ему было необходимо подключение к модулю браузера.

В свою очередь, Blazor не требует никаких установок дополнений в виде плагинов для работы на клиенте в браузерах.

Blazor функционирует в двух направлениях: 

• выполняет функции на сервере, используя браузер как простой терминал;
• выполняет функции в браузере, используя технологии WebAssembly.

К тому же WebAssembly считается веб-стандартом. Это значит, что его технологии поддерживаются во всех современных браузерах. Приложения клиентов Blazor могут работать с такими операционными системами как Windows, Linux, MacOS, Android и iOS.

Подведем итог

Blazor покрывает все потребности в web-приложениях на сторонах сервера и клиента. Тем более, компания Microsoft не планирует на этом останавливаться и обещает развивать продукт.

Вероятно, что Blazor скоро можно будет использовать как для нативных мобильных, так и десктопных приложений.