ບັນທຶກການຕັດສິນໃຈດ້ານສະຖາປັດຕະຍະກຳ: ເຟຣມເວີກ CSS

ສາລະບານ:

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

ບົດສະຫຼຸບ

ບັນຫາ

ພວກເຮົາຢາກໃຊ້ເຟຣມເວີກ CSS ເພື່ອສ້າງເວັບແອັບພລິເຄຊັນຂອງພວກເຮົາ:

• ພວກເຮົາຢາກໃຫ້ປະສົບການຂອງຜູ້ໃຊ້ໄວ ແລະ ເຊື່ອຖືໄດ້ ໃນທຸກບຣາວເຊີທີ່ນິຍົມ ແລະ ທຸກຂະໜາດໜ້າຈໍ.

• ພວກເຮົາຢາກໃຫ້ວົນຊ້ຳການອອກແບບ, ໂຄງຮ່າງ, UI/UX ແລະ ອື່ນໆ ໄດ້ຢ່າງວ່ອງໄວ.

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

ການຕັດສິນໃຈ

ຕັດສິນໃຈເລືອກ Bulma.

ສະຖານະ

ຕັດສິນໃຈເລືອກ Bulma. ເປີດຮັບທາງເລືອກເຟຣມເວີກ CSS ໃໝ່ເມື່ອມີອອກມາ.

ລາຍລະອຽດ

ສົມມຸດຕິຖານ

ພວກເຮົາຢາກສ້າງເວັບແອັບທີ່ທັນສະໄໝ, ໄວ, ເຊື່ອຖືໄດ້, ຕອບສະໜອງຕາມຂະໜາດໜ້າຈໍ ແລະ ອື່ນໆ.

ເວັບແອັບທີ່ທັນສະໄໝທົ່ວໄປກຳລັງຫຼຸດ/ເລີກໃຊ້ jQuery ດ້ວຍຫຼາຍເຫດຜົນ:

• JavaScript ສະໄໝໃໝ່ກຳລັງເພີ່ມຄວາມສາມາດຫຼາຍຢ່າງທີ່ jQuery ເຄີຍໃຫ້ ດັ່ງນັ້ນ jQuery ຈຶ່ງຈຳເປັນໜ້ອຍລົງ ແລະ ມີໂມດູນທີ່ດີກວ່າ/ໄວກວ່າ/ນ້ອຍກວ່າທີ່ໃຫ້ການປະຕິບັດສະເພາະ

• ແນວທາງກວ້າງຂອງ jQuery ແມ່ນການຈັດການ DOM ໂດຍກົງ ເຊິ່ງເປັນຮູບແບບຕ້ານ (anti-pattern) ສຳລັບເຟຣມເວີກ JavaScript ສະໄໝໃໝ່ (ເຊັ່ນ React, Vue, Svelte)

• jQuery ລົບກວນຕົວມັນເອງຖ້າຖືກໂຫຼດສອງຄັ້ງ ແລະ ອື່ນໆ.

ຂໍ້ຈຳກັດ

ຖ້າພວກເຮົາເລືອກເຟຣມເວີກ CSS ທີ່ໃຊ້ jQuery ພວກເຮົາກໍຕິດຢູ່ກັບການນຳເຂົ້າ jQuery. ຕົວຢ່າງ Semantic UI ໃຊ້ jQuery ແລະ Tachyons ບໍ່ໃຊ້.

ຖ້າພວກເຮົາເລືອກເຟຣມເວີກ CSS ທີ່ມີຂະໜາດນ້ອຍສຸດ ພວກເຮົາກໍຈະຂາດອົງປະກອບຂອງເຟຣມເວີກທີ່ພວກເຮົາອາດຕ້ອງການໃນຕອນນີ້ ຫຼື ໃນໄວໆນີ້. ຕົວຢ່າງ Semantic UI ມີ image carousel ແລະ Tachyons ບໍ່ມີ.

ຈຸດຢືນ

ພວກເຮົາໄດ້ພິຈາລະນາການບໍ່ໃຊ້ເຟຣມເວີກ. ວິທີນີ້ຍັງເບິ່ງວ່າເປັນໄປໄດ້ ໂດຍສະເພາະເພາະ CSS grid ໃຫ້ສ່ວນໃຫຍ່ຂອງສິ່ງທີ່ພວກເຮົາຕ້ອງການສຳລັບໂຄງການຂອງພວກເຮົາ..

ພວກເຮົາໄດ້ພິຈາລະນາເຟຣມເວີກ CSS ຫຼາຍຕົວໂດຍການຄັດກອງລາຍຊື່ສັ້ນຢ່າງວ່ອງໄວ: Bootstrap, Bulma, Foundation, Materialize, Semantic UI, Tachyons ແລະ ອື່ນໆ. ສອງຕົວເລືອກຂອງພວກເຮົາສຳລັບການທົບທວນເລິກກວ່າແມ່ນ Semantic UI (ເພາະມັນມີແນວທາງທີ່ເນັ້ນຄວາມໝາຍທີ່ສຸດ) ແລະ Bulma (ເພາະມັນມີແນວທາງທີ່ເບົາທີ່ສຸດ ທີ່ໃຫ້ອົງປະກອບທີ່ພວກເຮົາຕ້ອງການໃນຕອນນີ້).

