Русский
Русский
English
Статистика
Реклама

Blazor

Перевод Сравнение Blazor и JavaScript-инструментов

05.09.2020 16:05:22 | Автор: admin
В последние несколько лет JavaScript был самым популярным и распространённым языком для разработки одностраничных приложений (Single Page Application, SPA). Это так и сегодня. Но недавно Microsoft выпустила новый фреймворк, который называется Blazor. Он позволяет писать браузерные приложения на C#.



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

Что такое Blazor?


Blazor (Browser+Razor) это новый веб-фреймворк, выпущенный Microsoft. Он позволяет создавать браузерные приложения, используя, помимо HTML и CSS, язык C# и синтаксис Razor.

Ранее тот, кто пользовался Razor, должен был запускать представления (view) Razor на сервере, формируя таким образом HTML-код, который мог быть выведен браузером. Теперь же представления Razor можно выполнять на стороне клиента.

Так как Blazor использует WebAssembly, нам не нужно устанавливать в браузер никаких сторонних плагинов или аддонов для выполнения соответствующего кода. В результате оказывается, что используя Blazor можно создавать клиентские и серверные части приложения на C#. Возможность совместного использования кода и библиотек на клиенте и на сервере значительно облегчает жизнь разработчика.

Вот пример кода, используемого в Blazor.


Код, используемый в Blazor

Почему вокруг Blazor поднято так много шума?


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

Как я уже говорил, главная сильная сторона Blazor это возможность разработки браузерных приложений на C#. В последние годы JavaScript (или TypeScript) был основным языком разработки клиентских частей веб-приложений. То есть, если некто является .NET-программистом, ему, чтобы разрабатывать фуллстек-приложения для веба, необходимо было изучить JavaScript. А с использованием Blazor и клиентские и серверные части веб-приложений можно писать на C#. Лично для меня это главная сильная сторона Blazor.

Код, написанный для Blazor, в отличие от JavaScript-кода, перед попаданием в браузер предварительно компилируется в промежуточный формат. Эта особенность даёт нам некоторые замечательные возможности при разработке браузерных приложений, требовательных к производительности. И, кроме того, Blazor-приложения подходят для решения ресурсоёмких задач на клиенте. Например для создания PDF-файлов или для обеспечения работы игровых алгоритмов.

Но, помимо вышеперечисленного, у Blazor есть и другие интересные возможности:

  • Для обеспечения работы Blazor не нужны браузерные плагины.
  • При разработке для Blazor можно выполнять полноценную отладку .NET-кода.
  • Фреймворк использует новейшие возможности браузеров.
  • Blazor поддерживает удобную модель разработки интерфейсов.
  • Фреймворк отличается хорошей браузерной поддержкой.
  • Blazor поддерживает механизм внедрения зависимостей.
  • Использование Blazor позволяет организовать совместное использование кода между клиентскими и серверными частями приложений.

Сравнение JavaScript-инструментов и Blazor


А теперь мы добрались до самой главной части этой статьи. Поищем ответ на вопрос о том, сможет ли Blazor стать заменой для библиотек и фреймворков, написанных на JavaScript. Сможет ли JavaScript удержать занятые им позиции? Пожалуй, любой, кто интересуется современным состоянием фронтенд-разработки, хотел бы знать ответы на эти вопросы. Полагаю, что пока слишком рано делать окончательные выводы, или даже строить некие предположения на этот счёт. Но мы, чтобы приблизиться к истине, можем сравнить с Blazor несколько ведущих JavaScript-библиотек и фреймворков.

Сравнение Blazor и React


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

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

