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 на работния плот не е нова или уникална идея. .NET MAUI Blazor е насочен към разработката на различни платформи, което го отличава от другите решения. За да оцените правилно .NET MAUI Blazor, първо трябва да разберете какво предлагат алтернативите и какви са компромисите за всяка от тях.
Има два широко приети метода за работа с Blazor на работния плот: Използване на Blazor като прогресивни уеб приложения (PWA) или използване като Electron структура.

 

Progressive Web Applications

Прогресивните уеб приложения (PWA) са вид уеб приложение, което може да се инсталира на операционна система без необходимост от допълнителни системи за пакетиране и разпространение. Публикуването в магазин за приложения, като например Microsoft Store, Google Play или Apple App Store, не е задължително и може да изисква допълнително групиране. PWA са изградени с уеб стандартни технологии, включително HTML, CSS, JavaScript и WebAssembly, които работят на съвместим със стандартите браузър.
Функциите на PWA се поддържат в различна степен както на настолни компютри, така и на мобилни устройства, като Apple изостава много. След като PWA бъде инсталиран, адресната лента и бутоните на браузъра (Chrome) се премахват. Точно както в родното приложение, PWA има икона за стартиране и взаимодейства естествено с лентата на задачите на Windows.
PWA придобива важна функция, която допълнително подобрява потребителското изживяване. Сервизните работници са част от спецификацията на PWA, която е вид уеб работник.
Работниците за услуги са JavaScript код, който се изпълнява отделно от основната нишка на браузъра, който може да осигури офлайн режим (прихващане на мрежови заявки, кеширане или извличане на ресурси от кеша) и да доставя насочени съобщения. Въпреки че PWA нямат достъп до API на ниво операционна система, те се чувстват много по-родни от традиционно уеб приложение, като имитират тяхното поведение.
Приложенията на Blazor WebAssembly могат лесно да се възползват от функциите на PWA, като просто отговарят на критериите за инсталиране на PWA. Следователно, PWA опция вече е налична за Blazor при стартиране на нов проект от шаблон.
Въпреки че приложенията Blazor PWA могат лесно да бъдат създадени, има компромиси. Тъй като няма поддръжка на .NET API за обслужващи процеси, всички функционалности трябва да се извършват в JavaScript. И тъй като една от привлекателните черти на Blazor е C#, това възпира някои разработчици да се впуснат твърде дълбоко в сервизните работници.

 

Electron Framework

Electron е библиотека с отворен код за изграждане на собствени настолни приложения с уеб технологии като JavaScript, HTML и CSS. Electron използва вградена обвивка на Chromium, която се захранва от Node.js. Electron ви позволява да поддържате една JavaScript кодова база и да създавате междуплатформени приложения, които работят на Windows, macOS и Linux.
Много популярни настолни приложения са по същество уеб приложения на Electron. Visual Studio Code, Microsoft Teams, Slack и Figma са всички приложения на Electron, които разработчиците използват ежедневно.
Electron е повече от просто уеб обвивка, тъй като рамката също така предоставя персонализиран набор от API на JavaScript за взаимодействие с хост операционната система. Тези модули контролират собствената функционалност на работния плот, като менюта, диалогови прозорци и икони в областта.
Въпреки че приложният програмен интерфейс (API) извежда някои собствени функции на работния плот, това не е необработен достъп до пълната платформа; вместо това те са избран набор от общи функции между платформите.
API включват достъп до файловата система, стартиране на процеси извън средата на браузъра, павилионен режим, запис на екрана, поддръжка на системна област за минимизирани приложения и др.
Тъй като Electron работи чрез използване на уеб стандартни технологии чрез Chrome, той поддържа WebAssembly. Това означава, че приложението Blazor WebAssembly може да бъде вградено в Electron shell и трансформирано в настолно приложение.
Такива приложения използват .NET среда за изпълнение в контекста на Blazor WebAssembly, работещ в интерпретиран режим, който е по-малко производителен от родния си настолен еквивалент. Използването на API на Electron с помощта на .NET се извършва чрез Electron.NET, обвивка около базирано на JavaScript приложение Electron с вградено приложение ASP.NET Core.
Чрез Electron.NET IPC мост, API на Electron се извикват от приложението Blazor.
Блокова диаграма на архитектурата е показана на фигура 2.

Въпреки че приложенията 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

Interested in a job? Take a look at our current vacancies!