Поиск по сайту:

Что такое Microsoft Blazor Web Framework и стоит ли его использовать?

Blazor — это новая веб-инфраструктура от Microsoft, призванная конкурировать с ведущими в отрасли платформами, такими как React. За исключением того, что вместо использования JavaScript он работает в среде выполнения .NET и позволяет разработчикам создавать интерактивные веб-приложения с помощью C# и HTML.

Что такое ASP.NET?

Если вы пришли из мира фреймворков JavaScript, вас может смутить взаимосвязь Blazor с ASP.NET. Они оба являются «веб-фреймворками», но Blazor — лишь часть экосистемы ASP.NET.

Хотя на данный момент платформе ASP.NET уже почти 20 лет, это не фреймворк-динозавр — он постоянно совершенствуется вместе с C# и .NET в целом, поскольку Microsoft использует его внутри компании. Он полностью кроссплатформенный и производительный как никогда.

Вначале был только ASP.NET, который можно было использовать для создания всевозможных веб-приложений. Был ASP.NET MVC (Model-View-Controller), который создает веб-страницы, управляемые данными, и ASP.NET WebAPI, который специализируется на внутренних API. Недавно они были объединены в единый пакет с модернизированным ядром ASP.NET.

Пять лет назад был выпущен Razor Pages (отдельная от Blazor вещь со сбивающим с толку названием) для упрощения выразительного синтаксиса MVC, который требует большого количества шаблонов и, как таковой, плохо сочетается с ориентированным на компоненты дизайном. современных приложений. MVC требует, чтобы вы делали представление и модель для каждой страницы в отдельных файлах:

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

Все эти функции являются частью экосистемы «ASP.NET». Большая часть об этом - пакеты и поддержка. Подобно NPM для JavaScript, C# также имеет здоровую среду пакетов с диспетчером пакетов NuGet.

Так что же такое Блазор?

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

Blazor добавляет интерактивность. Традиционные страницы MVC/Razor, использующие ASP.NET, всегда были неуклюжими и изо всех сил пытались не отставать от веб-приложений реального времени, таких как React. Веб-приложения в реальном времени настолько быстры, что начинают захватывать и настольные компьютеры, а такие фреймворки, как Electron, запускают приложения в контейнере Chromium, а пользователи ничего не знают.

Итак, Blazor был создан, чтобы удовлетворить этот спрос. Он во многом похож на React, где действия изменяют состояние и реквизиты и запускают обновления приложения. Платформа будет обрабатывать обновление DOM для вас в зависимости от того, какие компоненты нуждаются в обновлении. Это позволяет приложениям реального времени обновлять или даже полностью перерисовывать страницу без фактического обновления браузера.

Преимущество Blazor по сравнению с устоявшейся структурой, такой как React, заключается в языке. Он позволяет создавать веб-приложения на C#, и уже одно это делает его привлекательным для многих разработчиков. Какое бы у вас ни было мнение о дебатах о динамической и статической типизации, у «настольных» языков, таких как C#, определенно есть преимущества, а в Интернете серьезно не хватает альтернатив JavaScript.

Если у вас есть серверная часть, требующая высокой производительности, C# также будет работать намного быстрее, чем JavaScript. Несмотря на то, что JS ни в коем случае не медленный и значительно улучшился за эти годы, он все равно будет менее производительным, чем C#, который на самом деле работает довольно близко к производительности собственного C++.

Blazor обеспечивает лучшую совместимость. Многие приложения также уже используют C# в качестве серверной части. Например, у вас может быть API ASP.NET, взаимодействующий с интерфейсом React. Вам понадобятся отдельные модели для сервера и клиентской части, а также отдельный код для взаимодействия с ними. Если они на одном языке, это позволяет легко обмениваться кодом и библиотеками между клиентом и сервером. Это единственная причина, по которой NodeJS существует на стороне сервера: хотя JavaScript не является идеальным языком для настольных компьютеров, создание приложений на одном языке сокращает время разработки.

Будущее Блазора

На самом деле существует несколько различных типов Blazor, так как Microsoft в последнее время приложила большие усилия для модернизации экосистемы ASP.NET. На данный момент выпущено две версии:

  • Blazor Server, который работает как React Server Side Rendering и выполняет большую часть обработки на сервере.
  • Blazor WebAssembly, который использует магию WebAssembly для запуска фактического кода .NET в реальном веб-браузере клиента.

Microsoft также планирует выпустить еще три версии Blazor, которые все еще находятся в разработке и доступны для предварительного просмотра:

  • Blazor PWA, предназначенный для публикации сайта в виде устанавливаемого Progressive Web App (PWA).
  • Blazor Desktop/Hybrid, который позволяет упаковывать приложения Blazor в настольные приложения и в основном похож на Electron, но с более высокой производительностью.
  • Blazor Native, который заменяет пользовательский веб-интерфейс интерфейсом платформы. Неясно, насколько это полезно, кроме взаимодействия с существующими инструментами Blazor, и эта версия все еще находится на стадии планирования.

В своем объявлении о Blazor Desktop Microsoft заявила, что «Blazor — это модель программирования приложений. Он очень легко адаптируется и может выполняться несколькими способами (в зависимости от необходимости)».