Blazor, в сравнении с React, это явление достаточно новое. Но не стоит забывать о том, что за Blazor стоит серьёзная система Razor. Поэтому мы не можем говорить о том, что Blazor это нечто, совершенно неизвестное программистам. Кроме этого, так как Blazor использует C#, это облегчает и ускоряет освоение данного фреймворка .NET-разработчиками. Хотя React, улучшаясь со временем, даёт разработчикам множество возможностей, и хотя у React есть масса сильных сторон, в Blazor, несмотря на совсем небольшой возраст этого фреймворка, тоже есть кое-что примечательное:

  • Blazor-проекты, как и проекты, основанные на React, можно разворачивать в виде статических файлов.
  • В Blazor-приложениях можно использовать пакеты NuGet.
  • При применении Blazor на клиенте и на сервере можно использовать один и тот же код (это, конечно, справедливо и при использовании JS/TS).
  • В Blazor есть встроенные механизмы для маршрутизации, для проверки данных, введённых пользователем, для обработки форм.

Это лишь небольшой набор возможностей Blazor. Но, если ориентироваться на текущую ситуацию, можно сказать, что если некая команда уверенно пользуется JavaScript, то ей, безусловно, стоит просто пользоваться React. С другой стороны, Blazor это отличный вариант для того, кто владеет .NET лучше, чем JavaScript, и при этом начинает работу над новым веб-проектом.

Сравнение Blazor и Angular


JavaScript-фреймворк Angular тоже популярен в деле разработки одностраничных приложений. Если сравнить его с библиотекой React, то окажется, что он включает в себя больше стандартных возможностей. Angular предоставляет разработчику клиентских приложений архитектуру MVC, что позволяет упростить процессы создания и тестирования проектов. Если же сравнить Angular и Blazor, то окажется, что Angular занимает прочное место во фронтенд-разработке, как хорошо известный и стабильный фреймворк, пригодный для создания реальных приложений. Кроме того, Angular полностью поддерживает прогрессивные веб-приложения, в то время как серверные механизмы Blazor ещё должны развиться в этом направлении. Более того, так как в Angular используется TypeScript, этот фреймворк ближе и понятнее для C#-программистов, чем фреймворки и библиотеки, основанные на JavaScript. Учитывая все сильные стороны Angular, я не вижу причин для того, чтобы кто-то, хорошо знающий TypeScript, решил бы выбрать Blazor.

Итоги


Blazor это, безусловно, интересный проект, который, несмотря на то, что появился он сравнительно недавно, заслуживает определённого внимания. А вопрос о том, способен ли он заменить JavaScript-инструменты в деле разработки фронтенда, пока остаётся открытым.

Пробовали ли вы Blazor?

Подробнее..

Frontend Meetup 2004

19.04.2021 16:09:25 | Автор: admin

Вместе со спикерами из Devexperts, Почты России, Леруа Мерлен и Райффайзенбанка узнаем об опыте разработки продуктов: как найти подход к Blazor, использовать плагин Figma для работы с white label, разрабатывать картографический раздел отделений и внедрять микрофронтенды.

О чем поговорим

Blazor поневоле

Александр Кильганов, Райффайзенбанк

О докладе: Я не Frontend-разработчик, но с Blazor пришлось познакомиться: подход к нему получилось найти не сразу, об этом и расскажу с какими болями и трудностями при работе столкнулся и как их решал. Также расскажу, как смешивал несмешиваемые компоненты Blazor, C# и HTML и что это из этого получилось. Ну, и отвечу на главный вопрос: стоит ли Blazor вообще использовать?

Плагин в Figma для работы с white label

Наталья Ильина, Devexperts

О докладе:Мы занимаемся разработкой финтех продуктов и поставляем клиенту white label. В свое время мы пришли к пониманию, что нам нужно автоматизировать рутинные процессы. Так был разработан плагин Хамелеон, который интегрирует содержимое макетов в Figma со сборками. В докладе расскажу, как плагин работает, с какими сложностями столкнулись в Figma, как решили их и какой у плагина есть потенциал.

Опыт отрисовки отделений на карте в Почте России

Михаил Вовренчук, Почта России

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

Эволюция микрофронтендной платформы в Леруа Мерлен

Роман Соколов, Леруа Мерлен

О докладе:Рассказываю, что такое микрофронты и какие проблемы они решают. Зачем Леруа начали внедрять их у себя и как это происходило от первой версии и до настоящего момента.


Начнем митап в 19:00 (мск).
Зарегистрируйтесь, чтобы получить ссылку на трансляцию: письмо придет вам на почту.

Подробнее..

Игра на WebAssembly, часть 2 уровни и опыт, админка

01.07.2020 02:19:17 | Автор: admin
В предыдущей статье получилось сделать прототип игры с вопросами. Но не получилось сделать это полноценно на WebAssembly. В этот раз предлагаю конвертировать этот прототип, сделав с него полноценное WebAssembly приложение, а так же добавить к нему атрибуты большинства игр опыт и уровни игрока. А так же простую логику при переходе на некоторые уровни будем открывать новые навыки.

Demo



Создаем WebAssembly проект


Создадим новый проект, который будет хостить WebAssembly приложение, внутри Web приложения (ASP.NET Core ). Если быть точнее, то Web приложение возвращает WebAssembly приложение, которое остается в браузере у пользователя и взаимодействует с сервером посредством http (или веб сокетов). Для этого, нам нужно создать BlazorApp проект и выбрать пункт ASP.NET Core hosted


Или же, из консоли:
dotnet new blazorwasm --hosted


По скольку у нас уже есть Blazor проект с предыдущей статьи, а синтаксис одинаковый у проектов с серверным хостингом и WebAssembly, то все страницы можно просто скопировать. Но с классами для логики так не получится нужно создать новый контроллер, как часть backend-а. Это обычный asp.net контроллер, с которым наш клиент будет коммуницировать.

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

Меняем версию на .NET 5 preview 6


Срочной необходимости это делать нет. Но, поскольку предварительная версия .NET 5 уже доросла до шестой, поддерживает Blazor и в ней есть некоторые новые фичи (например, extension методы для запросов на сервер), то почему бы и не перейти на неё сейчас. Мигрировать довольно просто, если знать что делать. В нашем случае это замена версий target framework в серверном проекте и переход на новую версию всех nuget пакетов.

Github commit: Update to .NET 5 preview 6


Добавляем опыт и уровень


Для связи между уровнем и опытом будем использовать простую формулу: минимум опыта для уровня = 2^(уровень). Для того, чтобы игрок мог понимать сколько опыта он накопил и какого он уровня, добавим в его модель эти два параметра. А так же, добавим поле в таблицу с вопросами для индикации сколько очков опыта даст один вопрос. Пока все вопросы будут добавлять 1 очко опыта.

Для отображения на пользовательском интерфейсе, используем простые компоненты Bootstrap.
<div class="row">    <div class="col-md-auto">        <span class="badge badge-warning">            Уровень <span class="badge badge-light">@state.Level</span>        </span>    </div>    <div class="col">        <div class="progress mt-1">            <div class="progress-bar" role="progressbar" style="width: @GetExperienceWidgetWidth()" aria-valuenow="@state.Experience" aria-valuemin="0" aria-valuemax="@experienceDiff">                XP: @state.Experience            </div>        </div>    </div></div>


Результат:


Github commit: Add level and experience to UI


Навыки уровней


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

Github commit: Show features depending on level


Так же добавим рейтинг игроков с наивысшим уровнем. Это послужит примером того, как выглядит комит с отдельной компонентой, которая касается разных существующих частей. На мой взгляд, выглядит очень даже понятно.
Github commit: Add leader board


В этом же изменении, при редактировании фидбека на неправильный ответ, наткнулся на интересный момент. Попробовал одновременно подписаться на события нажатия клавиши (если это Enter отправить на сервер) и изменения значения контрола (если оно пустое убрать сообщение о не верном ответе). Оказалось, что такой вариант не поддерживается. Что, в свою очередь спровоцировало как-то это обойти. В описном тикете есть варианты, но я попробовал еще один:
 var timer = new Timer(1);timer.Elapsed += (object sender, ElapsedEventArgs e) => { wrongStyle = "visibility:hidden"; };timer.Start();

Работает именно так, как мне нужно при изменении ответа, сообщение пропадает. Хотя и таймер на 1 миллисекунду. Вообще, использования .NET таймера внутри браузера звучит странно. Но, похоже, что если пользователь не активен, то таймер автоматически замораживается.

