В статье рассмотрены основные технологические особенности фреймворка Blazor при разработке веб-приложений. Дан краткий обзор и анализ используемых технологических решений, предоставляемых возможностей и принципов работы данного инструмента. Исследованы возможные варианты его применения и дана оценка перспектив развития.
Ключевые слова : Blazor, Razor, NET, Blazor Server, WebAssembly.
Blazor — фреймворк для создания веб-приложений на платформе.NET. Он позволяет разработчикам создавать одностраничные (Single Page Applications) и многостраничные (Multi Page Applications) приложения с использованием средств этой среды. Данный инструмент предоставляет способ использования языка C# и возможностей платформы.NET для создания веб-приложений, что может быть особенно полезно для разработчиков, которые уже знакомы с этими технологиями.
Для создания пользовательского интерфейса в Blazor используется синтаксис языка разметки Razor, являющийся на данный момент частью платформы ASP NET Core, который поддерживает язык С# и использует символ @ для перехода с языка разметки HTML на директивы языка Razor, а также вычисления выражений С# кода и отображения их как выходных данных HTML. Таким образом Razor позволяет разработчику использовать одновременно HTML-разметку и вставки кода на языке С#, которые определяют логику работы динамических элементов. Стоит отметить, что Blazor во многом является наследником более раннего продукта Microsoft Razor Pages и использует большинство идей этой технологии. Но в отличие от предыдущих.NET инструментов веб-разработки Blazor приобрел некоторые дополнения и избавился от существенных недостатков, получив возможность обработки и рендеринга приложения на стороне клиента, и необходимости писать логику клиента приложения на языке JavaScript, став полностью обслуживаемым на C#.
Из HTML-разметки и С# кода формируются компоненты — автономные части сочетающие описание пользовательского интерфейса и логики обработки динамического поведения данного интерфейса. Приложения на основе фреймворка Blazor создаются посредством сочетания данных компонентов, которые называются Razor компоненты (Razor Components). Компоненты являются классами и реализуются в виде файлов с расширением.razor, что позволяет использовать их многократно как элементы при построении в других Blazor, Razor Pages или MVC приложениях. Данные компоненты можно добавлять в HTML разметку страницы как тег, таким образом добавляя готовые элементы и собирая из них веб-страницы. Это позволяет не переписывать и не дублировать при необходимости уже имеющийся код. Поведение компонентов управляется атрибутами, которые дописываются в тег с названием компонента с необходимыми значениями. Добавление компоненту атрибутов осуществляется путем добавления в класс компонента нового свойства с ключевой аннотацией [Parameter]. Параметры могут передаваться не только между компонентами, но и из страниц и мастер страниц верхнего уровня для вложенных компонентов. Такой подход управления компонентами даёт возможность более гибкого и удобного повторного их использования. Компоненты могут быть связаны с URL-адресом посредством директивы @page и указания пути к его.razor файлу, тем самым наделяя их свойствами самостоятельной веб-страницы. Компоненты поддерживают обработку событий, которая производится посредством атрибута @on{event} и связывает определяемое событие с исполнением метода компонента. Также как и в предыдущих.NET Blazor содержит концепцию мастер-страниц (layouts), которые служат шаблоном для создания унифицированного вида сайта. Посредством ключевого слова @bind может осуществляться связывание HTML-элементов с каким-либо методами, свойствами и значениями других элементов, а также событиями посредством атрибута @bind-event. Также для получения данных от сторонних сервисов расположенных за пределами приложения существует функция внедрения зависимостей (dependency injection), подключаемая директивой @inject.
Кроме того, Blazor имеет множество уже готовых инструментов и библиотек, которые могут помочь ускорить разработку и сделать ее более продуктивной. Например, Blazor предоставляет множество готовых компонентов пользовательского интерфейса, таких как кнопки, формы и таблицы, что может значительно упростить создание интерфейса приложения. Также присутствует поддержка всех более ранних функций из стека технологий.NET для веб-разработки, такие как маршрутизация, валидация, взаимодействие с библиотеками JavaScript и другие.
Данный фреймворк имеет две технологии реализации — WebAssembly, для одностраничных интерактивных сайтов, которая позволяет запускать код написанный на C# и.NET в браузере, и Blazor Server, где обработка операций, связанных с приложением, происходит за счет ресурсов сервера. Каждая из технологий имеет свои преимущества и недостатки. К преимуществам серверного приложения можно отнести: небольшой размер загружаемых данных и соответственно более быструю загрузку приложения, использование приложением возможностей сервера, повышение безопасности, так как база кода не предоставляется клиентам. К недостаткам Blazor Server приложения можно отнести более высокую задержку, так как каждое активное взаимодействие с пользователем ведёт к обращению на сервер, полную зависимость приложения от соединения с сервером, а также значительные требования к ресурсам сервера для ресурсоёмких и приложений с большим количеством пользователей. Клиентские приложения на технологии WebAssembly решают проблемы, связанные с зависимостью от соединения с сервером и нехваткой его вычислительных ресурсов, но имеют и существенный недостаток — загрузка приложений занимает значительно больше времени. Такое разделение технологий реализации также создаёт больше возможностей для оптимизации работы приложения. Так если для приложения более важным являются обновления в реальном времени или доступ к возможностям сервера (базы данных, шифрование) то оптимальным будет выбор с обработкой на стороне сервера. В случае же когда приложение должно иметь возможность работы в оффлайн-режиме или предполагает высокую вычислительную нагрузку (графические VR/AR приложения,3D-приложения, кодировщики аудио и видео, игры) то более оптимальным будет выбор технологии WebAssembly.
В целом, Blazor — это современный инструмент для создания веб-приложений, который имеет свои особенности и свою целевую аудиторию. Направление веб-разработки на платформе.NET имеет достаточно перспектив и активно развивается. На данный момент уже выпущена более новая технология.NET MAUI. В заключении можно отметить, что если вы уже знакомы с.NET и хотите использовать его для создания веб приложений, то данная платформа предоставляет достаточно технологий и инструментов для их реализации.
Литература:
- ASP.NET Core Blazor. — Текст: электронный // Microsoft Learn: [сайт]. — URL: https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-7.0 (дата обращения: 06.03.2023).
- Справочник по синтаксису Razor для ASP.NET Core. — Текст: электронный // Microsoft Learn: [сайт]. — URL: https://learn.microsoft.com/ruru/aspnet/core/mvc/views/razor?view=aspnetcore-7.0 (дата обращения: 06.03.2023).
- Руководство по фреймворку Blazor. — Текст: электронный // METANIT.COM — Сайт о программировании: [сайт]. — URL: https://metanit.com/sharp/blazor/ (дата обращения: 08.03.2023).
- Blazor for Beginners: [серия видео-уроков] / Jeff Fritz // URL: https://www.youtube.com/playlist?list=PLdo4fOcmZ0oUJCA3DCzKT79Oe3kdKEceX (дата обращения: 08.03.2023). — Изображение (движущееся; двухмерное): видео.
- Сравнение архитектуры ASP.NET Web Forms и Blazor. — Текст: электронный // Microsoft Learn: [сайт]. — URL: https://learn.microsoft.com/ru-ru/dotnet/architecture/blazor-for-web-forms-developers/architecture-comparison (дата обращения: 06.03.2023).
- Defining routes. — Текст: электронный // Blazor University: [сайт]. — URL: https://blazor-university.com/routing/defining-routes/ (дата обращения: 06.03.2023).
- JavaScript Interloop. — Текст: электронный // Blazor University: [сайт]. — URL: https://blazor-university.com/routing/defining-routes/ (дата обращения: 06.03.2023).
- Blazor Server vs. Blazor WebAssembly: Four Ways In Which They Differ. — Текст: электронный // Round The Code -.NET blog and ASP.NET Core tutorials: [сайт]. — URL: https://www.roundthecode.com/dotnet/blazor/blazor-server-vs-blazor-webassembly-four-ways-in-which-they-differ (дата обращения: 06.03.2023).
- Основы Razor. — Текст: электронный // Платформа.NET и C# от А до Я: [сайт]. — URL: https://csharp.webdelphi.ru/osnovy-razor/ (дата обращения: 08.03.2023).
- Мостовой, Р. Доклад Blazor 9.11.2021. — Текст: электронный // URL: https://prog.msk.ru/downloads/blazor.pdf (дата обращения: 06.03.2023).
