Разработка сайта на WebAssembly с помощью NetCore 3 и Blazor

Мое мнение, что WebAssembly будущее интернета. Данная технология на текущий момент уже интегрирована в большинство современных браузерах (а точнее в их движках) на ПК и мобильных устройствах. В таких браузерах как Chrome, Edge, Firefox, и WebKit.

В данной статье я опишу как начать разработку сайта WebAssembly в Visual Studio. Статья подойдет для тех, кто хотел бы понять, как начать разрабатывать SPA приложения без использования JavaScript, зная только asp.net mvc, c#, верстку html и css.

На момент выхода статьи фреймворк NetCore 3 находится в стадии RC1, а Blazor имеет версию 3.0.0-preview9.19457.4. Релиз NetCore 3 запланирован на сентябрь 2019. Что относительно Blazor то его релиз обещают позднее в ноябре 2019 года, скорее всего после релиза NetCore 3.1

Оглавление:

• I Установка
• II Создание проекта WebAssembly из шаблона
• III Структура решения
• IV Запуск и отладка WebAssembly blazor
• V Размеры файлов и linker
• VI Публикация и LazyLoading, библиотеки элементов
• VII Выводы

I Установка (обязательно ставьте актуальную версию, после ноября 2019 скорее всего релиз)

1. Visual Studio preview — visualstudio.microsoft.com/ru/vs/preview
2. Blazor template — devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-release-candidate-1

II Создание проекта WebAssembly из шаблона

1. Открываем VS preview 16.3 preview 4
   
   
2. Создаем новый проект. Выбираем шаблон «Приложение Blazor» и указываем тип WebAssembly.
   
   
   Процесс создания в картинках

   
   
   
   
   
   
   
   

III Структура решения

Как можно заметить решение по умолчанию состоит их 3 проектов:

• Это проект Client, который содержит в себе файлы html, css, картинки и т.п. Все что будет загружено клиентом (frontend). Так же в Client проекте содержится код для формирования пакета WebAssemly.
• Server в данном проекте содержится код сервисов к которым обращается клиент для получения информации (backend). В примере реализовано получение информации о погоде.
• Shared используется для хранения общих моделей данных для первых двух проектов.
  
  

IV Запуск и отладка WebAssembly blazor

1. Установим две точки остановки. Одну в коде клиентского приложения, вторую в серверном коде сервиса. Сразу можно отметить что событие кнопки onclick вызывает код C#, а не JavaScript. По серверному коду сервиса ничего необычного нет.
   
   
2. Запустим решение в режиме сборки debug. После удачной сборки откроется браузер и загрузится сайт основанный на webassembly
   
   
3. Попробуем перейти в раздел «Fetch data». Данный раздел содержит код осуществляющий запрос к backend. Как только мы попробуем перейти в этот раздел сразу сработает заранее установленный breakpoint в контроллере сервиса. Поведение стандартное, ничего нового. Продолжим выполнение кода
   
   
4. Теперь перейдем в раздел «Counter». Здесь реализован код, который полностью выполняется на клиенте. Нажав на кнопку «click me», мы получим неожиданный результат. Код отработает (прибавив к current count 1), но установленный breakpoint в коде не сработает.
   
   
5. Дело в том, что отладка клиентского приложения, основанного на webassembly происходит в браузере. Так же как отладка JavaScript. Для этого необходимо нажать shift+alt+D в окне с запущенным сайтом. Но есть несколько условий.
   Браузер должен иметь прямую связь с запущенной visual studio. Для этого Chrome должен быть запущен в режиме debugging с доступом к api браузера через определенный порт.
   Скопируйте предложенную строку для запуска браузера. Закройте все окна браузера. И выполните ранее скопированную строку.
   
   
6. Запустите отладку заново. Если вы попытаетесь отлаживать в chrome клиентское приложение, открытое несколько раз, то получите сообщение об ошибке. Оставьте только одну открытую вкладку с сайтом и только одну вкладку отладки.
   
   
7. На вкладке отладки, в структуре файлов вы увидите файлы, находящиеся на вашем диске. Там, где находится исходный код. Теперь перейдя в файл «Counter.razor» мы можем установить точку остановки в процедуре, вызываемой по событию onclick. При нажатии на кнопку «Click me» сработает точка остановки, нам будет доступен call stack и просмотр значений переменных
   
   

V Размеры файлов и linker

1. Как мы видим на примере размеры загружаемых данных сайта достаточно небольшие 2.4MB (после распаковки на клиенте 5.4MB). При первой загрузке сайта происходит загрузка требуемых DLL для работы сайта (пример как загрузка JS библиотек), в последствии они повторно не перезагружаются, а используются из кеша браузера.
   
   
2. Так же следует обратить внимание на то что используется linker. Это позволяет уменьшить размер итоговых dll файлов, то есть из файлов автоматически вырезаются неиспользуемые коде функции.
   
   Например, System.Text.Json.dll из 288КБ стал размером 114 КБ, а System.Memory.dll из 146КБ стал 58.5КБ. Это обеспечивается и за счет работы linker’а и так же за счет сжатия передаваемых файлов.
   
   Так же данный процесс можно настраивать вручную docs.microsoft.com/ru-ru/aspnet/core/host-and-deploy/blazor/configure-linker?view=aspnetcore-3.0
   
   

VI Публикация и LazyLoading, библиотеки элементов

1. Публиковать сайт, основанный на webassembly, можно через IIS или механизмы ASP.NET Core. Подробнее по ссылке.
2. Хотя сама технология WebAssembly и позволяет загружать wasm файлы по требованию developers.google.com/web/updates/2018/04/loading-wasm.
   На текущий момент в blazor нет возможности загружать dll (компоненты wasm) в зависимости от потребностей конкретной страницы. То есть все компоненты будут загружены при первом доступе к сайту.
   
   Рекомендация одна — «Не используйте сложные библиотеки для реализации простой функции, которую вы напишите в три строчки кода». Не наследуйте в клиентском приложении 100+МБ dll ради возможности простой реализации логирования (нежелания написать 5 строк кода самостоятельно).
   
   Хорошая новость в том что, модульную загрузку обещают реализовать в версии core 3.1
3. Если вы любите использовать готовые компоненты для реализации сайтов то для blazor уже подоспели такие коллекции известных фирм как telerik, devexpress или например бесплатный пакет www.matblazor.com

VII Выводы

• Технология weassambly на данный момент уже можно полноценно использовать в разработке сайтов.
• Для комфортной работы с blazor для интернет проектов требуется LazyLoading. Который обещают добавить в ближайшем будущем
• Если проект внутрисетевой, то использование blazor в новых разработках будет только приветствоваться. Не стоит в данном ключе обсуждать что конечные ПК внутренней сети могу быть с медленным доступом, это решается использованием тонкого клиента RDP.
• ASP.NET Core 3 + blazor – это то куда следует развиваться разработчику c#
• Считаю, что данная технология приведет к полному отказу в будущем от javascript, но это мое личное мнение.