ພວກເຮົາໄດ້ພິຈາລະນາ Semantic UI. ມັນມີອົງປະກອບຫຼາຍຢ່າງ ລວມທັງອົງປະກອບທີ່ພວກເຮົາຕ້ອງການສຳລັບໂຄງການ: ແຖບ (tabs), ກຣິດ, ປຸ່ມ ແລະ ອື່ນໆ. ພວກເຮົາໄດ້ທົດລອງ Semantic UI ສອງວິທີ: ໃຊ້ໄຟລ໌ CDN ທົ່ວໄປ ແລະ ໃຊ້ NPM repos. ພວກເຮົາປະສົບຜົນສຳເລັດກັບ Semantic UI ໃນໜ້າ HTML ແບບຄົງທີ່ ແຕ່ບໍ່ປະສົບຜົນສຳເລັດພາຍໃນກອບເວລາຂອງພວກເຮົາໃນການສ້າງ SPA ດ້ວຍ JavaScript (ສ່ວນຫຼາຍເພາະບັນຫາການໂຫຼດ jQuery). ພວກເຮົາພົບວ່າຜູ້ຂຽນໂຄ້ດຄົນອື່ນໄດ້ຮ້ອງຂໍໃຫ້ນັກພັດທະນາ Semantic UI ສ້າງເວີຊັນທີ່ບໍ່ມີ jQuery ດ້ວຍເຫດຜົນດຽວກັນກັບພວກເຮົາ. ຜູ້ຂຽນໂຄ້ດຄົນອື່ນໄດ້ຮ້ອງຂໍເວີຊັນທີ່ບໍ່ມີ jQuery ມາຫຼາຍປີແລ້ວ ແຕ່ນັກພັດທະນາກໍປະຕິເສດ ແລະ ກ່າວວ່າເວີຊັນທີ່ບໍ່ມີ jQuery ໃດໆກໍຍາກເກີນໄປທີ່ຈະຂຽນ ເຊັ່ນ ~"ໂຄງການ Semantic UI ມີຈຸດສຳຜັດທີ່ໃຊ້ jQuery ຫຼາຍກວ່າ 22,000 ຈຸດ".

ຕົວຢ່າງກັບ Semantic:

<div class="ui top attached tabular menu">
  <a class="item">Alpha</a>
  <a class="item">Bravo</a>
</div>

ພວກເຮົາໄດ້ພິຈາລະນາ Bulma. Bulma ມີຄວາມສາມາດຄ້າຍຄືກັບ Semantic UI ຫຼາຍຢ່າງ ເຖິງແມ່ນວ່າຈະມີອົງປະກອບທີ່ຊັບຊ້ອນໜ້ອຍກວ່າ. Bulma ຖືກສ້າງດ້ວຍເຕັກນິກທີ່ທັນສະໄໝ ເຊັ່ນ ບໍ່ມີ jQuery. Bulma ມີອົງປະກອບຈາກບຸກຄົນທີສາມບາງຢ່າງ ເຊິ່ງພວກເຮົາອາດຢາກໃຊ້.

ຕົວຢ່າງກັບ Bulma:

<div class="tabs">
  <ul>
    <li><a>Alpha</a></li>
    <li><a>Bravo</a></li>
  </ul>
</div>

ຂໍ້ໂຕ້ແຍ້ງ

ຕາມຂ້າງເທິງ.

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

ຜົນໄດ້ຮັບ

ຖ້າພວກເຮົາພົບເຟຣມເວີກ CSS ທີ່ດີທີ່ບໍ່ໃຊ້ jQuery ໂດຍທົ່ວໄປສິ່ງນີ້ເປັນປະໂຫຍດ ແລະ ດີໂດຍລວມ.

ທີ່ກ່ຽວຂ້ອງ

ການຕັດສິນໃຈທີ່ກ່ຽວຂ້ອງ

ເຟຣມເວີກ CSS ທີ່ພວກເຮົາເລືອກອາດມີຜົນຕໍ່ຄວາມສາມາດໃນການທົດສອບ.

ຄວາມຕ້ອງການທີ່ກ່ຽວຂ້ອງ

ພວກເຮົາຢາກສົ່ງມອບແອັບທີ່ທັນສະໄໝລ້ວນໆຢ່າງວ່ອງໄວ.

ພວກເຮົາບໍ່ຢາກໃຊ້ເວລາເຮັດວຽກກັບເຟຣມເວີກເກົ່າ (ໂດຍສະເພາະ Semantic UI) ທີ່ໃຊ້ຄວາມຂຶ້ນກັບກັນເກົ່າ (ໂດຍສະເພາະ jQuery).

ຜະລິດຕະພັນທີ່ກ່ຽວຂ້ອງ

ມີຜົນຕໍ່ HTML ທົ່ວໄປທັງໝົດທີ່ຈະໃຊ້ CSS.

ຫຼັກການທີ່ກ່ຽວຂ້ອງ

ຍ້ອນກັບໄດ້ງ່າຍ.

ຕ້ອງການຄວາມໄວ.

ໝາຍເຫດ

ໝາຍເຫດໃດໆໃສ່ຢູ່ນີ້.