ເລືອກອາວຸດຄູ່ກາຍສູ່ການເປັນ Front-end developer!!!

P'phats Kps
Sep 1, 2018 · 3 min read

ດັ່ງທີ່ຮູ້ກັນດີຢູ່ແລ້ວວ່າ developer ຝັ່ງ Front-end ນັ້ນຈະມີຄວາມສາມາດທີ່ຫຼາກຫຼາຍເກີນຊາວບ້ານຊາວຊ່ອງສົມຄວນບໍ່ວ່າຈະເປັນການອອກແບບໜ້າເວບເພຈ, ການຈັດວາງອົງປະກອບຕ່າງໆນາໆພາຍໃນໜ້າເວບ, ການເລືອກຟ້ອນ,ສີ, ຮູບພາບ ແລະ graphic design ອື່ນໆທີ່ຈຳເປັນຕ້ອງໃຊ້ເຂົ້າໃນການພັດທະນາເວບ, ລວມໄປເຖິງ skills ໃນດ້ານຂອງ UX/UI ນຳອີກ. ເວົ້າໄດ້ວ່າ Front-end developer ປຽບດັ່ງໜ້າຕາ ແລະ ຊົງຜົມຂອງເວບເລີຍກໍ່ວ່າໄດ້ (ເທ້ເລີຍບາດນິ😎).


  • ກ່ອນອື່ນຈະມາເວົ້າອາວຸດທີ່ຈຳເປັນສຳລັບ Front-end developer ນັ້ນ ຈະຂໍເວົ້າເຖິງພື້ນຖານທີ່ developer ມີເສຍກ່ອນຄື:

-HTML

-CSS

-JavaScript

3 ຢ່າງຂ້າງເທິງນີ້ນັບໄດ້ວ່າຖືກຝັງໄວ້ໃນເສັ້ນປະສາດຂອງ developer ທັງ 2 ຝັ່ງຢູ່ແລ້ວ (Frontend developer ແລະ Backend developer) ດັ່ງນັ້ນສິ່ງທີ່ຈະມາເຮັດໃຫ້ Front-end developer ດູດີມີສະຫງ່ານັ້ນກະຄື Framework ແລະ package ຕ່າງໆທີ່ມີໃນປະຈຸບັນ ບວກກັບທັກສະໃນດ້ານອອກແບບ UX/UI ອີກ, ສິ່ງເຫຼົ່ານີ້ແຫຼະທີ່ຈະມາເຮັດໃຫ້ຊີວິດຂອງ developer ຝັ່ງນີ້ສົດໄສ ແລະ ດູດີຂຶ້ນມາທັນທີ(ມັນດີອີ່ຫຼີໃດ).

ຮູ້ຈັກກັບຄັງແສງແຫ່ງ npm

ຢາກໄດ້ລູກເສືອຕ້ອງເຂົ້າຖ້ຳເສືອ ຢາກເຂົ້າຖ້ຳເສືອຕ້ອງຮູ້ຈັກເສືອ!!!

ນີ້ກໍ່ບໍ່ຕ່າງຫຍັງກັນ ກ່ອນອື່ນເຮົາກໍ່ຕ້ອງຮູ້ກ່ອນວ່າຈະເອົາບັນດາ Framework ຕ່າງໆມາໄດ້ຈັ່ງໃດ ແລະ ຈະເລືອກໃຊ້ Framework ຫຼື package ໂຕໃດເພື່ອໃຫ້ເໝາະກັບໜ້າຕາແລະຊົງຜົມຂອງເຮົາ.

npm ກໍ່ຄືການຕິດຕັ້ງ package ເສີມຕ່າງໆລົງໃນ application ຂອງເຮົາ ເຊິ່ງ npm ຈະຖືກຕິດຕັ້ງມາພ້ອມກັບ NodeJS ເພື່ອເຮັດໜ້າທີ່ໃນການຈັດການ package ເສີມຕ່າງໆ, ສະນັ້ນບໍ່ລໍຊ້າ ຕິດຕັ້ງ NodeJS ໄວ້ຊ່ະ.

ສ່ວນວິທີການນຳໃຊ້ npm ໃນການຕິດຕັ້ງ package ຕ່າງໆກໍ່ສຸດແສນຈະງ່າຍດາຍ ພຽງແຕ່ລະບຸຊື່ package ທີ່ທ່ານຕ້ອງການລົງໄປ ມັນກໍ່ຈະໄປກວດສອບ package ຢູ່ registry ເມື່ອພົບກໍ່ຈະດາວໂຫລດໃຫ້ທັນທີ.

ສ່ວນ package ເສີມຕ່າງໆທີ່ມີທ່ານສາມາດເຂົ້າໄປເບິ່ງໄດ້ທີ່ https://www.npmjs.com

JavaScript Frameworks

ໄດ້ເວລາເລືອກດາບຄູ່ໃຈແລ້ວອອກສູ່ສະໜາມຮົບ!!!

ໃນການເຮັດ single page web application (SPA) ຈະໃຊ້ພວກນີ້ເປັນຫຼັກຄື:

  • VueJS
  • Angular
  • React
  • Backbone
  • Etc.