Админка


Приятным бонусом использования Blazor внутри ASP.NET Core приложения является возможность использования инструментов зрелого фреймворка. В данном случае мы можем сделать простую админку для просмотра\редактирования вопросов с помощью кодо-генерации.

Добавим несколько типичных строк в логику конфигурации авторизации (Startup.cs) и сгенерируем пару стандартных частей Identity страницы для авторизации и контроллер с представлениями для просмотра вопросов. Получилась простыня кода, из которой руками писалось всего несколько строк.

Github commit: add admin part


Проверка ответов и безопасность


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

Выводы


На сегодняшний день есть как позитивные так и негативные моменты разработки на Blazor. Самое приятное это видеть как интерактивно меняется пользовательский интерфейс, при этом использовать только C# как язык программирования. Как ни странно, не смотря на простоту фреймворка, требуемый пользовательский интерфейс получается сделать довольно просто и при этом всё работает. Из негативных моментов главная проблема, это ощущение сыроватости. Возможно при использовании стабильных версий всё выглядит лучше.

В общем, ощущения очень интересные. Приходится использовать старые добрые инструменты для написания веб приложения совсем по-новому. Мне кажется, что пока развитие Blazor идет в очень правильном русле просто компилируемый код, который работает в браузере без всяких странных прибамбасов.

Результат:

Github
Demo
Подробнее..

Бесплатная электронная книга на русском Blazor для разработчиков ASP.NET Web Forms

18.08.2020 10:04:18 | Автор: admin
Привет, Хабр! Как многие знают, мы очень активно развиваем платформу Blazor, клиентскую платформу веб-интерфейса, основанную на C#, а не на JavaScript. С помощью Blazor вы можете писать собственную клиентскую логику и компоненты пользовательского интерфейса на C#, компилировать их в обычные сборки .NET, а затем запускать их непосредственно в браузере с помощью нового открытого веб-стандарта WebAssembly.

Для лучшего понимания принципов работы с платформой мы создали бесплатную книгу "Blazor для разработчиков ASP.NET Web Forms". Сейчас она еще находится в процессе доработки, но уже доступна на многих языках. Оригинал на английском можно скачать как PDF, а перевод на русский доступен на нашем сайте с документацией.

Под катом вы найдете все полезные ссылки, а также сможете прочитать введение. Присоединяйтесь!



Ссылки на книгу



Вступление


.NET уже давно поддерживает разработку веб-приложений через ASP.NET комплексный набор платформ и средств для создания любых типов приложений.ASP.NET имеет собственную линейку веб-платформ и технологий, начиная с классического ASP.Такие платформы, как ASP.NET Web Forms, ASP.NET MVC, веб-страницы ASP.NET и более поздняя ASP.NET Core, предоставляют эффективный и функциональный способ создания веб-приложений,подготавливаемых к просмотру на сервере, в которых содержимое пользовательского интерфейса динамически формируется на сервере в ответ на HTTP-запросы.Каждая платформа ASP.NET ориентирована на определенную аудиторию и подход к созданию приложений.

ASP.NET Web Forms поставляется с исходным выпуском .NET Framework и поддержкой веб-разработки с использованием множества шаблонов, знакомых разработчикам классических приложений, таких как многократно используемые элементы управления пользовательского интерфейса с простой обработкой событий.Однако ни одно из предложений ASP.NET не предоставляет способа для выполнения кода, выполняемого в браузере пользователя.Для этого требуется написать код JavaScript и использовать любые из множества платформ и средств JavaScript, которые набирали и теряли популярность в течение многих лет: jQuery, Knockout, Angular, React и т.д.

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

Кроме того, Blazor позволяет запускать интерфейсные компоненты.NET на сервере и гибко управлять всеми взаимодействиями с интерфейсом через подключение к браузеру в режиме реального времени.При использовании со средой.NET, работающей на сервере, Blazor позволяет разрабатывать на.NET веб-приложения для всего стека.Хотя платформа Blazor имеет много общего с ASP.NET WebForms, например многократно используемую модель компонентов и простую обработку пользовательских событий, она также использует основы .NETCore для создания современной и высокопроизводительной среды веб-разработки.

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

