ເຄື່ອງມືໃຫມ່ສັນຍາວ່າເວັບໄຊທ໌ໄວຂຶ້ນດ້ວຍ UI ເຊີບເວີທີ່ປັບປຸງໃຫ້ດີຂຶ້ນ

ສະບາຍດີທຸກຄົນ! ໃນບົດຄວາມນີ້ຂ້າພະເຈົ້າຢາກບອກທ່ານກ່ຽວກັບການເລີ່ມຕົ້ນຂອງໂຄງການ, ທີ່ຂ້າພະເຈົ້າຄິດວ່າອາດຈະມີຄວາມສົນໃຈກັບທ່ານ. ການເຮັດວຽກກ່ຽວກັບລະຫັດໄດ້ຖືກປະຕິບັດເປັນເວລາດົນນານ, ຂ້າພະເຈົ້າຍັງໄດ້ຮັບການຊ່ວຍເຫຼືອຈາກຜູ້ປະກອບສ່ວນ, ແຕ່ຕອນນີ້ຂ້ອຍຄິດວ່າມັນກຽມພ້ອມສໍາລັບສະບັບການຜະລິດ.

ຕົກລົງ, ຕົວຈິງແລ້ວ ມັນໜ້າສົນໃຈແທ້ໆທີ່ຈະສະແດງໂຄງການທີ່ເອີ້ນວ່າ HMPL . ມັນເປັນພາສາແມ່ແບບຂະຫນາດນ້ອຍສໍາລັບການສະແດງ UI ຈາກເຄື່ອງແມ່ຂ່າຍໄປຫາລູກຄ້າ. ມັນແມ່ນອີງໃສ່ການຮ້ອງຂໍທີ່ສາມາດປັບແຕ່ງໄດ້ທີ່ຖືກສົ່ງໄປຫາເຄື່ອງແມ່ຂ່າຍໂດຍຜ່ານການ fetch ແລະປຸງແຕ່ງເປັນ HTML ທີ່ກຽມພ້ອມ.

ໃນຄວາມເປັນຈິງ, ມັນກໍ່ດີເປັນທາງເລືອກສໍາລັບໂມດູນເຊັ່ນ htmx ແລະ alpine.js , ເພາະວ່າມັນຊ່ວຍໃຫ້ທ່ານສ້າງການໂຕ້ຕອບແບບເຄື່ອນໄຫວທີ່ມີຕົວກໍານົດການກໍານົດຕໍາ່ສຸດທີ່, ເຊັ່ນດຽວກັນກັບຂະຫນາດຂອງໄຟລ໌ຜົນຜະລິດ. ນີ້ແມ່ນບັນລຸໄດ້ໂດຍການເຮັດວຽກກັບເຄື່ອງແມ່ຂ່າຍ, ເມື່ອພວກເຮົາກະກຽມ UI ຢູ່ທີ່ນັ້ນ, ແລະພວກເຮົາພຽງແຕ່ໂອນມັນໃຫ້ລູກຄ້າຜ່ານ API.

ນີ້ເຮັດວຽກແນວໃດໃນລະຫັດ?

ໃຫ້ເອົາເປັນຕົວຢ່າງແບບຟອມລົງທະບຽນອີເມລ໌ຂະຫນາດນ້ອຍ, ບ່ອນທີ່ມີພຽງແຕ່ການປ້ອນຂໍ້ມູນແລະປຸ່ມ:

 import { compile } from "hmpl-js"; const templateFn = compile( `<div> <form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form"> <div class="form-example"> <label for="name">Enter your email: </label> <input type="email" name="email" id="email" required /> </div> <div class="form-example"> <input type="submit" value="Register!" /> </div> </form> <p> { { "src":"/api/register", "after":"submit:#form", "repeat":false, "indicators": [ { "trigger": "pending", "content": "<p>Loading...</p>" } ] } } </p> </div>` ); const initFn = (ctx) => { const event = ctx.request.event; return { body: new FormData(event.target, event.submitter), credentials: "same-origin", }; }; const obj = templateFn(initFn); const wrapper = document.getElementById("wrapper"); wrapper.appendChild(obj.response);

ຜົນໄດ້ຮັບຂອງລະຫັດ:

ຕົວອັກສອນບໍ່ຫຼາຍປານໃດໄດ້ຖືກໃຊ້ໃນແບບຟອມນີ້, ແລະໃນປັດຈຸບັນຖ້າພວກເຮົາຈິນຕະນາການວ່າພວກເຮົາຈະເຮັດສິ່ງດຽວກັນໃນກອບເຊັ່ນ Vue, ຫຼັງຈາກນັ້ນພວກເຮົາຈະຕ້ອງເຊື່ອມຕໍ່ pinia ໂດຍສົມທົບກັບເຄື່ອງແມ່ຂ່າຍ, ສ້າງກຸ່ມຂອງອົງປະກອບແລະນີ້ຈະເກີດຂຶ້ນ. ພື້ນທີ່ດິດຫຼາຍ.

ຄວາມສໍາຄັນຂອງວິທີການຂ້າງເຊີບເວີ

