HDA_with_Cpp
1.0.0
Repositori ini berisi HDA berdasarkan HTMX (Frontend) dan Drogon C ++ Framework (backend).
Tujuannya adalah untuk membuat "aplikasi web" yang responsif tanpa menggunakan kerangka kerja JavaScript yang biasa.
Gagasan untuk proyek ini datang saat membaca buku Hypermedia yang luar biasa. Di dalamnya, penulis berbicara tentang cara alternatif untuk menulis aplikasi web modern . Tidak seperti kebanyakan buku lain tentang pengembangan web, penulis tidak mengandalkan kerangka JavaScript apa pun, tetapi kembali ke akar arsitektur Hypermedia yang merupakan the web itu sendiri.
Saya juga menulis artikel tentang proyek ini dan motivasi umum saya untuk menggunakan HTMX dan C ++.
Alih-alih menggunakan JavaScript untuk mengatasi HTML, strategi yang pada dasarnya mereproduksi klien tebal dari 90E, penulis menggunakan htmx untuk menambahnya . Mereka membuatnya mampu melakukan lebih banyak tanpa jatuh kembali ke trik JavaScript yang cerdas. Tentu saja, JS tidak dilarang dan htmx sendiri bergantung pada itu untuk pengembangannya sendiri, tetapi JS tidak terlihat karena tidak ada kebutuhan aktual untuk itu.
Kami tidak perlu menggunakan JS untuk menggantikan kontrol hypermedia yang tampaknya "tidak mencukupi", karena HTMX ada di sini untuk memperpanjangnya. Itu membuat mereka mampu melakukan lebih banyak seperti yang ditentukan awalnya. Tag jangkar ( <a> ), misalnya, dapat "ditingkatkan" sehingga dapat menjalankan postingan, menempatkan, patch, atau bahkan menghapus permintaan. Tag <form> tidak harus menjadi satu -satunya kontrol hypermedia untuk mengirim data melalui permintaan pos. Bagaimana kalau menulis kontrol Anda sendiri yang dapat melakukan hal yang persis sama? Atau mungkin <form> Men form> yang dapat menambal entri yang ada di server? Apa yang biasanya menuntut kode JS eksplisit sekarang dapat dilakukan secara deklaratif dengan kontrol hypermedia yang ditingkatkan .
Inilah contoh dari proyek ini. Dua tombol ( Batal & Simpan ) yang dapat ditemukan di hampir setiap aplikasi web yang cukup kompleks.
< 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 >Percaya atau tidak, tetapi keduanya menggunakan fungsionalitas berikut:
<button> .Dan tidak ada satu baris pun dari JavaScript yang diperlukan untuk membuatnya bekerja. Ini adalah seberapa kuat arsitektur hypermedia sebenarnya.
Kami juga menggunakan _HyPerscript, perpustakaan kecil untuk penanganan acara dan manipulasi DOM. Dengan itu, kita dapat mendengarkan dan mengirim acara, memanipulasi objek DOM, semua tanpa meninggalkan HTML.
Berikut contoh dari proyek ini:
< 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 > Dalam kontrol <button> kedua kami memiliki beberapa bit _hyperscript yang melakukan berikut:
Hasil akhirnya adalah penghapusan tombol Edit dan Delete . Hanya tombol Back yang tersisa.
Alih -alih mengirim Jsons bolak -balik ( dan setiap kali menguraikannya sesuai dengan beberapa logika internal ), kita dapat menggunakan HTML seperti yang dirancang awalnya: sebagai kendaraan untuk aplikasi hypermedia yang bermakna. Protokol HTTP ada karena HTML, tetapi akhir -akhir ini kami sebagian besar mentransfer JSON di atasnya. Ini sebenarnya tidak masuk akal, karena JSON tidak dapat mengangkut semantik aplikasi, yang secara efektif melumpuhkan makna asli dari archiecture-server-server web. Tidak heran kami membutuhkan kerangka kerja JS besar -besaran di frontend kami, karena server kami sebagian besar hanya penyedia data dengan API JSON. Dan JSON API tidak "tenang".
Contoh Kode Sumber Backend Buku ditulis dalam Python dan dapat digunakan sebagai pengganti C ++. Bahkan, saya telah mencoba meniru API Python asli, sehingga seharusnya tidak ada celah besar dalam memahami mereka berdua. Saya sedang menulis kode C ++ saat membaca bab masing -masing.
Tetapi karena htmx sangat agnostik bahasa, tidak ada masalah menggunakan bahasa apa pun, jadi saya menggunakan C ++. Ini juga bagus dari perspektif pembelajaran karena memaksa saya untuk memeriksa semuanya.
Saya pikir kita harus menghapus kembung tidak hanya dari frontend kita [ menempatkan kerangka kerja JS besar -besaran di sini ], tetapi juga dari backends kita [ menempatkan kerangka backend besar di sini ]. Perangkat lunak besar mengkonsumsi sejumlah besar waktu dan energi. Waktu dan energi manusia serta siklus CPU dan listrik.
Beberapa perpustakaan C ++ diperlukan agar kompilasi berhasil. Proyek ini menggunakan VCPKG sebagai manajer paketnya, tetapi Anda bebas memilih yang lain sebagai gantinya.
Untuk menginstal paket, cukup panggil vcpkg install PACKAGE_NAME .
Paket berikut diperlukan:
drogon
drogon[ctl]
fmt
argparse
brotli
zlib
openssl
sqlite3
soci[core]
soci[sqlite3]
Pencarian mereka mudah: vcpkg search PACKAGE_NAME
sudo apt install uuid-dev libcriterion-dev
Pengguna Windows harus mengatur lingkungan MSYS terlebih dahulu. Setelah instalasi, pilih entri MSYS2 MINGW64 di Menu Start Windows. Jangan gunakan MSYS UCRT4 atau entri lainnya!
Di jendela bash yang baru dibuka, masukkan perintah ini untuk menginstal paket yang diperlukan:
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
Periksa apakah kompiler tersedia dengan which g++ . Anda harus melihat pesan seperti ini:
$ which g++
/mingw64/bin/g++ Anda juga membutuhkan editor untuk memperbarui jalur lingkungan, jadi instal yang Anda sukai, misalnya pacman -Sy nano atau pacman -Sy vim
Buka .bash_profile Anda dengan nano .$HOME/.bash_profile dan tambahkan tiga baris ini ke akhir file:
PATH=/mingw64/bin: $PATH
export VCPKG_DEFAULT_TRIPLET=x64-mingw-static
export VCPKG_DEFAULT_HOST_TRIPLET=x64-mingw-static Simpan & tutup file. Muat ulang dengan: source $HOME/.bash_profile atau . ~/.bash_profile
Dua entri triplet akan diperlukan nanti untuk menginstruksikan vcpkg untuk menggunakan MINGW sebagai ganti kompiler visual C ++ default. Dan karena kami juga ingin mengumpulkan pustaka statis saja, kami mengumumkannya dengan menggunakan akhiran static .
Tidak seperti paket lain, Drogon tidak akan diinstal dengan vcpkg . Paket VCPKG yang saat ini tersedia bahwa kesalahan kompilasi, yang merupakan alasan mengapa kami harus mengkompilasinya secara manual.
Kloning sumber Drogon dan persiapkan lingkungan pembangunan. Jalur /c/bin/drogon dari contoh di bawah ini harus disesuaikan dengan pengaturan lokal Anda. Akar jalur ini ( /c/bin ) harus memetakan ke jalur yang sudah ada di sistem Windows, misalnya C:/bin atau jalur lain yang Anda pilih.
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 Sekarang kompilasi drogon dengan make -j dan tunggu sampai selesai.
Terakhir, instal drogon dengan make install .
Anda sekarang harus melihat daftar folder di C:/bin/drogon .
Langkah kedua adalah pemasangan beberapa perpustakaan yang akan ditautkan secara statis. Kami akan menggunakan vcpkg untuk mengkompilasi semuanya.
Dari jendela bash yang sama, keluarkan perintah berikut untuk mengatur vcpkg .
cd $HOME
git clone https://github.com/microsoft/vcpkg.git
cd vcpkg
./bootstrap-vcpkg.batMelihat:
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.
Dari folder vcpkg , keluarkan perintah berikut untuk menginstal pustaka yang diperlukan:
./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] Sekarang Anda dapat mengkompilasi proyek ini melalui Poweshell dengan ./buildall.ps1 .
Tapi, jangan lupa untuk mengubah vcpkg_root di meson.build terlebih dahulu. Jalur ini harus menunjuk pada repositori vcpkg yang sebelumnya dikloning.
Sistem pilihan saya adalah meson, karena Makefiles sulit dipelihara dan saya tidak ingin belajar cara menggunakan CMake . Hidup terlalu singkat untuk perangkat lunak pengguna-hostil.
Ada dua skrip, buildall.sh (macOS/linux) dan buildall.ps1 (windows). Dengan dua ini langkah -langkah berikut akan dieksekusi:
builddir ( hanya di windows, di macOS/linux ini akan dilakukan oleh meson )drogon_ctl untuk mengonversi CSP menjadi file sumber C ++ dan masukkan ke src/viewssrcbuilddirDiperlukan kompiler C ++ 20. Saya menggunakan GNU C ++ V12.1.0.
Sebelum mencoba membangun proyek, silakan beradaptasi, dua variabel ini dalam file meson.build :
triplet membawa informasi tentang mesin host, misalnya x64-osx .
vcpkg_root adalah paket yang berisi root folder yang diinstal oleh vcpkg .
drogon_ctl akan digunakan oleh Meson untuk mengonversi templat CSP menjadi file C ++.
Frontend menggunakan perpustakaan HTMX dan beberapa sumber daya Bootstrap untuk gaya. Tidak ada javascript tulisan tangan yang berjalan karena HTMX sudah menyediakan hal-hal responsive yang kami harapkan dari aplikasi web modern apa pun untuk ditawarkan.
Backend didasarkan pada kerangka web C ++ yang sangat cepat yang disebut Drogon .
Database yang digunakan adalah SQLITE3 tetapi dapat diganti dengan mudah dengan database SQL lainnya. Cukup sesuaikan kelas src/database/db_mgr.cpp . Perpustakaan untuk mengakses SQLITE3 adalah Soci dan mendukung banyak backend basis data lainnya. Akar proyek ini berisi file SQLite3, demo.db , yang digunakan aplikasi secara default. Ada juga file CSV yang tersedia, contacts.csv , yang berisi beberapa entri yang dapat digunakan untuk mengisi tabel baru.
controllers berisi kelas yang digunakan Drogon untuk memetakan panggilan klien ke fungsi di backend.database berisi kelas pembungkus kecil untuk mengakses instance SQLite3.dtos berisi Data Transfer Objects yang digunakan untuk penyamaran data antara Frontend dan Backend.templates berisi CSP (halaman server C ++), yang merupakan templat yang digunakan drogon_ctl untuk menghasilkan sumber C ++. Sumber -sumber ini akan digunakan untuk membuat output HTML.views berisi kelas C ++ yang dihasilkan drogon. File -file ini tidak boleh diedit secara manual . Mereka akan diganti di setiap bangunan. Untuk mengubah perilaku atau konten mereka, gunakan CSP dari folder templates sebagai gantinya. Tes dilakukan dengan pustaka kriteria.
Kriteria dapat diinstal melalui brew install criterion . Jika tidak, Anda dapat membangunnya secara manual seperti yang dijelaskan di sini.
Untuk membangun kriteria dengan Meson , klon repo terlebih dahulu:
git clone --recursive https://github.com/Snaipe/Criterion.gitKemudian keluarkan perintah berikut:
cd Criterion
meson - Dprefix = c: / bin / criterion build
ninja - C build installAwalan direktori instalasi dapat diubah. Setelah instalasi selesai, atur jalur ke file DLL Criterion. DLL ini akan digunakan oleh Executable Test yang memiliki kriteria terhubung.
Sumber uji proyek ini terletak di test dan sedang dibangun secara otomatis oleh Meson . Untuk menjalankan tes, Anda dapat menggunakan dua opsi ini:
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.txtAtau dengan secara langsung memanggil tes yang dapat dieksekusi sendiri:
PS > .builddir test_demo_web_server.exe
[ ==== ] Synthesis: Tested: 1 | Passing: 1 | Failing: 0 | Crashing: 0 Aplikasi web dimulai dengan memuat index.html yang berisi tag div dengan id = "main" . Di seluruh aplikasi, tag ini akan digunakan oleh kontrol lain untuk secara dinamis mengganti isinya tanpa ada hasil. Namun, tidak seperti aplikasi web modern khas lainnya, kami tidak menggunakan kerangka kerja JS seperti bereaksi atau bersudut untuk membuat aplikasi responsif. Sebagai gantinya, kami hanya menggunakan htmx sebagai perpustakaan skrip kami.
Ada juga tiga sumber daya bootstrap yang terlibat, tetapi ini hanya membuat aplikasi terlihat lebih baik. Bootstrap bukan persyaratan dan dapat diganti oleh perpustakaan lain atau stylesheet sendiri. Hal yang sama berlaku untuk jQuery yang dimasukkan sebagai ketergantungan bootstrap. Perpustakaan mana pun dapat dihapus dengan aman karena tidak mempengaruhi htmx atau _hyperscript .
Aplikasi Web berkomunikasi dengan server dengan cara respons permintaan standar. Tetapi tidak seperti banyak aplikasi web lain di luar sana, tidak ada JSON yang digunakan. Sebagai gantinya, server hanya mengirim potongan kode HTML yang digunakan klien untuk memperbarui status aplikasi saat ini.
Program server menerima dua parameter untuk mengatur IP dan port.
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]
Anda juga dapat menggunakan drogon's config.json yang disertakan untuk mengontrol perilaku server. Karena Drogon menawarkan banyak pilihan, terlebih dahulu Anda harus membuat diri Anda terbiasa dengannya. File konfigurasi dalam proyek ini hanya berisi beberapa pengaturan.
Ada juga file konfigurasi berbasis JSON terpisah, server_config.json , yang akan digunakan oleh server web. Saat ini, ini hanya mendefinisikan lokasi file SQLite3, tetapi akan diperluas di masa depan.
{
"database" : {
"type" : " sqlite3 " ,
"file" : " demo.db "
}
} File ini tidak boleh bingung dengan JSON Drogon sendiri yang bernama config.json .
Mit