Для кого предназначена эта книга


Книга предназначена для разработчиков ASP.NET WebForms, желающих познакомиться с Blazor в контексте имеющихся у них знаний и навыков.Она поможет быстро приступить к работе над новым Blazor-проектом или составить план модернизации существующего приложения на основе ASP.NET WebForms.

Как пользоваться книгой


В первой части книги приведено описание платформы Blazor и сравнение разработки на этой платформе с разработкой веб-приложений на базе ASP.NET WebForms.Затем в отдельных главах книги описываются различные аспекты Blazor, причем каждое понятие Blazor соотносится с аналогичным понятием в ASP.NET WebForms либо дается полное пояснение для принципиально новых концепций.Книга также регулярно ссылается на образец полноценного приложения, реализованного как на базе ASP.NET WebForms, так и на платформе Blazor, чтобы продемонстрировать функции Blazor и представить пример миграции на Blazor с ASP.NET WebForms.Обе реализации образца приложения (версии для ASP.NET WebForms и Blazor) можно найти наGitHub.

Темы, которые выходят за рамки этой книги


Эта книга представляет собой введение в Blazor, а не исчерпывающее руководство по миграции.Хотя она содержит рекомендации по миграции проекта с ASP.NET WebForms на Blazor, она не стремится описывать все нюансы и детали.Общие рекомендации по переходу с ASP.NET на ASP.NET Core см. вруководстве по миграциив документации по ASP.NET Core.

Дополнительные ресурсы


Официальную домашнюю страницу Blazor и документацию по этой платформе можно найти по адресуhttps://blazor.net.

Отправить отзыв


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

Ссылки на книгу


Подробнее..

Обновления ASP.NET Core в .NET 6 Preview 1

25.02.2021 10:21:06 | Автор: admin

Новая версия .NET, 6 Preview 1, уже доступна и готова к вашей оценке. Это первая предварительная версия .NET 6, следующего крупного обновления платформы .NET. Ожидается, что .NET 6 поступит в полноценный доступ в ноябре этого года и будет выпуском с долгосрочной поддержкой (LTS).

Если вы работаете с Windows и используете Visual Studio, мы рекомендуем установить последнюю предварительную версию Visual Studio 2019 16.9. Если вы используете macOS, мы рекомендуем установить последнюю предварительную версию Visual Studio 2019 для Mac 8.9.

Основная работа, запланированная с ASP.NET Core в .NET 6

.NET 6 использует открытый процесс планирования, поэтому вы можете изучить все основные темы, запланированные для этого релиза, на Blazor-веб-сайте themesof.net. В дополнение к этим верхнеуровневым темам мы собираемся также предоставить множество улучшений, ориентированных на пользователей. Вы можете найти список основных задач, запланированных для ASP.NET Core в .NET 6, в нашем выпуске дорожной карты. Вот некоторые из основных функций ASP.NET Core, запланированных для выпуска .NET 6:

Мы приветствуем отзывы и участие в процессе планирования и создания на GitHub.

Что нового в ASP.NET Core в .NET 6 Preview 1?

  • Поддержка IAsyncDisposableв MVC

  • DynamicComponent

  • InputElementReferenceразделен на релевантные компоненты

  • dotnet watchтеперь являетсяdotnet watch runпо дефолту

  • Nullable reference type annotations

Начало работы

Чтобы начать работу с ASP.NET Core в .NET 6 Preview 1, установите .NET 6 SDK.

Обновление существующего проекта

Чтобы обновить существующее приложение ASP.NET Core с .NET 5 до .NET 6 Preview 1:

  • Обновите целевую платформу для вашего приложения, доnet6.0.

  • Обновите все ссылки на пакеты Microsoft.AspNetCore.* до6.0.0-preview.1.*.

  • Обновите все ссылки на пакеты Microsoft.Extensions.* до6.0.0-preview.1.*.