ໃນປັດຈຸບັນຈິນຕະນາການວ່າພວກເຮົາມີເວັບໄຊທ໌ທີ່ມີຫລາຍສິບຫນ້າແລະຊໍ່ຂອງຮູບແບບ, ປຸ່ມ, carousels, ເມນູ, ເມນູຍ່ອຍແລະທຸກສິ່ງທຸກຢ່າງ. ໃນກໍລະນີນີ້, ພວກເຮົາໄດ້ຮັບຈໍານວນໄຟລ໌ແລະໂມດູນຈໍານວນຫລາຍ, ເຊິ່ງສຸດທ້າຍຈະຖືກໂຫລດໂດຍຜູ້ໃຊ້ສຸດທ້າຍໃນຮຸ່ນທີ່ສ້າງຂຶ້ນ. ນີ້ສາມາດໃຊ້ເວລາຫຼາຍສິບວິນາທີ, ແລະຖ້າບຸກຄົນໃດຫນຶ່ງໄປຢ້ຽມຢາມເວັບໄຊທ໌ທໍາອິດ, ຫຼັງຈາກນັ້ນໂອກາດທີ່ຈະປິດເວັບໄຊທ໌ຈະສູງ.

ດັ່ງນັ້ນ, ການປ່ຽນໃຈເຫລື້ອມໃສອາດຈະຫຼຸດລົງແລະຊ່ອງທາງການຂາຍທີ່ຜູ້ຂາຍໄດ້ສ້າງອາດຈະບໍ່ມີປະສິດທິພາບພຽງແຕ່ເນື່ອງຈາກວ່ານີ້. ດັ່ງນັ້ນ, ໂຄງການນີ້ສາມາດຊ່ວຍໄດ້ຢ່າງແທ້ຈິງ, ເພາະວ່າຫນ້າເວັບຕ່າງໆຈະສາມາດໂຫລດໄດ້ໄວຂຶ້ນຫຼາຍ (ເພາະວ່າ UI ທັງຫມົດແມ່ນຢູ່ໃນເຄື່ອງແມ່ຂ່າຍ), ແລະໃນລູກຄ້າຜູ້ໃຊ້ຈະເຫັນສິ່ງດຽວກັນທີ່ຈະເຮັດຢູ່ໃນກອບ.

ຂໍ້ໄດ້ປຽບຂອງໂມດູນປຽບທຽບກັບຄົນອື່ນ:

ກ່ອນອື່ນ ໝົດ, ຖ້າພວກເຮົາເອົາ HTMX, ແນ່ນອນ, ໃນທີ່ນີ້ມັນຄຸ້ມຄ່າທີ່ຈະຊີ້ໃຫ້ເຫັນວ່າໂມດູນເຮັດວຽກຢູ່ໃນ fetch ແລະຖືກປັບແຕ່ງຢ່າງເຕັມສ່ວນ. ນັ້ນແມ່ນ, ທ່ານສາມາດສົ່ງຄໍາຮ້ອງຂໍຕາມທີ່ທ່ານຕ້ອງການ, ທຸກບ່ອນແລະສ້າງຂໍ້ຫຼາຍໃນ DOM ຕາມທີ່ທ່ານຕ້ອງການ. ເມື່ອປຽບທຽບກັບ alpine.js, ທ່ານສາມາດສ້າງໄດນາມິກ, ແຕ່ວ່າການສົມທົບກັບເຄື່ອງແມ່ຂ່າຍ, ເຊິ່ງຈະຊ່ວຍໃຫ້ທ່ານບໍ່ລວມເອົາໂມດູນເພີ່ມເຕີມໃນໂຄງການຂອງທ່ານ.

ນອກນັ້ນທ່ານຍັງສາມາດເຮັດວຽກກັບແຕ່ລະໄຟລ໌ທີ່ມີນາມສະກຸນ .hmpl, ແຕ່ສໍາລັບໃນປັດຈຸບັນພຽງແຕ່ສໍາລັບ webpack.

ເລັກນ້ອຍກ່ຽວກັບຜົນໄດ້ຮັບແລະການພັດທະນາ

ຂ້ອຍຫວັງວ່າເຈົ້າມີຄວາມສົນໃຈໃນໂຄງການ. ມັນຈະເປັນການດີທີ່ຈະຮູ້ຄວາມຄິດເຫັນຂອງເຈົ້າກ່ຽວກັບມັນໃນຄໍາເຫັນ. ມັນໃຊ້ເວລາດົນໃນການເຮັດວຽກກັບມັນ, ເວັບໄຊທ໌ເຢັນ, repository ແລະຫຼາຍໄດ້ຖືກສ້າງຂຶ້ນ. ຂ້າ​ພະ​ເຈົ້າ​ຫວັງ​ວ່າ​ຖ້າ​ຫາກ​ວ່າ​ມັນ​ບໍ່​ແມ່ນ​ບັນ​ຫາ​ຫຼາຍ​ສໍາ​ລັບ​ທ່ານ​, ທ່ານ​ສາ​ມາດ​ເຂົ້າ​ຮ່ວມ​ໃນ​ການ​ພັດ​ທະ​ນາ​ໂຄງ​ການ​! ທຸກໆອາທິດຂ້ອຍພະຍາຍາມເຜີຍແຜ່ບັນຫາທີ່ເປີດເຜີຍທີ່ຂ້ອຍຕ້ອງການຄວາມຊ່ວຍເຫຼືອ. ມັນຈະເປັນການເຢັນທີ່ຈະເຮັດວຽກຮ່ວມກັນ :). ນອກຈາກນີ້, ນັບຕັ້ງແຕ່ຂ້າພະເຈົ້າຫາກໍ່ເລີ່ມຕົ້ນ, ບໍ່ມີດາວຫຼາຍຢູ່ໃນ GitHub ແລະມັນຈະເຢັນຖ້າທ່ານມັກໂຄງການ, ດັ່ງນັ້ນທ່ານຈະໃຫ້ຄະແນນມັນກັບດາວ. ຂອບໃຈ!