С момента последнего выпуска .NET 5 на .NET Conf 2020 все ваши пользователи воочию увидели, как использовать преимущества новейших веб-технологий с помощью .NET. Самым интересным было объявление о новом выпуске Blazor WebAssembly. Blazor позволяет создавать интерактивный веб-интерфейс пользователя, но с использованием C# вместо классического JavaScript.

Что Blazor WebAssembly позволяет пользователям создавать изолированные приложения C#, которые можно запускать практически во всех различных типах веб-сред, даже в средах, в которых разрешены только статические сайты, такие как HTML, Javascript и CSS.
Благодаря Blazor WebAssembly весь ваш код C# компилируется в машинный код. который не запускается на сервере откуда-то, а скорее запускается в браузере.

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

Учитывая, что приложение работает в браузере, время загрузки и рендеринга пользовательского интерфейса отсутствует, что обеспечивает очень приятный опыт для конечного пользователя. Чтобы увидеть преимущества, было принято решение перенести известное приложение на .NET 5 и Blazor WeAssembly.

Расскажу немного 👇

На Ignite 2019 была представлена ​​RPSLS (Камень, Ножницы, Бумага, Ящерица, Спок), простая веб-игра, основанная на классической игре Rock, Бумага, ножницы, но с дополнительным увеличением сложности. Их целью было показать, что службы, созданные на любом языке, могут работать в Azure в больших масштабах.

После запуска тысячи людей протестировали игру в первую неделю. Код игры можно найти на GitHub (RPSLS).

Что такое игра?

  • Это просто решение с архитектурой микросервисов, созданное на базе Azure Kubernetes Service.

Как это работает?

  • Есть два способа играть, один — против друга, используя URL, который генерируется на месте. А во-вторых, вы просто играете против бота.
    В случае игры против друга ничего не происходит, но когда вы играете против бота, на самом деле вы играете против микросервиса на том языке, который вы выбрали на начало.

Например 👇

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

🔼 Обновите приложение, чтобы использовать последние версии

После недавнего выпуска .NET 5, объединенного с Blazor, обновление игры имело смысл. Это было несложно, но интересно было не только перейти на .NET 5, но и перенести игру на Blazor WebAssembly.

🔄 Процесс

Был создан новый проект с использованием шаблона Blazor WebAssembly.

Что это делает, так это создает 3 проекта👇

  • Внешний интерфейс
  • Бэкэнд
  • Общие службы

Просто переместите содержимое страницы Blazor Server в индекс статической папки и замените структуру BlazorServer на BlazorClient.
Все Файлы .razor из старого проекта были перенесены в новый.
После этого проект клиента был настроен так, чтобы он мог инициализировать Google Analytics с помощью API. ключ, полученный в Backend. Внедрите поставщика аутентификации, например AuthenticationState, для проверки входа пользователей перед вызовом сервера.

🟢Вывод:

В общем, казалось немного сложнее, а оказалось очень просто. При разработке слоев приложения на одном языке создавалось впечатление, что клиентское приложение создается не так, как при компиляции в собственный WebAssembly.

Создание приложения на стороне клиента с сохранением поддержки внедрения зависимостей, клиентов HTTP/GRPC и шаблона параметров, так же как и серверной части, делает миграция проще.

Одним из преимуществ приложения является то, что оно не требует сохранения, поэтому его можно перенести в Blazor WebAssembly без существенных изменений. От Dotnetsafe мы хотим поблагодарить команду .NET за их значительные улучшения. Делая .NET 5 и Blazor более доступными для всех переносимых приложений. 🤗