Обзор .NET Blazor и предстоящие изменения в .NET 8

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

Представляем.NET Blazor

Одна из основных проблем, с которыми часто сталкиваются разработчики, заключается в том, что им необходимо знать два разных языка — один для разработки на стороне сервера, а другой — для разработки на стороне клиента..NET Blazor пытается устранить разрыв между разработкой на стороне клиента и на стороне сервера, позволяя разработчикам создавать интерактивные веб-приложения с использованием C# и.NET. Таким образом, разработчики могут положиться на единую среду разработки и повторно использовать уже имеющиеся у них опыт и знания.

Эта проблема была основной причиной создания платформы Microsoft.NET Blazor. На самом деле он начался как личный побочный проект Стивена Сандерсона, главного руководителя разработки программного обеспечения в Microsoft, в 2017 году, который в середине 2019 года превратился в серверный Blazor, а в 2020 году — на клиентскую сторону (WebAssembly).

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

Новейшая история разработки веб-приложений

Мир разработки веб-приложений можно описать как серверную и клиентскую архитектуру.

Серверная часть, как следует из названия, требует базового веб-сервера, такого как Windows Internet Information Server (IIS), Linux Apache или NGINX, или его контейнерной версии платформы.

Разработка на стороне сервера основана на создании HTML на сервере и отправке его клиенту. Такие технологии, как веб-формы ASP.NET, предоставляют широкие возможности управления и абстракции, упрощая создание сложных веб-приложений. Однако тесная связь между сервером и клиентом часто приводит к проблемам с поддержанием масштабируемости и оперативности. Если клиент не может связаться с сервером, веб-страницы нет (или страницы с сообщением об ошибке HTTP 404). Для разработки веб-приложений используются различные языки, такие как C#.NET, Java и PHP.

Клиентская часть относится к сценарию веб-приложения, для которого не требуется сервер на внутренней стороне, а полностью выполняется в браузере.

Эволюция разработки веб-приложений началась со статических HTML-страниц. По мере роста спроса на динамический контент и интерактивность появились такие технологии, как JavaScript, позволяющие разработчикам создавать больше интерактивных веб-приложений. В начале 2000-х годов наблюдался рост популярности AJAX (асинхронный JavaScript и XML), который позволил осуществлять асинхронный обмен данными между клиентом и сервером, что привело к более плавному взаимодействию с пользователем. Такие фреймворки, как jQuery, еще больше упростили создание сценариев на стороне клиента. Два десятилетия спустя веб-сайты, которые мы посещаем ежедневно, по-прежнему в основном основаны на HTML и JavaScript.

Модели хостинга Blazor

.NET Blazor предлагает две основные модели хостинга: Blazor Server и Blazor WebAssembly.

Blazor Server позволяет разработчикам создавать многофункциональные и динамичные веб-приложения, в которых логика пользовательского интерфейса на 100% выполняется на сервере, а обновления пользовательского интерфейса отправляются клиенту через постоянное соединение SignalR. Эта модель обеспечивает интерактивность в реальном времени, сохраняя при этом привычную модель программирования для разработчиков.NET. Он хорошо подходит для приложений, требующих динамических обновлений, таких как получение информации из базы данных в сценариях розничной торговли или интернет-магазина, профилей клиентов, отчетов о финансовых запасах и т. п., а также, как правило, имеющих меньшую задержку.

На изображении ниже представлена ​​схема архитектуры сервера Blazor.

Давайте посмотрим на некоторые плюсы и минусы серверного Blazor.

Плюсы:

• Быстрое время загрузки при условии правильного размера веб-сервера.
• Наиболее близок к традиционной разработке ASP.NET Core.
• Поддержка старых браузеров, поскольку WebAssembly не требуется (хотя это можно рассматривать как отрицательный момент с точки зрения безопасности и поддержки).

Минусы:

• Клиент/браузер потребляет больше памяти для запуска веб-приложения и на 100 % зависит от соединения SignalR.
• Каждый клиентский сеанс потребляет ресурсы ЦП и памяти на сервере, что может создать проблемы для приложений с большой или пиковой нагрузкой.
• Связь между клиентом и сервером предполагает «сильное» соединение, чтобы избежать задержек и ошибок.

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

На изображении ниже представлена ​​схема архитектуры Blazor WebAssembly.

Давайте посмотрим на некоторые плюсы и минусы WebAssembly.

Плюсы:

• Веб-сайт можно развернуть в виде статических файлов, поскольку все он работает в браузере.
• Приложения Wasm могут работать в автономном режиме, поскольку нет необходимости в подключении к серверу (постоянно).
• Поддержка прогрессивных веб-приложений (PWA), что означает, что они могут действовать как локально установленное приложение на клиентском компьютере.