ສ່ວນວິທີການນຳໃຊ້ Framework ແຕ່ລ່ະອັນນັ້ນກໍ່ຕ້ອງໄປສຶກສາດ້ວຍໂຕເອງຕື່ມ.

JavaScript library

ເມື່ອເວົ້າເຖິງ JS library ແລ້ວຫຼາຍໆຄົນກໍ່ຈະຮ້ອງ “ອໍ້" ຂຶ້ນມາທັນທີ, ສ່ວນນີ້ຫຼັກໆແລ້ວກໍ່ຄົງໜີບໍ່ພົ້ນ jQuery ເຊິ່ງຈະຊວ່ຍໃຫ້ developer ຂຽນ JavaScript ໄດ້ງ່າຍຂຶ້ນ ແລະ ທີ່ສຳຄັນມັນເປັນ cross-platform(ເປີດໃນ Browser ໃດກໍ່ສະແດງຜົນຄືກັນ).

CSS Framework

ໄກ່ງາມຍ້ອນຂົນ ຄົນງາມຍ້ອນແຕ່ງສັນໃດ ເວບໄຊກໍ່ງາມຍ້ອນ CSS ໄດ້ເຊັ່ນກັນ.

ໂດຍຫຼັກໆແລ້ວ CSS Framework ທີ່ໃຊ້ໃນປະຈຸບັນກໍ່ຈະມີ:

  • Bootstrap
  • Foundation
  • Bulma
  • Semantic UI

CSS Tools

ໃນສ່ວນນີ້ກໍ່ຈະເວົ້າເຖິງການປ່ຽນວິທີຂຽນ CSS ແບບທຳມະດາໄປເປັນການຂຽນແບບ SASS,LESS etc. ການຂຽນແບບນີ້ມັນຈະໃຫ້ການຂຽນສັ້ນລົງແລະສາມາດ compile code ໄປເປັນ syntax ຂອງ CSS ແບບທຳມະດາໄດ້ອີກ, ເຊິ່ງ SASS,LESS ຈະເຮັດໃຫ້ການຂຽນ CSS ຂອງເຮົານັ້ນ ສັ້ນລົງ ແລະ ມັນຍັງມີຄວາມສາມາດທີ່ພິເສດອີກຫຼາຍຢ່າງອີ່ຫຼີ.

Other Technology etc.

ໃນສ່ວນນີ້ກໍ່ຈະເປັນສ່ວນທີ່ເຮັດໃຫ້ ການພັດທະນາເວບໄຊນັ້ນມີລົດຊາດຂຶ້ນເປັນກອງເລີຍກໍ່ວ່າໄດ້ໃນນັ້ນກໍ່ຈະມີ:

  • Automate task runer:

- Gulp: ເປັນ Steaming Build System ທີ່ຊ່ວຍເຮັດວຽກແທນເຮົາເຊັ່ນ: ການສັ່ງ start server,minify JavaScript, refresh ໜ້າເວບເມື່ອມີການແກ້ໄຂ ຫຼື ແປງ SASS/LESS ເປັນ CSS ໆລໆ.

- Grunt: ການເຮັດວຽກຄືກັນແຕ່ Grunt ມາກ່ອນ Gulp.

  • Dependency management :

-Browserify: ເວົ້າໃຫ້ເຂົ້າໃຈງ່າຍໆກໍ່ຄື ມັນຈະທຳການລວມໄຟລ໌ JavaScript ທີ່ເຮົາຂຽນແຍກເປັນແຕ່ລະ module ແລ້ວທຳການ export ຫຼື require .

-Webpack:

  • Package management:

-Bower

-npm

  • Build tool:

-Yeoman

ທັງໝົດທັງມວນທີ່ກ່າວມານັ້ນເປັນສິ່ງທີ່ Front-end developer ທັງຫຼາຍຄວນສຶກສາໄວ້ເພື່ອເປັນອາວຸດໃນການເຂົ້າຮ່ວມ dev war (ເວີ້ລ່ະ).

ເຖິິງຢ່າງໃດກໍ່ຕາມ ກ່ອນອື່ນໝົດທ່ານກໍ່ຄວນສຶກສາສິ່ງທີ່ມັນເປັນພື້ນຖານຂອງມັນເສຍກ່ອນ ຈຶ່ງມາສຶກສາເລື່ອງ Framework ເຊິ່ງມັນຈະເຮັດໃຫ້ທ່ານເຂົ້າໃຈວ່າມັນຊ່ວຍທ່ານໃນສ່ວນໃດ ຫັ້ນລ່ະ.

ໝາຍເຫດ: ບົດຄວາມນີ້ຂຽນຂຶ້ນເພື່ອແນະນຳແນວທາງສຶກສາໃນການພັດທະນາເວບໄຊ ໃນຝັ່ງຂອງ Front-end ບໍ່ໄດ້ມີເຈຕະນາອື່ນແອບແຝງ.

Meet me in the battlefield!!!.

P'phats Kps

Written by

A website developer with a poor computer labtop.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade