Blazor Hybrid: Създаване на хибридни приложения за десктоп и мобилни устройства с .NET MAUI изцяло в C#

Ivo Marinov

|

September 30, 2024

Microsoft представи дългоочакваната рамка Blazor в ASP.NET Core 3.0. В .NET 5.0 Blazor получи значителни актуализации на своя компонентен модел, плюс подобрения на скоростта и възможности за предварително изобразяване. Първоначалният фокус на Blazor беше да позволи на разработчиците да се насочат към браузъра, използвайки .NET стека с малко или никакъв JavaScript, всичко това без нито един плъгин за браузър.

Ключът към успеха на Blazor е способността му да даде възможност на .NET разработчиците чрез използване на техните съществуващи умения. Използвайки Blazor, .NET разработчиците могат да създадат приложение с пълен стек, използвайки само .NET технологии.

В .NET 6.0 рамката Blazor намира още един път за успех на разработчиците с .NET MAUI. MAUI предоставя набор от технологии, които позволяват на приложенията да работят в уеб, десктоп и мобилни устройства. Този нов модел е наречен Blazor Hybrid и за пореден път разработчиците имат възможност да използват съществуващите си умения, за да достигнат до още повече екосистеми. С Blazor Hybrid нативният работен плот на Android, iOS, macOS и Windows вече е наблизо.

Пренасяне на Blazor на десктопа

Използването на Blazor за клиентски уеб интерфейс с .NET е фантастично решение, но понякога се изисква пълен достъп до собствените възможности на устройството и е извън обсега на Blazor в мрежата. Blazor Hybrid съчетава уеб технологии (HTML, CSS и по желание JavaScript) с вроден в .NET MAUI Blazor. MAUI е междуплатформена рамка за създаване на собствени мобилни и настолни приложения с C# и XAML. MAUI използва единична споделена кодова база, за да работи на Android, iOS, macOS и Windows, както е илюстрирано на фигура 1.

Въпреки че приложенията Blazor могат да бъдат успешни с помощта на Electron и Electron.NET, има компромиси.

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

Хибридна Blazor Архитектура

MAUI е еволюцията на Xamarin.Forms, която първоначално беше насочена към iOS и Android, а с MAUI се разшири и до десктоп. Използвайки MAUI, вие ще пишете междуплатформени приложения в едно решение с опция за писане на специфичен за платформа код, ако е необходимо.

Тъй като MAUI е пълен стек .NET, споделянето на код, логика, тестване и инструменти в цялото решение е възможно. Моделът Blazor Hybrid е изграден върху MAUI и имплементиран чрез BlazorWebView, MAUI компонент, използван за изобразяване на вграден Blazor Web изглед с помощта на средата за изпълнение WebView2.

.NET MAUI използва един API за обединяване на Android, iOS, macOS и Windows API в еднократно писане и стартиране навсякъде за разработчици. Приложенията MAUI осигуряват дълбок достъп до всяка собствена платформа. .NET 6 представя серия от специфични за платформата рамки: .NET за Android, .NET за iOS, .NET за macOS и Windows UI (WinUI) библиотека. .NET 6 Base Class Library се споделя между всички платформи, като същевременно се абстрахират индивидуалните характеристики на всяка платформа от вашия код. .NET среда за изпълнение се използва за изпълнение на MAUI приложения, въпреки че основните реализации на средата за изпълнение може да са различни в зависимост от хоста.

Например в Android, iOS и macOS средата е възпрепятствана от Mono (.NET runtime), а в Windows WinRT предоставя на средата оптимизации за платформата Windows.В приложение .NET MAUI вие пишете код, който основно взаимодейства с API на .NET MAUI, показан на Фигура 3 (1). След това .NET MAUI директно използва API на собствената платформа, както е показано на Фигура 3 (3). Освен това кодът на приложението може директно да упражнява API на платформата, показани на фигура 3 (2), ако е необходимо.

MAUI е повече от абстрактен BCL за споделяне на обща бизнес логика на различни платформи – той също така обединява разработката на потребителски интерфейс (UI). .NET MAUI предоставя единна рамка за изграждане на потребителски интерфейси за мобилни и настолни приложения.