Минусы:

• Поскольку движку JavaScript в браузере необходимо загрузить полную версию приложения Blazor и соответствующие библиотеки DLL.NET, первую загрузку приложения можно считать относительно медленной.
• Для WebAssembly требуется современный браузер. Если старые браузеры все еще используются и необходимы, вы можете использовать только Blazor Server.
• Если установлено как PWA, возникают проблемы с обновлением версий и управлением ими.
• Код и библиотеки DLL можно расшифровать. Любые секреты, такие как строки подключения, пароли и т.п., не должны использоваться в коде, поскольку они видны в инструментах разработки браузера.

Примечание. У Blazor есть две другие модели хостинга — Hybrid, предназначенная для настольных компьютеров и мобильных платформ, и Mobile Blazor Bindings, экспериментальная и предназначенная для многоплатформенных сценариев, таких как iOS и Android, помимо Windows и macOS.

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

В приведенном ниже коде показан пример компонента Blazor с полем счетчика и кнопкой в @page(HTML)​​разделе, где логика находится в @codeразделе:

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

Будущее Blazor с.NET 8

В ноябре 2023 года Microsoft выпустит инфраструктуру.NET 8, которая в настоящее время находится в предварительной версии v7 (см. объявления команды.Net здесь ).

Специально для Blazor в текущей дорожной карте предусмотрены следующие изменения.

Серверный рендеринг

Рендеринг на стороне сервера следует текущей логике страниц Razor или приложений MVC, аналогично ранее использовавшимся веб-формам ASP.NET. Razor Pages — это страничная модель. Проблемы пользовательского интерфейса и бизнес-логики разделены, но внутри страницы.

Razor Pages — это рекомендуемый способ создания новых приложений на основе страниц или форм для разработчиков, впервые использующих ASP.NET Core. Он обеспечивает более простую отправную точку, чем ASP.NET Core MVC. ASP.NET MVC отображает пользовательский интерфейс на сервере и использует архитектурный шаблон модель-представление-контроллер (MVC).

Шаблон MVC разделяет приложение на три основные группы компонентов: модели, представления и контроллеры. Запросы пользователей перенаправляются на контроллер. Контроллер отвечает за работу с моделью для выполнения действий пользователя или получения результатов запросов. Контроллер выбирает представление для отображения пользователю и предоставляет ему любые необходимые данные модели. Поддержка Razor Pages построена на ASP.NET Core MVC.

Благодаря рендерингу на стороне сервера (SSR) сервер генерирует HTML-код в ответ на запрос браузера/клиента. Большим преимуществом SSR является то, что производительность значительно возрастет, поскольку при загрузке приложения не нужно загружать объект WebAssembly. По сравнению с использованием страниц Razor или MVC, которое технически делает то же самое, что мы объяснили в предыдущем предложении, разработчики могут извлечь выгоду из компонентной архитектуры Blazor, которой на самом деле не существует в Razor или MVC. Хотя поначалу компонентный подход может показаться другим, но как только мы его освоим, мы увидим, что большая часть дублирования кода из прошлого теперь может быть перенесена в повторно используемый компонент Blazor. Подумайте о кнопках, баннерах, формах, таблицах и т. д. — где объект остается, но содержимое данных меняется.

Четыре модели в одной

Четыре модели в одной кажутся идеальным решением для разработчиков. Текущие модели (серверная, Wasm, гибридная и мобильная привязки) объединены с.NET 8 в единый подход независимо от сценария. Благодаря Blazor можно разрабатывать многофункциональные серверные приложения и клиентские приложения с помощью Wasm, а также кроссплатформенные приложения для iOS, Android и macOS — и все это на основе одной и той же платформы Blazor.

Потоковое рендеринг

Потоковая отрисовка — еще одна многообещающая возможность.NET 8 Blazor, которая является промежуточным звеном между рендерингом на стороне сервера и на стороне клиента. Помните, что на стороне сервера вся HTML-страница отображается на сервере. Потоковая обработка позволяет отображать статический HTML-код, а также заполнители для контента. После завершения асинхронного вызова на стороне сервера (то есть он может передавать данные в потоковом режиме) фактическая HTML-страница обновляется путем заполнения объектов-заполнителей фактическими данными.

Серверная часть и веб-сборка

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

Автоматический режим

Автоматический режим — это тот режим, на который я лично возлагаю больше всего ожиданий, и он представляет собой «окончательный» сценарий Blazor, позволяющий сочетать серверную часть и WebAssembly в одном.

