Быстрый старт с HTMX 2.0. Знакомство с гипермедийными системами на основе современной серверной платформы ASP.NET Core.

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

Введение

Я учел недостатки своей первой публикации и представляю вашему вниманию свою новую, как я надеюсь, более полезную для Вас статью. В этой статье вы сможете познакомится с разработкой приложения, ориентированного на гипермедиа, на основе платформы ASP.NET Core. Вы создадите и запустите свое первое пробное веб-приложение, разработанное на основе HTMX версии 2.0. Статья посвящена знакомству с последней версией библиотеки Htmx.js и платформой ASP.NET Core 8.0. В статье весь процесс будет показан пошагово, чтобы Вам проще было понять, как строится MVC приложение, ориентированное на эту новую технологию. При этом будут опущены некоторые детали, не критичные для данного этапа.

Теперь эта статья рассчитана на широкий круг читателей, как имеющих опыт разработки веб приложений на основе платформы ASP.NET Core и имеющих знания языка программирования C#, так и вообще всех желающих, кто хочет познакомится с гипермедийными системами на основе библиотеки Htmx.js. Для этого я представлю Вам в этой статье самые простейшие примеры и ссылки на наиболее полезные книги для начинающих веб-разработчиков. Сама библиотека Htmx.js очень легко осваивается. Я считаю, что по этой статье практически любой желающий сможет легко познакомится, а потом похвастаться, что он тоже знает "этот ваш новый HTMX".

Гипермедийные системы

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

Начнем с самого простого примера, с гиперссылки. Возьмем простой тег якоря, встроенный в более крупный HTML-документ. Этот элемент является гиперссылкой на другой документ.

Листинг: Простая гиперссылка

<a href="http://www.yandex.ru/">
  Яндекс
</a>

Тег якоря состоит из самого тега <a></a>, атрибута href и внутреннего наполнения. Обратите внимание на атрибут href. Этот атрибут задает гипертекстовую ссылку на другой документ. Именно этот атрибут делает тег якоря элементом управления гипермедиа.

При щелчке по такому элементу браузер производит HTTP GET запрос на адрес в атрибуте href. Браузер можно назвать гипермедиа клиентом. Затем сервер отвечает на этот запрос ответом гипермедиа - HTML - новой страницей. Клиент и сервер взаимодействуют через гипермедиа.

Ну а теперь пример представляю Вам пример первого гипермедийного элемента. Посмотрим на реализацию простой кнопки на базе HTML с использованием библиотеки Htmx.js.

Листинг: Простая кнопка на основе HTMX

<button hx-get="/message" hx-target="#message">
  Получить сообщение
</button>
<div id="message">
</div>

Эта кнопка также снабжена атрибутом. Однако нет никаких явных сценариев JavaScript поддержки работы этой кнопки. Вместо этого есть декларативный атрибут, подобный href в предыдущем примере. Атрибут hx-get сообщает htmx следующее: “Когда будет нажата эта кнопка, выдать HTTP GET запрос к /message”. А второй атрибут hx-target сообщает htmx: “Когда придет ответ с сервера, взять полученный HTML и поместить его внутрь элемента с идентификатором message”.

Ожидается, что HTTP-ответ от сервера будет в формате HTML примерно таким, как в следующем листинге.

Листинг: Пример ответа с сервера

Привет, Гипермедиа!

Этот небольшой фрагмент HTML будет вставлен внутрь элемента дерева DOM с идентификатором message. В результате манипуляций библиотеки Htmx.js с деревом DOM нашей страницы будет получен результат, представленный на следующем листинге.

Листинг: Результат нажатия по кнопке

<button hx-get="/message" hx-target="#message">
  Получить сообщение
</button>
<div id="message">
  Привет, Гипермедиа!
</div>

Как вы видите, после нажатия по кнопке внутрь элемента с идентификатором message было просто вставлено содержимое ответа с сервера. Эта кнопка на базе Htmx.js обменивается гипермедиа с сервером точно так же, как и гиперссылка. Она по-прежнему использует базовую гипермедийную модель Интернета. А библиотека Htmx.js добавляет этой кнопке функциональность. Эта функциональность дополняет HTML как гипермедиа. Htmx производит расширение гипермедийной системы Интернета, а не заменяет ее совершенно другой архитектурой.

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

Быстрый старт

Данная часть предназначена прежде всего для начинающих разработчиков, не знакомых как с платформой ASP.NET, так и вообще со средой разработки Visual Studio. Если эти вещи вам уже знакомы, вы можете перейти к следующей части статьи, с созданием пробного приложения.

Установка среды разработки

Хотя статья фокусируется прежде всего на разработке гипермедийных систем на основе HTMX, но сама по себе она не способна работать, а работает внутри любого обычного веб приложения. Хотя платформа и набор технологий может быть любым, в этой книге рассматривается серверная платформа ASP.NET Core. Для разработки приложения мы будем использовать бесплатную среду разработки Visual Studio 2022 Community Edition.

