Что такое Blazor WASM?

Выдержка

Эта статья основывается на концепции WebAssembly как неотъемлемой части Blazor WASM и исследует, что такое Blazor WASM, как он работает, какие проблемы решает, его особенности и для каких приложений он подходит.

Введение

Blazor WASM (или Blazor WebAssembly) — это фреймворк одностраничных веб-приложений, который позволяет создавать одностраничные веб-приложения. Созданный как часть экосистемы .NET Core, Blazor использует C# для создания динамического контента для богатого клиентского опыта.

Принцип работы Blazor WASM

Традиционно все веб-страницы структурируются с помощью HTML, оформляются с помощью CSS и используют Javascript для придания динамической интерактивности. C# как язык не был создан для работы в браузерах. Однако, благодаря наличию WebAssembly, браузер теперь может содержать среду выполнения dotnet, что позволяет запускать и выполнять код C#.

В чем проблема с Javascript в браузере

Это правда, что Javascript является родным языком веб-браузеров и может работать как во фронтенде, так и в бэкенде. Но действительно ли необходимо запускать C# в браузере?

Ниже описаны преимущества использования C# в браузере.

Возможность использования всего стека

Экосистема ядра dotnet обеспечивает одну из самых безопасных и наиболее устойчивых реализаций серверной части. Благодаря реализации ASP.NET она занимает одно из первых мест среди самых популярных бэкенд-фреймворков.

Расширив среду выполнения .NET на браузер, Microsoft создала настоящую полностековую среду, позволяющую командам использовать те же знания и библиотеки классов, которые им знакомы по языку c#, на обоих стеках.

Более простая интеграция

В веб-разработке есть разработчики, которые фокусируются либо на стороне клиента, либо на стороне сервера. В то время как классам кода не нужно знать детали реализации других классов, разработчикам на стороне клиента необходимы знания о реализации на стороне сервера, а это иногда может оказаться сложным при использовании двух языков, особенно если один из них сильно типизирован, а другой — нет.

При использовании Blazor WASM клиентская и серверная стороны имеют общую кодовую базу на одном языке, которая легко интегрируется друг с другом. Разработчики клиентской стороны будут иметь представление о логике серверной стороны и о том, как ее легко интегрировать и реализовать.

Снижение затрат на разработку

На изучение и освоение языков программирования уходят годы. Поскольку разработчики стоят недешево, поиск и оплата разработчиков является стратегическим решением для небольших команд. Наличие команды квалифицированных разработчиков, которые могут переключаться между приложениями на стороне клиента и сервера без потери понимания обеих сторон, улучшает сотрудничество, что жизненно важно для небольших команд.

Нажмите здесь, чтобы узнать, как наставник Blazorise может быстро помочь вашим командам разработчиков увеличить скорость разработки приложений с использованием компонентов Blazorise.

Улучшенное повторное использование кода

Принцип DRY — один из самых простых способов предотвратить и уменьшить количество запахов кода и спагетти-кода. Благодаря отсутствию необходимости переписывать новый код, снижается степень связанности и будущие изменения не влияют на другие части кодовой базы.

В Blazor WASM можно совместно использовать и потреблять целые библиотеки .NET. Использование существующей логики, функциональности и возможностей позволяет разработчикам больше сосредоточиться на инновациях, поскольку им не нужно изобретать колесо.

Особенности Blazor WASM

Blazor WASM обладает уникальным набором функций, которые делают его привлекательным выбором для разработки на стороне клиента.

Многократно используемые компоненты

С помощью Blazor вы можете создавать компоненты для использования во всех приложениях. Компоненты — это строительные блоки для пользовательского интерфейса, такие как формы, карточки, таблицы, сетки и многое другое.

Эти компоненты могут быть определены один раз и вызываться несколько раз. По своей сути, компоненты — это группа элементов HTML, которые определяют структуру сайта.

<Dropdown>
    <DropdownToggle Color="Color.Primary">
        Dropdown
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

Выше показан компонент выпадающего меню с помощью Blazorise. Это облегчает и ускоряет разработку и может быть вызвано в любое время, когда вы хотите создать выпадающее меню, без необходимости писать много кода.

Горячая перезагрузка

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

Быстрая производительность

При первой загрузке Blazor WASM требуется некоторое время для загрузки среды выполнения и других зависимостей. В дальнейшем Blazor WASM полагается на загруженную среду исполнения, чтобы выполнять свои задачи в браузере на скорости, близкой к «родной», что делает приложения более быстрыми.

Что можно создать с помощью Blazor

В этом разделе представлены некоторые из лучших вариантов использования Blazor

Прогрессивное веб-приложение

Прогрессивное веб-приложение — это приложение, которое может быть установлено и запущено как родное приложение. Создание PWA помогает командам обеспечить нативные настольные и мобильные возможности для своих приложений, не создавая их специально для этих сред.

Для небольших команд Blazor может стать способом экономии средств без ущерба для производительности и доставки.

Одностраничные приложения

Одностраничное приложение (SPA) — это веб-приложение или веб-сайт, который взаимодействует с пользователем, динамически переписывая текущую веб-страницу с новыми данными с веб-сервера, вместо того чтобы по умолчанию веб-браузер загружал целые новые страницы.

В Blazor WebAssembly, когда клиент делает запрос, он предоставляется в виде HTML, CSS и JavaScript — как и все другие веб-приложения. Файл blazor.webassembly.js загружает приложение и начинает загрузку двоичных файлов .NET, которые можно просмотреть на вкладке «Сеть» браузера.

Автономные приложения

Поскольку Blazor WASM загружает среду выполнения и зависимости при запуске, большая часть рендеринга выполняется на стороне клиента. В результате он может хорошо работать в сценариях, где нет интернета или ограничено подключение.

Развенчание распространенных заблуждений

Как и все другие SPA-фреймворки, Blazor WASM имеет свои недостатки. Вот несколько из них, на которые стоит обратить внимание

Огромная полезная нагрузка и медленный начальный размер

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

Больше никакого Javascript

Цель Blazor WASM — позволить C# работать в браузере, но это не значит, что вам совсем не понадобится javascript. Blazor WASM не может напрямую взаимодействовать с DOM или иметь доступ к API браузера, поэтому их необходимо вызывать с помощью javascript, в процессе, называемом Javascript Interop. Поскольку Javascript является родным языком для браузеров, он потребуется для доступа к функциям, основанным на браузере.

Заключение

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