Приверженность Microsoft созданию кроссплатформенного мира, возможно, является одним из самых больших изменений в ее платформе разработки за последние несколько лет. Покупка Xamarin положила начало кардинальным изменениям, которые привели нас к сегодняшней среде разработки на базе Visual Studio, которая включает в себя GitHub с одной стороны и кросс-платформенную .NET 6 с другой, с приложениями, которые масштабируются в облачных системах Kubernetes и на других платформах. мобильные устройства.
Недавно я рассмотрел разработку преемника кроссплатформенных инструментов пользовательского интерфейса Forms Xamarin: .NET Multiplatform App UI или MAUI. С этим связана еще одна новая технология пользовательского интерфейса Microsoft, предназначенная для переноса масштабных веб-приложений на ваши устройства и на рабочий стол. Blazor Hybrid, основанный на гибкой платформе веб-интерфейса Blazor, сочетает в себе две технологии, предоставляя вам возможность создавать пользовательские интерфейсы, которые охватывают не только настольные и мобильные устройства, но и добавляет поддержку Интернета с помощью встроенных элементов управления на всех платформах.
Современный Интернет и современное развитие идут рука об руку
В таком подходе к пользовательскому интерфейсу есть что понравиться. Во-первых, он основан на том, что я считаю ключевым уроком последнего десятилетия в Интернете: сначала нам нужно разработать наши API. Это делает пользовательский интерфейс просто еще одним API-клиентом, использующим REST и JSON для взаимодействия с микросервисами. Тогда у нас может быть много разных пользовательских интерфейсов, работающих с одной и той же серверной частью, использующих одни и те же вызовы и оказывающих одинаковое влияние на наш сервис. Это упрощает проектирование и позволяет предсказуемо масштабировать архитектуру приложений. В то же время фиксированный набор API означает, что владельцы сервисов могут обновлять и обновлять свой код, не затрагивая клиентов.
Этот подход привел к разработке таких концепций, как Jamstack, использующих JavaScript, API и разметку для создания динамических статических веб-сайтов, упрощающих проектирование и публикацию веб-приложений. Blazor Hybrid берет эти концепции и переносит их в ваш код, пропуская браузер и встраивая поверхность рендеринга вместе с остальной частью вашего приложения. При необходимости вы можете работать в автономном режиме, и эта модель становится еще более интересной при работе с изолированными средами, такими как образовательная платформа Windows 11 SE.
Blazor Hybrid в МАУИ
Поддержка MAUI для Blazor Hybrid — интересная особенность новой платформы; он расширяет возможности традиционных настольных и мобильных клиентов, позволяя обмениваться элементами пользовательского опыта с веб-приложениями. Что касается веб-приложений, у приложений ASP.NET Core есть возможность совместно использовать код с другими проектами, что снижает рабочую нагрузку разработчиков и позволяет вам разработать один раз, а затем реализовать его во всех целевых средах. Хотя проекты ASP.NET Core вряд ли будут частью того же проекта, что и код MAUI, они все же могут быть частью одного и того же решения, и при необходимости код можно копировать между проектами.
Blazor Hybrid в настоящее время находится в предварительной версии, но его стоит изучить, если вы хотите расширить возможности существующих веб-приложений ASP.NET Core. Очевидным первым шагом является создание приложения MAUI для размещения вашего кода, хотя вы не ограничены одним подходом к пользовательскому интерфейсу .NET, особенно если вы сосредоточены на доставке настольных версий существующих корпоративных веб-приложений клиентам Windows.
Создание гибридного приложения MAUI Blazor похоже на создание любого другого приложения MAUI. Элемент управления WebView2 на основе Chromium размещает ваш код в Windows. Платформы, отличные от Windows, используют собственные хосты веб-приложений для контента Blazor. На практике с этим не должно возникнуть никаких проблем, поскольку Android использует браузер Chromium, и хотя Safari, размещенный на iOS, может не иметь всех функций Chrome, он должен поддерживать компоненты Blazor.
Если вы правильно настроили MAUI в Visual Studio 2022 Preview, вы должны найти возможность создать приложение .NET MAUI Blazor. При создании этого решения создается новый проект C# с необходимыми зависимостями платформы для всех целевых сред. В рамках проекта создается базовый пользовательский интерфейс Blazor, готовый к работе и, конечно же, готовый к изменениям.
Наличие готовых шаблонов очень помогает, поскольку показывает, как разместить BlazorWebView в XAML вашего приложения и как использовать содержимое Razor в размещенном HTML. Поскольку большая часть логики пользовательского интерфейса вашего приложения будет находиться в коде ASP.NET Core Razor, размещенном в WebView вместе с любыми компонентами Blazor, перед тем, как приступить к написанию веб-интерфейса, вам не придется ничего делать.
Ценность здесь заключается не столько в MAUI, сколько в запуске кода Blazor на стороне клиента. MAUI предоставляет удобный кросс-платформенный хост для вашего кода Razor, и хотя ваши навыки C# будут хорошо работать по обе стороны разделения WebView, наиболее важным является создание адаптивной страницы Blazor, которая может масштабироваться на телефонах и ПК.
Blazor Hybrid в Windows .NET
Вы не ограничены MAUI для Blazor Hybrid. Он также предназначен для поддержки рабочей нагрузки для стандартных инструментов пользовательского интерфейса Windows .NET, чтобы вы могли использовать его в знакомых платформах, таких как Windows Presentation Foundation или Windows Forms. Поскольку это предварительная версия, вам потребуется запустить предварительную версию Visual Studio 2022 с установленными инструментами разработки настольных компьютеров .NET.
После настройки инструментов создайте стандартное приложение WPF, используя .NET 6 или более позднюю версию. (Вы можете использовать текущую предварительную версию .NET 7, если хотите быть в авангарде разработки .NET.) Затем установите диспетчер пакетов WebView WPF NuGet для размещения вашего кода Blazor. После установки вы можете приступить к написанию кода, используя Razor SDK для создания элементов Blazor пользовательского интерфейса вашего приложения.
Теперь вы можете использовать компоненты Blazor в своем приложении, используя те же методы, которые мы используем для добавления HTML и JavaScript в пользовательские интерфейсы WebView. После того как у вас есть структура веб-приложения, вы можете начать использовать синтаксис Blazor Razor для добавления компонентов и кода в HTML-код. Если вы знакомы со старым синтаксисом ASP до .NET, то Razor будет вам очень знаком: он использует встроенный C# в ваш HTML вместе с директивами Razor для добавления функциональности к кнопкам и загрузки компонентов отображения, которые управляются из вашего кода C#.
Не забудьте отредактировать XAML вашего представления, чтобы настроить BlazorWebView, который использует локальный URL-адрес вашего контента в качестве стартовой страницы. После этого вы должны быть готовы скомпилировать и запустить любой код Blazor, используя его для подключения к серверным службам или работы с локальным контентом, встраивая веб-приложения в свой код .NET.
Интересно наблюдать, как Microsoft экспериментирует со своими платформами пользовательского интерфейса таким образом. Наконец-то выпустив единую кросс-платформенную платформу .NET, реализовать этот подход — объединение MAUI с ASP.NET Core — стало намного проще. Хотя это еще только начало, здесь определенно есть многообещающая модель, которая могла бы расширить пользовательский интерфейс даже дальше, чем четыре самые популярные настольные и мобильные операционные системы.
