Введение в Blazor

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

Для разработчиков Blazor предоставляет следующие преимущества:

1. Написание кода веб-приложений с помощью C# вместо JavaScript (нет необходимости вникать в JS, если вы и до этого момента не имели особого дела с JavaScript)
2. Использование всех имеющихся на данный момент возможностей экосистемы .NET
3. Клиентская и серверная части приложения могут использовать общую логику
4. Использование Visual Studio (или Visual Studio Code) в качестве инструмента для разработки.

На сегодняшний день Blazor подразделяется на две подсистемы разработки:

• Blazor Server — позволяет создавать серверные приложения и поддерживается ASP.NET Core.
• Blazor WebAssembly — позволяет создавать одностраничные интерактивные приложения клиентской стороны (т.н. SPA), которые запускаются в браузере пользователя и работают с помощью технологии WebAssembly.

Blazor Server

Приложение Blazor Server выполняется на сервере в ASP.NET Core. При этом, обновление пользовательского интерфейса, обработка событий и вызовы JavaScript обрабатываются через соединение SignalR. Такая схема может допускать временные прерывания сети и попытки клиента повторно подключиться к серверу при потере соединения.

На стороне клиента Blazor (а, точнее, blazor.server.js) устанавливает соединение SignalR с сервером. Сценарий подается в приложение на стороне клиента из встроенного ресурса в ASP.NET Core. Клиентское приложение отвечает за сохранение и восстановление соединения по мере необходимости.

В Blazor Server можно выделить несколько преимуществ:

• Размер загрузки данных значительно меньше, чем у приложения Blazor WebAssembly, и приложение загружается намного быстрее.
• Приложение использует возможности сервера, включая использование API .NET Core.
• База кода приложения на .NET/C#, включая код компонентов приложения, не предоставляется клиентам.

При этом, Blazor Server имеет следующие ограничения:

• Более высокая задержка. Каждое взаимодействие с пользователем включает взаимодействие клиента и сервера по сети (SignalR).
• Если клиентское приложение не может создать по какой-либо причине соединение, то оно, соответственно, перестает работать.
• Для масштабирования приложений с большим количеством пользователей требуются ресурсы сервера для обработки нескольких клиентских подключений и состояния клиентов.

Blazor WebAssembly

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

Скрипт blazor.webassembly.js предоставляется фреймворком и выполняет:

• загрузку среда выполнения .NET, приложения и зависимостей приложения.
• инициализацию среды выполнения для запуска приложения.

Преимущества Blazor WebAssembly:

• После загрузки приложения с сервера нет зависимости от состояния самого сервера, поэтому приложение остается функциональным, если клиент переходит в автономный режим.
• Полное использование ресурсов и возможностей клиента.

Ограничения Blazor WebAssembly:

• Приложение ограничено возможностями браузера.
• Требуется совместимое клиентское оборудование и программное обеспечение (например, поддержка браузером технологии WebAssembly).
• Размер загрузки больше, и загрузка приложений занимает больше времени, чем у Blazor Server.

Blazor — это фреймворк, позволяющий разрабатывать веб-приложения, которые могут работать как на стороне сервера, так и на стороне клиента. Ключевой особенностью Blazor является то, что вся логика приложения может разрабатываться на языке C# без использования JavaScript.

В следующей части мы настроим Visual Studio Code для работы с Blazor и создадим свое первое приложения Blazor Server.