См. полный список критических изменений в ASP.NET Core для .NET 6 здесь.

DynamicComponent

DynamicComponent - это новый встроенный компонент Blazor, который можно использовать для динамической визуализации компонента, указанного по типу.

<DynamicComponent Type="@someType" />

Параметры могут быть переданы визуализируемому компоненту с помощью dictionary:

<DynamicComponent Type="@someType" Parameters="@myDictionaryOfParameters" />@code {    Type someType = ...    IDictionary<string, object> myDictionaryOfParameters = ...}

InputElementReferenceразделен на релевантные компоненты

Соответствующие встроенные компоненты Blazor ввода теперь предоставляют удобную ссылку ElementReference для базового ввода, что упрощает распространенные сценарии, такие как установка фокуса пользовательского интерфейса на вводе. Затронутые компоненты: InputCheckbox, InputDate, InputFile, InputNumber, InputSelect, InputText и InputTextArea.

dotnet watchтеперь являетсяdotnet watch runпо дефолту

Запуск dotnet watch теперь будет запускать dotnet watch run по умолчанию, экономя драгоценное время ввода.

Nullable Reference Type Annotations

Мы применяем аннотации обнуляемости к частям ASP.NET Core. Значительное количество новых API было аннотировано в .NET 6 Preview 1.

Используя новую функцию C# 8, ASP.NET Core может обеспечить дополнительную безопасность во время компиляции при обработке ссылочных типов, например защиту от исключений нулевых ссылок. Проекты, которые выбрали использование аннотаций, допускающих значение NULL, могут видеть новые предупреждения во время сборки от API-интерфейсов ASP.NET Core.

Чтобы включить ссылочные типы, допускающие значение NULL, вы можете добавить в файл проекта следующее свойство:

<PropertyGroup>    <Nullable>enable</Nullable></PropertyGroup>

Подробности читайте здесь.

Подробнее..

Перевод Объединяем Blazor и Razor Pages в одном ASP.NET Core 3 приложении

25.08.2020 00:11:37 | Автор: admin
Перевод статьи подготовлен в преддверии старта курса C# ASP.NET Core разработчик.





В этой статье я расскажу, как вы можете добавить страницы на основе Blazor в существующее приложение Razor Pages.



Предисловие


Выход Blazor на золото должен произойти через две недели. Многие вещи в проекте еще подвержены достаточно резким изменениям, и последняя предварительная 9-я версия значительно усложнила взаимодействие между компонентами Razor Pages и Blazor: теперь невозможно передавать параметры из страницы Razor в компонент Blazor с помощью Html.RenderComponentAsync. Это может измениться в будущем, но вполне вероятно, что в .NET Core 3.0 он появится с этим ограничением.

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

Шаг первый: поддержка Blazor


Итак, у нас есть уже существующее Razor Pages приложение, которое было преобразовано в .NET Core 3.



Для начала, вам нужно добавить в свое приложение поддержку Blazor. Эта поддержка позволит вам отображать Blazor-компоненты с Razor-страницы. Официальная документация полностью проводит вас по этому процессу, но вот его краткое изложение.

Startup.cs:

Нам необходимо добавить Services.AddServerSideBlazor в ConfigureServices и endpoints.MapBlazorHub в Configure:



_Layout.cshtml:

JS-библиотека Blazor необходима для подключения Blazor на стороне сервера. Она может быть добавлена в _Layout.cshtml:



?
<script src="_framework/blazor.server.js"></script>

_Imports.razor:

Нам также потребуется новый файл с именем _Imports.razor. Он должен быть добавлен в папку Pages:



_Imports.razor используется для установки using-выражений для ваших Blazor-компонентов. Начать можно со следующего:

?
@using System.Net.Http@using Microsoft.AspNetCore.Components.Forms@using Microsoft.AspNetCore.Components.Routing@using Microsoft.JSInterop@using Microsoft.AspNetCore.Components.Web

И на этом все. Теперь наше приложение поддерживает Blazor. Мы можем проверить это, скопировав классический компонент Counter (счетчик) в наше приложение