Скачать и установить среду разработки можно с этого адреса в Интернет: https://visualstudio.microsoft.com/. Необходимо выбрать компонент для установки “ASP.NET и разработка веб-приложений” на вкладке рабочие нагрузки. 

Нажмите кнопку “Установить” и выбранные компоненты будут скачаны и установлены инсталлятором на ваш компьютер. После установки рекомендуется перезагрузить компьютер. Также необходимо скачать и установить пакет разработки .NET SDK, если он не был автоматически установлен. 

Установка .NET SDK

Инсталлятор среды разработки Visual Studio сам установит необходимый пакет разработки последней версии, но нужно проверить установленную версию и версию, для правильной работы примеров из этой книги. В этой книге примеры написаны на версии 8.0.303.

Для установки пакета разработки .NET SDK необходимо проследовать по следующему адресу в Интернет: https://dotnet.microsoft.com/en-us/download/dotnet/8.0, скачать и установить версию .NET SDK 8.0, если она еще не была установлена. Для проверки установленной версии пакета разработки необходимо ввести следующую команду в консоли PowerShell:

dotnet --list-sdks

Вот пример вывода результата ввода команды в операционной системе Windows, которая показывает, что нужный пакет установлен в системе:

8.0.303 [C:\Program Files\dotnet\sdk]

Также на вашем компьютере может быть установлено несколько пакетов разработки, и в этом случае вывод может быть таким:

5.0.408 [C:\Program Files\dotnet\sdk]
6.0.203 [C:\Program Files\dotnet\sdk]
7.0.100 [C:\Program Files\dotnet\sdk]
8.0.101 [C:\Program Files\dotnet\sdk]
8.0.303 [C:\Program Files\dotnet\sdk]

Нужно проконтролировать что установлен пакет разработки обязательно версии 8.0.3*, остальные две цифры не важны. 

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

Создание пробного приложения

Создадим новый проект в среде разработки Visual Studio. В статье мы будем использовать наполненный начальными образцами стартовый проект. Выберите пункт меню “Создать” в главном меню “Файл” - далее подпункт “Проект...”. Откроется окно “Создание проекта”. Отфильтруйте список проектов по параметрам “C#”, “Windows” и “Веб” и выберите из списка проектов проект “Веб-приложение ASP.NET Core (модель-представление-контроллер)”. 

Дайте название новому проекте HelloHypermedia. Оставьте такое-же имя названию решения. Оставьте снятой галку “Поместить решение и проект в одном решении”. Нажмите кнопку “Далее” чтобы продолжить. На следующей странице оставьте все установленные параметры без изменения и нажмите кнопку “Создать”.

Среда разработки создаст пустой проект. В окне “Обозреватель решений” будет показаны элементы и файлы этого нового проекта. Это обычная структура стандартного проекта ASP.NET Core на основе шаблона MVC проекта. Вы можете запустить приложение нажав в пункте “Начать отладку” главного меню “Отладка” или нажмите кнопку на клавиатуре “F5”. Будет запущен ваш интернет-браузер и в нем показана главная страница с приветствием, как на следующем скриншоте.

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

Подготовка

Весь смысл использования платформы для веб приложений заключается в построении и отображении динамических выходных данных. В MVC это работа контроллера – создать некоторые данные и передать их представлению, которое отвечает за то, чтобы представить их в виде HTML.

Использованием гипермедийной системы мы можем интерактивно запросить данные с контроллера и обновить отображаемую в браузере страницу. Давайте добавим первый элемент, который после нажатия по нему будет отображать приветственное сообщение на странице.

Вначале нам необходимо добавить использование библиотеки Htmx.js в файл шаблона визуальных представлений Views/Shared/_Layout.cshtml. Найдите в папке Views подпапку Shared и откройте в ней файл _Layout.cshtml. Добавьте в этот файл представленную на следующем листинге строку в конец раздела <head>. Строка отмечена комментарием.

Листинг: Шаблон визуальное представлений Views/Shared/_Layout.cshtml.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - HelloHypermedia</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/HelloHypermedia.styles.css" 
      asp-append-version="true" />
    @* Добавить следущую строку импорта библиотеки Htmx.js *@
    <script src="https://unpkg.com/htmx.org@2.0.2"></script> 
</head>
<body>
    …
</body>
</html>

Для краткости код в блоке <body> не показан.

Этой строкой <script src="https://unpkg.com/htmx.org@2.0.2"></script> мы добавляем в визуальное представление использование библиотеки поддержки гипермедийных систем Htmx.js. Браузер на основе этой строки скачает и будет использовать файл библиотеки с сервера unpkg.com. Для примера этой статьи способ импорта библиотеки несущественен. В данном примере для упрощения мы используем прямую ссылку на глобальную сеть доставки npm пакетов, в других статьях я буду использовать другой способ.

Первый гипермедийный элемент мы будем добавлять на главную страницу приложения. Найдите в папке View и в подпапке Home файл Index.cshtml и замените его содержимое начальным наполнением из следующего листинга.

