HDA_with_Cpp
1.0.0
このリポジトリには、HTMX（FrontEnd）およびDrogon C ++フレームワーク（バックエンド）に基づくHDAが含まれています。
目的は、通常のJavaScriptフレームワークを使用せずにレスポンシブ「Webアプリ」を作成することでした。
このプロジェクトのアイデアは、優れた本Hypermedia Systemsを読んでいる間に生じました。その中で、著者は、 modern Webアプリケーションを作成するための代替方法について話しています。 Web開発に関する他のほとんどの本とは異なり、著者はJavaScriptフレームワークに依存していませんが、代わりにthe web自体であるHyperMediaアーキテクチャのルーツに戻ります。
また、このプロジェクトと、HTMXとC ++を使用する私の一般的な動機についての記事も書きました。
JavaScriptを使用してHTMLを克服する代わりに、基本的に90ESの厚クライアントを再現する戦略である著者は、 htmxを使用してそれを増強します。彼らは、賢いJavaScriptのトリックに頼ることなく、それをもっとできるようにします。もちろん、JSは禁止されておらず、 htmx自体は独自の開発に依存していますが、JSは実際に必要とされていないため、表示されません。
HTMXが拡張するためにここにあるため、「JSを使用して「不十分」のハイパーメディアコントロールを置き換える必要はありません。それは彼らが最初に定義されたとおりにより多くのことをすることができるようにします。たとえば、アンカータグ（ <a> ）は、「アップグレード」して、リクエストを実行、配置、パッチ、または削除することさえできるようにすることができます。 <form>タグは、POSTリクエストを介してデータを送信するための唯一のハイパーメディアコントロールである必要はありません。まったく同じことができる独自のコントロールを書くのはどうですか？それとも、サーバー上の既存のエントリにパッチを当てることができる<form> s？通常、明示的なJSコードを要求するものは、アップグレードされたハイパーメディアコントロールで宣言的に行うことができます。
このプロジェクトの例は次のとおりです。ほぼすべての十分に複雑なWebアプリで見つけることができる2つのボタン（キャンセルと保存）。
< 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 >信じられないかもしれませんが、これら2つは次の機能を利用しています。
<button>コントロールに使用できないHTTP動詞を使用します。そして、それを機能させるためにJavaScriptの単一の行は必要ありませんでした。これは、実際にハイパーメディアアーキテクチャがどれほど強力かです。
また、イベント処理とDOM操作のための小さなライブラリである_hyperscriptも使用します。それを使用して、すべてHTMLを離れることなく、イベントを聞いて派遣したり、DOMオブジェクトを操作したりできます。
このプロジェクトの例は次のとおりです。
< 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 > 2番目の<button>コントロールには、次のことを行う_hyperscriptのいくつかのビットがあります。
最終結果は、ボタンのEditとDeleteの削除です。バックBackのみが残ります。
Jsonsを前後に送信する代わりに（および内部ロジックに従ってそれらを解析するたびに）、元々設計されたHTMLを使用することができます。意味のあるハイパーメディアアプリケーションの手段として。 HTTPプロトコルはHTMLのために存在しますが、最近ではJSONをその上に転送します。 JSONはアプリケーションセマンティクスを輸送できないため、実際には意味がありません。私たちのサーバーは主にJSON APIのデータプロバイダーにすぎないため、フロントエンドには大規模なJSフレームワークが必要なのも不思議ではありません。そして、JSON APIは「RESTFUL」ではありません。
本の例のバックエンドソースコードはPythonで記述されており、C ++の代わりに使用できます。実際、私は元のPython APIを模倣しようとしたので、両方の理解に大きなギャップがないはずです。それぞれの章を読んでいる間、私はC ++コードを書いていました。
しかし、 htmx非常に言語不可知論者であるため、言語をまったく使用することに問題はないため、C ++を使用しました。これは、学習の観点からも良いことです。これは、すべてを再確認するように強制するためです。
フロントエンド[ここに大規模なJSフレームワークを置く]だけでなく、[ここに大きなバックエンドフレームワークを置く]から膨満感を除去する必要があると思います。大規模なソフトウェアは、大量の時間とエネルギーを消費します。人間の時間とエネルギー、 CPUサイクルと電気。
コンピレーションを成功させるには、いくつかの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環境をセットアップする必要があります。インストール後、WindowsスタートメニューでMSYS2 MINGW64エントリを選択します。 MSYS UCRT4またはその他のエントリを使用しないでください！
新しく開かれたバッシュウィンドウで、このコマンドを入力して、必要なパッケージをインストールします。
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
デフォルトのビジュアルC ++コンパイラの代わりに、 vcpkg MINGWを使用するように指示するために、2つのトリプレットエントリが後で必要になります。また、静的ライブラリのみをコンパイルしたいので、 static接尾辞を使用して発表します。
他のパッケージとは異なり、ドロゴンはvcpkgでインストールされません。現在利用可能なVCPKGパッケージは、コンピレーションエラーを引き起こします。これが、手動でコンパイルする必要がある理由です。
ドロゴンのソースをクローンし、ビルド環境を準備します。以下の例から/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次に、ドロゴンをmake -jでコンパイルし、完了するまで待ちます。
最後に、 make installでDrogonをインストールします。
これで、 C:/bin/drogonにフォルダーのリストを表示する必要があります。
2番目のステップは、静的にリンクされるいくつかのライブラリのインストールです。 vcpkgを使用してすべてをコンパイルします。
同じバッシュウィンドウから、 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]これで、 ./buildall.ps1 buildall.ps1を使用してPoweshellを介してこのプロジェクトをコンパイルできます。
ただし、 meson.buildでvcpkg_root変更することを忘れないでください。このパスは、以前にクローン化されたvcpkgリポジトリを指す必要があります。
Makefiles維持が難しく、 CMake使用方法を学びたくないため、私の選択システムはMesonです。ライフはユーザーホッスルソフトウェアには短すぎます。
2つのスクリプト、 buildall.sh （macos/linux）とbuildall.ps1 （windows）があります。これらの2つでは、次の手順が実行されます。
builddirにコピーします（ Windows、MacOS/Linuxでのみ、これはMesonによって行われます）drogon_ctlを使用してCSPをC ++ソースファイルに変換し、 src/viewsに配置しますsrcのソースをコンパイルしますbuilddirに入れますC ++ 20コンパイラが必要です。 GNU C ++ V12.1.0を使用しています。
プロジェクトを構築しようとする前に、 meson.buildファイルにこれらの2つの変数を適応させてください。
tripletには、ホストマシンなどの情報がx64-osxです。
vcpkg_rootは、 vcpkgによってインストールされたパッケージを含むルートフォルダーです。
drogon_ctl 、CSPテンプレートをC ++ファイルに変換するためにMesonによって使用されます。
Frontendは、 HTMXライブラリとスタイリングにいくつかのBootstrapリソースを使用しています。 HTMXは、 modern Webアプリが提供するresponsiveものを既に提供しているため、手書きのJavaScriptが実行されていることはありません。
バックエンドは、 Drogonと呼ばれる非常に高速のC ++ Webフレームワークに基づいています。
使用中のデータベースはsqlite3ですが、他のSQLデータベースに簡単に置き換えることができます。 src/database/db_mgr.cppクラスを調整するだけです。 SQLite3にアクセスするライブラリはSOCIであり、他の多くのデータベースバックエンドをサポートしています。このプロジェクトのルートには、アプリがデフォルトで使用するSqlite3ファイルdemo.dbが含まれています。また、新しいテーブルの入力に使用できるいくつかのエントリが含まれるCSVファイル、 contacts.csvもあります。
controllersには、ドロゴンが使用するクラスが含まれており、クライアントコールをバックエンド内の関数にマッピングします。databaseは、SQLite3インスタンスにアクセスするための小さなラッパークラスが含まれています。dtosは、FrontEndとバックエンドの間のデータタンスファーに使用されるData Transfer Objectsが含まれています。templatesは、 drogon_ctl C ++ソースを生成するために使用するテンプレートであるCSP（C ++サーバーページ）が含まれています。これらのソースは、HTML出力の作成に使用されます。viewsドロゴン生成のC ++クラスが含まれています。これらのファイルを手動で編集しないでください。それらはすべてのビルドで交換されます。動作または内容を変更するには、代わりにtemplatesフォルダーからCSPを使用します。 テストはCriterionライブラリで行われます。
brew install criterion Criterionを介してインストールできます。それ以外の場合は、ここで説明するように手動で構築できます。
Mesonで基準を構築するには、最初にそのレポをクローンします。
git clone --recursive https://github.com/Snaipe/Criterion.git次に、次のコマンドを発行します。
cd Criterion
meson - Dprefix = c: / bin / criterion build
ninja - C build installインストールディレクトリのプレフィックスを変更できます。インストールが完了したら、CriterionのDLLファイルへのパスを設定します。このDLLは、基準がリンクされているテスト実行可能ファイルによって使用されます。
このプロジェクトのテストソースはtestにあり、 Mesonによって自動的に構築されています。テストを実行するには、これら2つのオプションを使用できます。
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 Webアプリケーションは、ID = "Main"のdivタグを含むindex.htmlロードすることから始まります。アプリ全体で、このタグは他のコントロールによって使用され、ページリフレッシュなしでコンテンツを動的に置き換えます。ただし、他の典型的なmodern Webアプリとは異なり、ReactやAngularなどのJSフレームワークを使用してアプリに応答します。代わりに、Scriptingライブラリとしてhtmxのみを使用します。
また、3つのbootstrapリソースが関係していますが、これはアプリの見栄えを良くするだけです。ブートストラップは要件ではなく、他のライブラリまたは独自のスタイルシートに置き換えることができます。同じことが、ブートストラップ依存関係として含まれるjQueryにも当てはまります。これらのライブラリは、 htmxまたは_hyperscriptに影響を与えないため、安全に削除できます。
Webアプリは、標準のリクエスト応答ファッションでサーバーと通信します。しかし、他の多くのWebアプリとは異なり、JSONは使用されていません。代わりに、サーバーは、クライアントが使用するHTMLコードのピースのみを送信して、アプリの現在の状態を更新します。
サーバープログラムは、IPとポートを設定するための2つのパラメーターを受け入れます。
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のconfig.json使用して、サーバーの動作を制御することもできます。ドロゴンはたくさんのオプションを提供しているので、まず自分自身を慣れさせるべきです。このプロジェクトの構成ファイルには、いくつかの設定のみが含まれています。
また、Webサーバーが使用する別のJSONベースの構成ファイル、 server_config.jsonも存在します。現在、SQLite3ファイルの場所のみを定義していますが、将来拡張されます。
{
"database" : {
"type" : " sqlite3 " ,
"file" : " demo.db "
}
}このファイルは、 config.jsonという名前のドロゴン自身のJSONと混同しないでください。
mit