Этот сценарий предлагает начальную страницу с сервера, а это означает, что она будет загружаться быстро. Впоследствии необходимые объекты загружаются в клиент, поэтому при следующей загрузке страницы она будет предложена из Wasm. (Эта версия еще не присутствует в предварительной версии.NET 8 7, поэтому на момент написания этой статьи нет более подробной информации, которой можно было бы поделиться.) Если вы считаете, что это очень похоже на описанный подход «четыре модели в одной» Ранее знайте, что автоматический режим ориентирован на браузерные приложения, а не на полнофункциональные сценарии для настольных компьютеров или мобильных платформ.

Создание нашего первого веб-приложения Blazor.NET 8

Теперь мы гораздо лучше понимаем, что такое Blazor и что готовится к следующему выпуску.NET 8. Давайте рассмотрим практический сценарий, в котором мы создадим наше первое приложение.NET 8 Blazor.

Предварительные условия

Чтобы сделать это максимально независимым от платформы, предполагается, что у вас есть машина со следующими компонентами:

1. Загрузите.NET 8 Preview 7 отсюда и установите его на свою рабочую станцию ​​разработки .
2. Загрузите Visual Studio Code отсюда и установите его на свою рабочую станцию ​​разработки .
3. Создайте подпапку с именем Blazor8sample. В этой папке будет размещено приложение.NET.

Создание приложения

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

1. Откройте окно терминала и перейдите к Blazor8sampleсозданной ранее папке.

2. Выполните следующую команду, чтобы проверить версию.NET:

dotnet --version

3. Выполните следующую команду, чтобы получить сведения о новом шаблоне Blazor:

dotnet new Blazor /?

4. Выполните следующую команду, чтобы создать новое приложение Blazor:

dotnet new Blazor -o Blazor8SampleApp

5. Перейдите во вложенную папку Blazor8SampleAppи запустите ее code., чтобы открыть папку в Visual Studio Code.

6. В Visual Studio Code перейдите к «Терминал» в верхнем меню и выберите «Новый терминал » (или используйте сочетания клавиш Ctrl+ Shift+ в Windows). `Откроется новое окно терминала в VS Code.

7. В окне терминала выполните следующую команду, чтобы запустить приложение Blazor:

dotnet run .\Blazor8SampleApp

8. Перейдите к URL-адресу прослушивания локального хоста (как http://localhost:5211в моем примере). Примечание. Порт на вашем компьютере может отличаться, поэтому проверьте URL-адрес, чтобы узнать точный номер порта.

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

9. Из VS Code перейдите к Program.csфайлу. Шаблон веб-приложения Blazor по умолчанию настроен для рендеринга компонентов Razor на стороне сервера. При Program.csвызове AddRazorComponents()добавляются связанные службы, а затем MapRazorComponents()обнаруживаются доступные компоненты и указывается корневой компонент для приложения.

10. Когда вы выберете пункт меню «Погода », на странице ненадолго отобразится «Загрузка», после чего данные о погоде будут отображены в таблице. Это пример функции потокового рендеринга, о которой говорилось ранее.

11. Из VS Code перейдите на /Pages/Weather.razorстраницу. Откройте представление кода.

Обратите внимание на строку 2:

@attribute [StreamRendering(true)]

Это позволяет использовать новую функцию потокового рендеринга Blazor.

12. Остановите работающее приложение, закрыв браузер, или нажмите Ctrl+ Cв окне терминала. Обновите предыдущий раздел кода следующим образом:

@attribute [StreamRendering(false)]

13. Сохраните изменения и снова запустите приложение, запустив его dotnet run.\ Blazor8SampleApp.csprojиз окна терминала.

14. Снова перейдите к работающему приложению, щелкнув http://localhost:5211URL-адрес, и выберите приложение «Погода». Обратите внимание, что на этот раз сообщение «Загрузка…» не отображается, но страница отрисовывается и отображает фактическую таблицу погоды через несколько секунд.

Заключение

Путь разработки веб-приложений превратился из статического HTML в динамичный и интерактивный опыт, которым мы наслаждаемся (и ожидаем!) сегодня. Выпустив.NET Blazor, Microsoft сделала значительный шаг вперед, предложив разработчикам мощную платформу, которая объединяет парадигмы разработки на стороне клиента и на стороне сервера.

Поскольку мы с нетерпением ожидаем выпуска.NET Blazor 8, мы можем рассчитывать на повышение производительности, улучшенные инструменты и такие функции, как серверная, а также потоковая отрисовка, которые будут продолжать улучшать ландшафт веб-разработки. Независимо от того, являетесь ли вы опытным разработчиком.NET или новичком в экосистеме,.NET Blazor открывает двери для создания веб-приложений нового поколения с использованием возможностей C# и.NET.