HDA_with_Cpp
1.0.0
Этот репозиторий содержит HDA, основанный на HTMX (Frontend) и Drogon C ++ -структуре (Backend).
Цель состояла в том, чтобы создать отзывчивое «веб -приложение» без использования ни одного из обычных фреймворков JavaScript.
Идея этого проекта появилась во время чтения отличных систем гипермедиа. В нем авторы рассказывают об альтернативных способах написания modern веб -приложений. В отличие от большинства других книг по веб -разработке, авторы не полагаются на какую -либо фреймворк JavaScript, а вместо этого возвращаются к корням архитектуры гипермедиа, которая является самой the web .
Я также написал статью об этом проекте и моей общей мотивации использовать HTMX и C ++.
Вместо использования JavaScript для преодоления HTML, стратегия, которая в основном воспроизводит толстые клиенты 90ES, авторы используют htmx для его увеличения . Они делают это способным сделать больше , не возвращаясь к умным уловкам JavaScript. Конечно, JS не запрещен, и сам htmx зависит от него для своего собственного развития, но JS не виден, поскольку в этом нет никакой необходимости.
Нам не нужно использовать JS, чтобы заменить, казалось бы, «недостаточный» контроль гипермедиа, потому что HTMX здесь, чтобы расширить их. Это делает их способными делать больше , как изначально определено. Например, якорный тег ( <a> ) может быть «обновлен», чтобы он мог выполнять пост, положить, исправлять или даже удалять запросы. Тег <form> не обязательно должен быть единственным управлением гипермедиа для отправки данных с помощью запросов POST. Как насчет написания собственных элементов управления, которые могут сделать то же самое? Или, может быть, <form> S, которые могут исправить существующие записи на сервере? То, что обычно требует явного кода JS, теперь может быть сделано декларативно с помощью модернизированных контролей гипермедиа.
Вот пример из этого проекта. Две кнопки ( отмена и сохранение ), которые можно найти практически в каждом достаточно сложном веб -приложении.
< button hx-get =" /contacts "
hx-target =" #main "
hx-swap =" innerHTML " >
Cancel
</ button >
< button hx-post =" /contacts/{%contact.ID%}/edit "
hx-include =" input "
hx-target =" #main "
hx-swap =" innerHTML " >
Save
</ button >Хотите верьте, хотите нет, но эти два используют следующие функции:
<button> .И для его работы не потребовалось ни одной линии JavaScript. Вот как на самом деле является мощная архитектура гипермедиа.
Мы также используем _hyperscript, небольшую библиотеку для обработки событий и манипуляции с DOM. С ним мы можем слушать и отправлять события, манипулировать объектами DOM, не оставляя HTML.
Вот пример из этого проекта:
< button id =" edit-c " class =" btn btn-primary "
hx-get =" /contacts/{%c.ID%}/edit "
hx-target =" #main "
hx-swap =" innerHTML " > Edit </ button >
< button class =" btn btn-danger "
hx-delete =" /contacts/{%c.ID%}/delete "
hx-confirm =" Are you sure you wish to delete this contact? "
hx-target =" this "
hx-swap =" none "
_ =" on click remove #edit-c
then remove me "
> Delete </ button >
< button class =" btn btn-info "
hx-get =" /contacts "
hx-target =" #main "
hx-swap =" innerHTML " > Back </ button > Во втором управлении <button> у нас есть несколько бит _HyperScript, который выполняет следующее:
Окончательным результатом является удаление кнопок Edit и Delete . Остается только кнопка Back .
Вместо того, чтобы отправлять Jsons туда -сюда ( и каждый раз, когда они анализируют их в соответствии с какой -то внутренней логикой ), мы можем использовать HTML в соответствии с изначально разработанным: в качестве средства для значимых гипермедиа. Протокол HTTP существует из -за HTML, но в наши дни мы в основном переводим через него JSON. Это на самом деле не имеет смысла, потому что JSON не может транспортировать семантику применения, которая эффективно качает первоначальное значение Archiecture в Интернете клиента . Неудивительно, что нам нужны массивные фреймворки JS на нашем фронта, потому что наши серверы в основном являются просто поставщиками данных с API JSON. И JSON API не «спокойны».
Примерный бэкэнд -код книги записан в Python, и ее можно использовать вместо C ++. На самом деле, я пытался имитировать оригинальные API Python, чтобы не было никаких больших пробелов в понимании их обоих. Я писал код C ++, читая соответствующие главы.
Но поскольку htmx очень языковой агностик, нет проблем использования какого -либо языка, поэтому я использовал C ++. Это также хорошо с точки зрения обучения, так как это заставляет меня дважды проверить все.
Я думаю, что мы должны удалить раздувание не только с наших фронталов [ поместите здесь любые массивные рамки JS ], но и из наших бэкэндов [ поместите здесь любые массивные бэкэнд -структуру ]. Массовое программное обеспечение потребляет огромное количество времени и энергии. Человеческое время и энергия, а также циклы процессора и электричество.
Для достижения успеха необходимы несколько библиотек C ++. Этот проект использует VCPKG в качестве менеджера пакетов, но вместо этого вы можете выбрать любой другой.
Чтобы установить пакет, просто вызовите vcpkg install PACKAGE_NAME .
Необходимы следующие пакеты:
drogon
drogon[ctl]
fmt
argparse
brotli
zlib
openssl
sqlite3
soci[core]
soci[sqlite3]
Поиск их прост: vcpkg search PACKAGE_NAME
sudo apt install uuid-dev libcriterion-dev
Пользователям Windows придется сначала настроить среду MSYS. После установки выберите запись MSYS2 MINGW64 в меню «Пуск» Windows. Не используйте MSYS UCRT4 или любую другую запись!
В недавно открытое окно Bash введите эту команду, чтобы установить необходимые пакеты:
pacman -S git mingw-w64-x86_64-gcc mingw-w64-x86_64-cmake make mingw-w64-x86_64-c-ares mingw-w64-x86_64-jsoncpp mingw-w64-x86_64-openssl
Проверьте, доступен ли компилятор, с which g++ . Вы должны увидеть подобное сообщение:
$ which g++
/mingw64/bin/g++ Вам также понадобится редактор для обновления путей окружающей среды, поэтому установите ваш предпочтительный, например, pacman -Sy nano или pacman -Sy vim
Откройте свой .bash_profile с nano .$HOME/.bash_profile и добавьте эти три строки в конце файла:
PATH=/mingw64/bin: $PATH
export VCPKG_DEFAULT_TRIPLET=x64-mingw-static
export VCPKG_DEFAULT_HOST_TRIPLET=x64-mingw-static Сохраните и закройте файл. Перезагрузить его: source $HOME/.bash_profile или . ~/.bash_profile
Две триплетные записи понадобятся позже, чтобы поручить vcpkg использовать Mingw вместо компилятора Visual C ++ по умолчанию. И поскольку мы также хотим составить только статические библиотеки, мы объявляем об этом, используя static суффикс.
В отличие от других пакетов, Drogon не будет установлен с vcpkg . В настоящее время доступный пакет VCPKG THOWS ошибки компиляции, что является причиной, почему мы должны скомпилировать его вручную.
Клонировать источники Дрогона и подготовить среду сборки. Путь /c/bin/drogon от примера ниже приведен в качестве примера, приведенный ниже, должен быть адаптирован к вашим локальным настройкам. Корень этого пути ( /c/bin ) должен сопоставить к уже существующему пути в системе Windows, например C:/bin или любой другой путь по вашему выбору.
git clone https://github.com/drogonframework/drogon --recursive
mkdir drogon/build
cd drogon/build
cmake .. -G " MSYS Makefiles " -DCMAKE_INSTALL_PREFIX:PATH=/c/bin/drogon Теперь составьте Drogon с make -j и подождите, пока он не завершится.
Наконец, установите Drogon с make install .
Теперь вы должны увидеть список папок в C:/bin/drogon .
Вторым шагом является установка нескольких библиотек, которые будут связаны статически. Мы будем использовать vcpkg для составления их всех.
В том же окне Bash выпустите следующие команды для настройки vcpkg .
cd $HOME
git clone https://github.com/microsoft/vcpkg.git
cd vcpkg
./bootstrap-vcpkg.batУведомление:
If you pefer to install vcpkg files under different root path, change the first command "cd $HOME" from the script above.
For example: cd /c/Users/WINDOWS_USER_NAME
In MSYS Bash, the Windows file system is located under /c.
And your MSYS $HOME folder is located under "home" in your Windows MSYS root folder.
В папке vcpkg выпустите следующие команды для установки необходимых библиотек:
./vcpkg.exe install argparse
./vcpkg.exe install fmt
./vcpkg.exe install brotli
./vcpkg.exe install zlib
./vcpkg.exe install openssl
./vcpkg.exe install sqlite3
./vcpkg.exe install soci
./vcpkg.exe install soci[sqlite3] Теперь вы можете собрать этот проект через Poweshell с ./buildall.ps1 .
Но не забудьте изменить vcpkg_root в meson.build в первую очередь. Этот путь должен указывать на ранее клонированный репозиторий vcpkg .
Моя система сборки выбора - Meson, потому что Makefiles трудно поддерживать, и я просто не хочу учиться использовать CMake . Жизнь слишком коротка для пользовательского программного обеспечения.
Есть два сценария, buildall.sh (macos/linux) и buildall.ps1 (Windows). С этими двумя будут выполнены следующие шаги:
builddir ( только в Windows, в MacOS/Linux это будет сделано Meson )drogon_ctl , чтобы преобразовать CSP в исходные файлы C ++ и поместить их в src/viewssrcbuilddirТребуется компилятор C ++ 20. Я использую GNU C ++ V12.1.0.
Перед попыткой создать проект, пожалуйста, адаптируйте эти две переменные в файле meson.build :
triplet содержит информацию о хост-машине, например, x64-osx .
vcpkg_root - это корневая папка, содержащая пакеты, установленные vcpkg .
drogon_ctl будет использоваться Meson для преобразования шаблонов CSP в файлы C ++.
В Frontend используется библиотека HTMX и некоторые ресурсы Bootstrap для стиля. Не существует рукописного JavaScript, поскольку HTMX уже предоставляет responsive вещи, которые, как мы ожидаем, любое modern веб-приложение.
Бэкэнд основан на очень быстрой веб -структуре C ++ под названием Drogon .
Используемая база данных SQLITE3, но она может быть легко заменена любой другой базой данных SQL. Просто настройте класс src/database/db_mgr.cpp . Библиотека для доступа к SQLITE3 является SOCI, и она поддерживает многие другие бэкэнды базы данных. Корень этого проекта содержит файл sqlite3, demo.db , который приложение использует по умолчанию. Существует также доступный файл CSV, contacts.csv , который содержит несколько записей, которые можно использовать для заполнения новой таблицы.
controllers содержат классы, которые Дрогон использует для картирования вызовов клиентов с функциями в бэкэнге.database содержит небольшой класс обертки для доступа к экземпляру SQLite3.dtos содержит Data Transfer Objects , которые используются для данных данных между фронтом и бэкэнд.templates содержит CSP (страницы серверов C ++), которые представляют собой шаблоны, которые drogon_ctl использует для генерации источников C ++. Эти источники будут использоваться для создания HTML -выходов.views содержит сгенерированные Дрогоном классы C ++. Эти файлы не должны редактировать вручную . Они будут заменены на каждом сборке. Чтобы изменить их поведение или содержание, используйте CSP из папки templates . Тесты выполняются с помощью библиотеки критериев.
Критерий может быть установлен с помощью brew install criterion . В противном случае вы можете вручную построить его, как описано здесь.
Чтобы построить критерий с Meson , сначала клонируйте его репо:
git clone --recursive https://github.com/Snaipe/Criterion.gitЗатем выпустите следующие команды:
cd Criterion
meson - Dprefix = c: / bin / criterion build
ninja - C build installПрефикс каталога установки может быть изменен. После завершения установки установите путь к файлу DLL Criterion. Этот DLL будет использоваться с помощью тестовых исполнителей, которые имеют связанный критерий.
Источники испытаний этого проекта расположены в test и автоматически строятся Meson . Чтобы выполнить тесты, вы можете использовать эти два варианта:
PS > meson test - C .builddir
ninja: no work to do .
ninja: Entering directory ` .builddir '
ninja: no work to do.
1/1 basic OK 0.09s
Ok: 1
Expected Fail: 0
Fail: 0
Unexpected Pass: 0
Skipped: 0
Timeout: 0
Full log written to .builddirmeson-logstestlog.txtИли, непосредственно вызывая тест -исполняемый файл:
PS > .builddir test_demo_web_server.exe
[ ==== ] Synthesis: Tested: 1 | Passing: 1 | Failing: 0 | Crashing: 0 Веб -приложение начинается с загрузки index.html , который содержит тег div с id = "main" . На протяжении всего приложения этот тег будет использоваться другими элементами управления, чтобы динамически заменить его содержимое без каких -либо обновлений страницы. Однако, в отличие от других типичных modern веб -приложений, мы не используем фреймворки JS, такие как React или Angular, чтобы сделать приложение отзывчивым. Вместо этого мы используем htmx только в качестве нашей библиотеки сценариев.
Есть также три ресурса bootstrap , но это просто сделает приложение лучше. Bootstrap не является требованием и может быть заменена любой другой библиотекой или собственными таблицами стилей. То же самое относится и к jQuery , который включен в качестве зависимости начальной загрузки. Любая из этих библиотек может быть безопасно удалена, поскольку они не влияют на htmx или _hyperscript .
Веб-приложение общается с сервером стандартным способом для ответа на запрос. Но в отличие от многих других веб -приложений, JSON не используется. Вместо этого сервер отправляет только части HTML -кода, которые клиент использует для обновления текущего состояния приложения.
Серверная программа принимает два параметра для настройки IP и порта.
Usage: demo_web_server [options]
Optional arguments:
-h --help shows help message and exits [default: false]
-v --version prints version information and exits [default: false]
-i --ip-address Server IP Address [default: " 127.0.0.1 " ]
-p --port Port [default: 3000]
Вы также можете использовать включенный Drogon's config.json для управления поведением сервера. Поскольку Дрогон предлагает много вариантов, вы должны сначала ознакомиться с ним. Файл конфигурации в этом проекте содержит только несколько настройки.
Существует также отдельный файл конфигурации на основе JSON, server_config.json , который будет использоваться веб-сервером. В настоящее время он только определяет местоположение файла SQLite3, но в будущем будет расширен в будущем.
{
"database" : {
"type" : " sqlite3 " ,
"file" : " demo.db "
}
} Этот файл не следует путать с собственным JSON Drogon, который называется config.json .
Грань