Microsoft, похоже, рассматривает Blazor как свой следующий стандарт для создания интерфейсов приложений. Их работа также того стоит, потому что по мере того, как приложения становятся все более и более зависимыми от Интернета, становится все труднее оправдать создание отдельных интерфейсов для Интернета и рабочего стола. У Blazor большое будущее, и у веб-приложений, созданных сегодня на Blazor Server и WebAssembly, будет много возможностей для роста.

Blazor Server против Blazor WebAssembly

Blazor Server использует подключение SignalR для связи между клиентом и сервером. Это просто причудливый слой поверх соединения WebSocket, который при необходимости может при необходимости переключаться на другие соединения. При этом вся обработка выполняется на сервере, а клиент остается простым представлением с базовым способом манипулирования DOM.

Blazor WebAssembly — это то, где это становится очень круто. WebAssembly (WASM) на самом деле не язык, на котором вы пишете, а цель компилятора. На самом деле он работает почти так же, как промежуточный язык Microsoft (MSIL), в который компилируются все C#, F# и VB.NET. За исключением того, что он работает не со средой выполнения .NET, а с использованием среды выполнения WebAssembly в браузере.

Самое интересное в WebAssembly заключается в том, что это относительно простая цель для компилятора. Подобно тому, как C# может компилироваться в MSIL, C# также может компилироваться в WebAssembly. Ну, технически это компиляция MSIL в WebAssembly (так проще), но суть та же.

Любой язык может быть скомпилирован в WASM, даже полностью собственные языки рабочего стола, такие как C++. Это не теория — это действительно работает на практике. AutoDesk смогла сравнительно легко перенести AutoCAD, кодовую базу C++ 30-летней давности, в веб-приложение на основе WebAssembly за несколько месяцев. Кто-то даже портировал Doom 3.

Blazor WebAssembly в основном берет весь сервер, а также среду выполнения .NET и запускает ее поверх WASM. Затем вместо того, чтобы общаться с сервером через SignalR, он напрямую обращается к DOM. Это исключает обработку на стороне сервера, что может быть идеальным для некоторых приложений.

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

Blazor WASM имеет медленную начальную загрузку, но на самом деле это можно исправить, используя гибридный режим, который использует предварительную визуализацию для создания начальной визуализации на сервере, но запускает все последующие обновления через WASM. У этого есть множество особенностей, и он все еще находится в стадии бета-тестирования, но если вы хотите узнать больше, вы можете обратиться к этим руководствам Джона Хилтона.

Будете ли вы использовать Blazor Server или Blazor WebAssembly, решать вам. Они оба имеют свои преимущества. Blazor Server запускает весь код обработки в доверенной среде и не требует наличия общедоступного API. Blazor WASM отзывчив и быстр, и его можно даже развернуть как статический сайт, обслуживаемый только NGINX.

Как Blazor работает с JavaScript?

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

private async Task ConvertArray()
{
    text = new(await JS.InvokeAsync<string>("convertArray", quoteArray));
}

И наоборот:

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

Хотя имейте в виду, что это, конечно, будет использовать отражение, и, конечно, это не самая производительная вещь в мире.

Технически вы можете использовать все пакеты NPM с Blazor, хотя его настройка и взаимодействие с ним со стороны .NET может быть немного головной болью, поэтому в большинстве случаев вам следует предпочесть пакет NuGet.

Можете ли вы использовать Blazor на рабочем столе (Электрон)?

Удивительно, но ответ на этот вопрос — да. Хотя Microsoft планирует выпустить Blazor Desktop/Hybrid, который делает то же самое, тем временем вы можете просто использовать обычный Electron. Это связано с тем, что Electron действительно не заботится о том, какую веб-страницу он обслуживает, и может просто обслуживать приложение Blazor.

Вы можете подумать, что он будет использовать приложение Blazor WebAssembly, но на самом деле проще просто добавить Electron на существующий сервер ASP.NET Core. У WASM есть некоторые накладные расходы, поэтому этот метод работает быстрее. Это то, что делает Electron.NET, и работает на удивление хорошо. Все, что вам нужно сделать, это установить его и добавить Electron в качестве службы ASP.NET. Вы также можете вызывать нативные функции Electron из C#.

Однако у Microsoft большие планы на Blazor Desktop. Они планируют полностью избавиться от зависимости от браузера и JavaScript и просто запускать нативный контейнер с веб-представлением, которое полностью соответствует .NET.

«Рабочий стол Blazor будет структурирован аналогично тому, как работает Electron. Будет элемент управления WebView, который отображает контент со встроенного веб-сервера Blazor, который может обслуживать как Blazor, так и другой веб-контент (JavaScript, CSS и т. д.)».

Это веб-представление будет использовать Safari, WebKitGTK или WebView2, в зависимости от ОС. WebView2 использует Chromium под капотом, поэтому он будет работать так же, как Electron, за исключением того, что он более производительный и использует меньше памяти.

Какой бы ни была реализация, приятно видеть, что еще одна платформа конкурирует с JavaScript и Electron в создании кроссплатформенных веб-приложений и приложений для ПК. Blazor Desktop должен быть выпущен в ноябре 2021 года вместе с первой предварительной версией .NET 6.