?
@page "/counter" <h1>Counter</h1><p>Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code {    int currentCount = 0;     void IncrementCount()    {        currentCount++;    }}

И отредактируем Privacy.cshtml, чтобы включить компонент Counter:

<a href="http://personeltest.ru/aways/mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application#">?</a>@page@model PrivacyModel@{    ViewData["Title"] = "Privacy Policy";}<h1>@ViewData["Title"]</h1> <p>Use this page to detail your site's privacy policy.</p> <component>@(await Html.RenderComponentAsync<Counter>(RenderMode.Server))</component>

Теперь, когда мы запускаем приложение, на нашей странице должен появится рабочий Counter:



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

Шаг второй: поддержка Blazor Pages


Наш Blazor-компонент определяет маршрут /counter:



Но переход по нему не работает:



Наша цель заставить работать маршрутизацию на Blazor-страницы. И мы хотим, чтобы Blazor-страницы использовали тот же макет, что и Razor-страницы. Для этого нам понадобится несколько вещей, начиная с маршрутизатора (Router).

App.razor:

Создайте новый файл App.razor в папке
Pages
:



Компонент Router определен в App.razor:

?

@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(Program).Assembly">    <Found Context="routeData">        <RouteView RouteData="routeData"/>    </Found>    <NotFound>        <h1>Page not found</h1>        <p>Sorry, but there's nothing here!</p>    </NotFound></Router>

Router автоматически просматривает все Blazor-компоненты с помощью page-директивы и добавляет к ним маршруты.

_Host.cshtml:

Нам также нужна страница, которая будет использоваться как хост для Blazor-страниц. Ее можно назвать как угодно, но в шаблонах Blazor по умолчанию используется _Host.cshtml, которое вполне нас устроит (впрочем, как и любое другое). В _Host.cshtml мы можем определить макет, который в нашем случае будет таким же, как у Razor-страниц.



_Host.cshtml содержит вызов Html.RenderComponentAsync:

?

@page "/blazor" @{    Layout = "_Layout";} <app>    @(await Html.RenderComponentAsync<App>(RenderMode.Server))</app>

Startup.cs:

И, наконец, небольшое дополнение к методу Configure Startup.cs. Ранее мы добавляли MapBlazorHub, а теперь нам нужно добавить вызов MapFallbackToPage, указывающий на новый _Host.cshtml:



И на этом все! Теперь нам просто нужно протестировать наш сетап. Добавьте счетчик страниц Blazor (Counter) в свой макет, отредактировав Pages/Shared/_Layout.cshtml:



Когда мы запускаем приложение, мы видим рабочую Blazor-страницу в нашем Razor Pages приложении:



И мы не ломали поддержку добавления Blazor-компонентов в Razor Pages:



Примечания


Следует отметить пару моментов:

  • Маршруты Blazor работают только тогда, когда они указывают на корень. Если /counter изменить, например, на /products/counter, страница не сможет загрузить требуемый blazor.server.js. Вместо этого мы получим 404. Должна быть возможность изменить тег script, чтобы он мог загружать требуемый скрипт независимо от локации, но, похоже, это изменилось с предварительной 8-й версии в предварительной 9-й, и я не смог заставить его работать. Вот скриншот 404, показывающий проблему:
  • Если вам удалось загрузить скрипт, вы, вероятно, столкнетесь с теми же проблемами с Blazor hub: скрипты пытаются найти hub в /products/blazor вместо blazor. Чтобы обойти это, вы можете вручную запускать соединение между сервером и браузером:

?

<script src="~/_framework/blazor.server.js" autostart="false"></script><script>  Blazor.start({    configureSignalR: function (builder) {      builder.withUrl('/_blazor');    }  });</script>

Пример кода


Пример кода для этого проекта доступен на GitHub.



Хотите узнать о нашем курсе подробнее? Вам сюда.



Читать ещё:




Подробнее..

Статические веб-приложения Azure с .NET и Blazor

25.11.2020 10:14:05 | Автор: admin