Листинг: Изначальное наполнение главной страницы Views/Home/Index.cshtml.

@{
    ViewData["Title"] = "Знакомство";
}

<div class="text-center">
    <h3>Знакомство с гипермедийными системами на ASP.NET Core 8.0</h3>
    <p>Приложение к статье. Текст статьи расположен на 
      <a href="https://habr.com/ru/articles/846850/">Хабре</a>.
    </p>
</div>

<div>
</div>

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

Первая гипермедийная система

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

Добавьте новые элементы в визуальное представление Index.cshtml, как на следующем листинге. В листинге комментариями выделены блоки, которые необходимо добавить.

Листинг: Визуальное представление Index.cshtml с гипермедийной кнопкой.

@{
    ViewData["Title"] = "Знакомство";
}

<div class="text-center">
    <h3>Знакомство с гипермедийными системами на ASP.NET Core 8.0</h3>
    <p>Приложение к статье. Текст статьи расположен на 
        <a href="https://habr.com/ru/articles/844932/">Хабре</a>.</p>
</div>

<div>
    @* Добавить гипермедийную кнопку *@
    <button class="btn btn-success"
            hx-get="/home/message" 
            hx-target="#message">
        Получить сообщение
    </button>
    @* Добавить элемент отображения сообщения *@
    <div id="message">
    </div>
</div>

Так мы добавляем кнопку гипермедийной системы, которая будет осуществлять GET-запрос по указанному адресу и вставлять в элемент ниже себя с идентификатором message результат выполнения запроса.

В контроллер Home нужно добавить новый метод поддержки этой гипермедийной системы Message(), который в качестве результата должен возвращать приветственное сообщение. Откройте в папке Controllers файл HomeController.cs и произведите в нем изменения как в следующем листинге. Удалите лишние методы и добавьте вместо них один новый с именем Hello().

Листинг: Класса HomeController с методом поддержки гипермедийной системы

using Microsoft.AspNetCore.Mvc;

namespace HelloHypermedia.Controllers;

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    // Заменить все лишние методы этим новым методом с приветственным сообщением
    public string Message()
    {
        return "Привет, гипермедиа!";
    }
}

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

Запустите приложение на выполнение и кликните по кнопке. Вы должны увидеть представленный на следующих скриншотах результат. В верхней части следующей иллюстрации скриншот страницы до нажатия кнопки, а в нижней части - после ее нажатия.

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

На этом месте я Вас хочу поздравить! Вы успешно справились с разработкой пробного приложения. На этом знакомство с гипермедийными системами завершено.

Продолжение

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

1. Добавить отображение не просто приветственного сообщения, а отображение текущего времени, например с помощью DateTime.Now.

2. Изменить отображение приветственного сообщения не ниже, в другом элементе, а прямо внутри кнопки, если убрать атрибут hx-target.

3. Самостоятельно реализовать счетчик с помощью нового гипермедийного элемента и статического поля в классе HomeController.

Предлагаю Вам попробовать реализовать эти элементы самостоятельно для закрепления полученных начальных знаний по гипермедийным системам на платформе ASP.NET Core.

Заключение

В этой статье вы установили среду разработки и создали свой первый пробный проект. В этом проекте вы создали свой первый гипермедийный элемент в виде кнопки. Вы получили первое представление о платформе ASP.NET Core и познакомились с гипермедийными системами.

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

Рекомендую для получения более подробных сведений по гипермедийным системам обратиться к первоисточнику по информации об этой замечательной технологии, к книге Карсона Гросса “Hypermedia-разработка. Htmx и Hyperview” с примерами на на языке программирования Python и веб фреймворке Flask. 

Начинающим разработчикам, кто не знаком с платформой ASP.NET Core, рекомендую прочесть книгу Еврегия Умрихина "Разработка веб-приложений с помощью ASP.Net Core MVC".

А тем, кто вообще не знаком с языком программирования C#, я посоветую для изучения этого языка книгу Михаила Фленова “Библия C#” последнего издания.

Вы без труда найдете эти достаточно популярные книги в интернет-магазинах. Полученные начальные знания по гипермедийным системам обязательно Вам пригодятся в дальнейшем изучении библиотеки Htmx.js по другим материалам из других источников. Возможно Вас заинтересуют и другие мои статьи на тему HTMX на площадке Хабр, которые я планирую далее выпустить. Я буду очень рад, если материал этой статьи оказался вам понятен, полезен и пригодится в дальнейшем изучении гипермедийных систем. Если это не так, я буду всегда рад конструктивной критике и замечаниям в комментариях к данной статье. Вместе с Вами мы исправим все ошибки этой статьи и доведем ее до идеального состояния. А я желаю Вам всяческих успехов в получении новых знаний и надеюсь, что вы получили новые знания от прочтения моей статьи.

Приложение

Как приложение к этой статье я представляю Вам ссылку на свой репозиторий с примером приложения из этой статьи.

Репозиторий HelloHypermedia на GitHub