Тъй като всяка платформа има свои собствени модели и елементи, използвани за описание на потребителския интерфейс, използването на индивидуални специфични за платформата рамки би било трудно за поддържане. Вместо това MAUI предоставя обща мултиплатформена рамка за създаване на потребителски интерфейси, като същевременно има гъвкавостта да се насочва към конкретни платформи, ако е необходимо. В допълнение към естествените UI рамки, MAUI въвежда и BlazorWebView. Чрез компонент BlazorWebView приложенията MAUI могат да използват Blazor Web framework, създавайки приложение .NET MAUI Blazor.

BlazorWebView във взаимодействие с .NET MAUI Blazor

Моделът Blazor Hybrid използва компонент BlazorWebView, който позволява Blazor в рамките на MAUI приложение, създавайки .NET MAUI Blazor приложение. .NET MAUI Blazor позволява както стандартния, така и уеб интерфейса в едно приложение и те могат да съществуват едновременно в един изглед. С .NET MAUI Blazor приложенията могат да използват компонентния модел на Blazor (Razor Components), който използва HTML, CSS и синтаксиса на Razor. Частта Blazor на приложение може да използва повторно компоненти, оформления и стилове, които се използват в съществуващо обикновено уеб приложение.

BlazorWebView може да бъде съставен заедно с естествени елементи; освен това те се възползват от функциите на платформата и споделят състоянието си с други компоненти. В приложенията .NET MAUI Blazor целият код, както за собствените части на потребителския интерфейс, така и за частите на уеб потребителския интерфейс, се изпълнява като .NET код във времето за изпълнение на платформата с помощта на един процес.

Няма локален или отдалечен уеб сървър и WebAssembly (WASM) в модела Blazor Hybrid. Основните компоненти на потребителския интерфейс се изпълняват като стандартни компоненти на потребителския интерфейс на устройството (бутон, етикет и т.н.), а компонентите на уеб интерфейса се хостват в уеб изглед. Компонентите могат да споделят състояние, използвайки стандартни .NET модели, като манипулатори на събития, инжектиране на зависимости или нещо друго, което вече използвате в приложенията си днес.

Суперсилите на Blazor Hybrid

Когато Blazor беше представен за уеб, една от основните цели беше да се даде възможност на разработчиците да създават потребителски интерфейси на уеб приложения, използвайки .NET. Blazor постигна успех в това отношение. Blazor позволява на съществуващия .NET код да работи с помощта на .NET runtime чрез WebAssembly.

С Blazor Hybrid основната цел леко се измести чрез разширяване на възможностите на .NET разработчиците отвъд мрежата в десктоп и мобилно пространство, като същевременно се използват повторно HTML и CSS умения в допълнение към .NET.

Моделът Blazor Hybrid с .NET MAUI Blazor предлага някои уникални способности, които не са налични при разработка, ориентирана към уеб.Blazor Hybrid предлага разширяване на възможностите на .NET разработчиците отвъд мрежата в настолни и мобилни разработки.

Минимизиране на компромисите чрез използване на Native .NET

Blazor WebAssembly и Blazor Server идват с компромиси. Вие получавате възможностите на .NET вместо JavaScript на цената на абстракцията. Когато използвате WebAssembly, .NET runtime работи в интерпретиран режим и не е толкова производителен, колкото .NET, работещ натурално.

Въпреки че напредъкът в тази технология идва в .NET 6 с Ahead of Time Compilation (AOT), това остава компромис при избора на WebAssembly.

По същия начин сървърът Blazor също има компромиси. Въпреки че Blazor Server придобива възможността да изпълнява .NET естествено на сървъра, той изисква постоянна връзка с клиента и производителността е показателна за латентността на клиента.

Както се вижда в таблица 2, приложението .NET MAUI Blazor има уникална позиция в екосистемата Blazor, където може да елиминира тези компромиси, като изпълнява .NET среда за изпълнение, предоставена от основната платформа. За разлика от Blazor WebAssembly, .NET MAUI Blazor не използва интерпретиран режим и работи като приложение, родно за устройството.

Тъй като .NET MAUI Blazor се обработва локално, компромисите на Blazor Server също се заобикалят. Въпреки че има нюанси в изпълнението на всяка платформа на .NET runtime, изпълнението на .NET MAUI Blazor е по-добро от това на WebAssembly.

В допълнение към производителността, .NET MAUI Blazor има и най-голям потенциал за споделяне на една кодова база, като същевременно се насочва към разработка на различни платформи. Това включва възможността за публикуване на приложения във всички основни магазини за приложения с добавената възможност за получаване на икона на началния екран на мобилно устройство или икона на работния плот.

Използване на API

.NET MAUI Blazor приложенията не са ограничени само до уеб среда, която е Blazor WebAssembly.

Приложенията .NET MAUI Blazor използват .NET 6 Base Class Library (BCL), която е внедрена във всички платформи. .NET MAUI обединява междуплатформените API в един API, който позволява работа с един запис и изпълнение навсякъде, като в допълнение осигурява дълбок достъп до всеки аспект на всяка платформа..NET MAUI също така предоставя MAUI Essentials, междуплатформен API за собствени функции на устройството.

  • Примери за функционалност, предоставена от .NET MAUI Essentials, включват:
  • Достъп до сензори, като акселерометър, компас и жироскоп на устройства
  • Възможност за проверка на състоянието на мрежовата свързаност на устройството и откриване на промени
  • Предоставя се информация за устройството, на което работи приложението
  • Копиране и поставяне на текст в системния клипборд между приложенията Избиране на един или няколко файла от устройството
  • Сигурно съхраняване на данни като двойки ключ/стойност
  • Използване на вградени машини за синтез на реч за четене на текст от устройството
  • Иницииране на потоци за удостоверяване, базирани на браузър, които следят за обратно извикване към URL адрес, регистриран в конкретно приложение.

Хибридна екосистема

.NET 6 допълнително ще подобри екосистемата на разработчиците, която огражда MAUI и Blazor. От самото начало, когато Blazor беше само експеримент, библиотеките, поддържащи модела на приложението, започнаха да се множат. Същото вълнение може да се види и при MAUI.

Telerik, марка, синоним на .NET разработчици от близо 20 години, вече обяви Telerik UI за MAUI.Telerik има специално MAUI решение и специално предложение за Blazor UI с 85+ компонента, възприемайки бъдеще, в което разработчиците имат избор да използват собствени за платформата потребителски интерфейси с MAUI и XAML, Blazor с HTML или и двете библиотеки с UI компоненти, работещи безпроблемно заедно.

Ключовият извод тук е, че разработчиците имат избор как да внедрят потребителски интерфейс, който е безпрецедентен в разработката на .NET.Екосистемата Blazor продължава да расте и да се надгражда, тя ще бъде допълнително подобрена с пакети, активирани от MAUI чрез интегриране на собствена платформа и изпълнение по време на изпълнение.

Библиотеки, които може да са били затруднени от несъвместимости преди MAUI, намират нова ниша с Blazor Hybrid. Например ML.NET, рамка с отворен код, междуплатформено машинно обучение (ML) за .NET разработчици, видя ограничения около WebAssembly. С Blazor Hybrid проблемът със съвместимостта става по-малко уместен, тъй като ML.NET и MAUI могат да покрият едни и същи среди за изпълнение.

Очакванията са високи, тъй като възможностите за разработчици се увеличават поради разширяващия се обхват на MAUI и Blazor Hybrid, докато се появяват нови библиотеки и рамки, които предоставят нови и уникални решения.

Какво да очакваме

Моделът Blazor Hybrid и .NET MAUI Blazor бележи огромен крайъгълен камък за .NET 6 и работата не свършва дотук. .NET 7 се очаква през ноември 2022 г. и с него се очаква още повече Blazor.

Друг експеримент на Blazor, Blazor Mobile Bindings, вероятно ще бъде доставен в изданието .NET 7. Blazor Mobile Bindings е разширение на еволюцията на Xamarin > MAUI, което използва синтаксиса на Razor, за да дефинира UI компоненти и поведение. Чрез активиране на синтаксиса на Razor като заместител на XAML, превключването на контекста става почти тривиално. В .NET 7 с Blazor Mobile Bindings, приложенията .NET MAUI Blazor ще имат почти идентични модели на кодиране, независимо дали е собствен изглед (XML и Razor) или уеб базиран изглед (HTML и Razor).

С модела Blazor Hybrid, .NET и свързаните с него инструменти съкращават кривата на обучение и правят разработката между платформи достъпна. Когато използвате модел Blazor Hybrid, компромисите с WebAssembly са намалени. Xamarin еволюира до MAUI и носи естествени API за Android, iOS, macOS и Windows, докато BlazorWebViews активира уеб архитектура.

Докато Blazor расте, общността и екосистемата ще продължат да растат с решения за общи проблеми. Пътната карта на Blazor показва ангажираност и обещание, че Blazor е тук, за да остане, като предоставя иновативни технологии, които да ви помогнат да създавате модерни приложения.

*Използвани са материали от списание Code Magazine