Статические веб-приложения Azure это сервис, который автоматически создает и развертывает веб-приложения полного стека из репозитория GitHub. Статические веб-приложения Azure состоят из статического веб-клиента и серверной части на базе Azure Functions. При создании ресурса Статические веб-приложения Azure создает в репозитории исходного кода приложения рабочий процесс GitHub Actions, который отслеживает выбранную вами ветвь. Всякий раз когда вы отправляете фиксации в отслеживаемую ветвь, рабочий процесс GitHub Actions автоматически создает и развертывает ваше приложение и его API-интерфейс.

На сегодняшний деньв статических веб-приложениях Azure реализована первоклассная поддержка Blazor WebAssembly и .NET Functionsв ознакомительной версии во всех регионах ее действия. Это было одним из ключевых запросов пользователей с момента объявления о выпуске статических веб-приложений на конференции Build. Вы можете разрабатывать и развертывать клиентские и бессерверные API-интерфейсы, созданные полностью на языке .NET.

Давайте попробуем!

Начало работы


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

В GitHub нажмите кнопкуИспользовать этот шаблон, чтобы создать новый репозиторий GitHub на основе шаблона. Присвойте ему имя (в своемпримере мы используемmy-blazor-app) и нажмите кнопкуСоздать репозиторий по шаблону.

В шаблоне три папки:
  • Клиент:пример приложения Blazor WebAssembly
  • API:API-интерфейс функций Azure на языке C#, который будет вызывать приложение Blazor
  • Общее:библиотека классов C# с общей моделью данных, используемой приложением Blazor и функциями Azure

Для локального выполнения приложения запустите оба проекта: API-интерфейс и клиент. Страница Поиск данных в приложении Blazor запрашивает данные прогноза погоды от серверного API функций Azure и отображает их.

Чтобы запустить приложение из командной строки, необходимо установитьAzure Functions Core Toolsдля используемой вами платформы.

Развертывание в качестве статического веб-приложения


Чтобы развернуть это приложение в качестве статического веб-приложения Azure, выполните вход в учетную запись Azure (Зарегистрироваться для получениябесплатной учетной записи можно здесь) и найдитеСтатическое веб-приложение.



НажмитеСоздать, укажитеподписку,группу ресурсови название приложения.
Затем выполните вход в GitHub, найдите свой репозиторий GitHub (my-blazor-app) и выберите ветвь для развертывания.



Наконец, выберитеBlazorв разделеПредустановки сборки, после чего в поляхРасположение приложения,Расположение APIиРасположение артефактов приложениябудут автоматически введены значенияКлиент,APIиwwwroot. Первое и второе значения это путь в репозитории Git, где находятся проектные файлы для приложения Blazor и Функций Azure, так что если вы изменили структуру репозитория Git, отразите изменения в этих значениях. Третье значение это путь вывода,по которому осуществляет компиляцию Blazor, так что обновлять его нетребуется.

Завершите работу мастера, и статические веб-приложения создадут файл рабочего потока GitHub Actions и развернут ваше приложение в Azure.

Сводная информация


Мы начали с разветвления репозитория GitHub (однако вы могли бы использовать проект, созданный в Visual Studio/Visual Studio Code и т. д.), создали статическое веб-приложение в Azure, которое затем настроило для нас рабочий процесс GitHub Actions, автоматически создав и развернув наше приложение Blazor и функции Azure. Теперь у нас есть размещенное статически приложение с бессерверной внутренней частью, готовое к масштабированию с учетом наших требований.

Дополнительные ресурсы


Чтобы узнать больше о Blazor WebAssembly и .NET Functions в статических веб-приложениях, ознакомьтесь скраткими руководствами,соответствующим модулем Microsoft Learnи полной документацией постатическим веб-приложениям.

Оставить отзыв


Мы рады, что Blazor WebAssembly и .NET Functions теперь поддерживаются в статических веб-приложения Azure, и ждем не дождемся ваших работ с ними. Поделитесь с нами своими отзывами на сайтеGitHub.
Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru