10 JavaScript libraries #ของมันต้องมี
สวัสดีครับผมแมกซ์นะครับ บทความนี้มาแชร์ JavaScript libraries ที่มีประโยชน์ เรียกได้เป็นพื้นฐานสำหรับการเริ่มโปรเจ็คใหม่ๆ ที่ผมเลือกหยิบมาใช้อย่างสม่ำเสมอเลย มาดูกันครับว่ามีอันไหนน่าสนใจกันบ้าง 😊ช่วงนี้บ้า Podcast จนอยากจะไปทำบ้าง แล้ว แต่จะว่าไป บทความมันมีข้อดีตรงค้นหาผ่าน Google ผู้อ่านส่วนใหญ่มาจากการค้นหาเยอะมาก จนมาดูอีกที เห้ยบทความเรา 1 อันที่เขียนไว้นานแล้ว ถูกอ่านเยอะขนาดนี้เลยหรอ ที่ว่าเยอะก็หลักหมื่นแหละอิอิ แต่แค่นี้ผมก็ดีใจแล้ว 👏
ไปกันเลย JavaScript libraries ต่อจากนี้จะเป็นแนว Front-end ส่วนใหญ่นะครับ บางอย่าง Back-end ก็น่าจะหยิบจับไปใช้ได้อยู่
- Axios : Promise based HTTP client for the browser and node.js.
น่าจะคุ้นเคยเลยสำหรับคนทำเว็บ มีประโยชน์มากในการใช้ในการเชื่อมต่อกับ Back-end ผ่าน RESTful API จะ GET จะ POST ก็ง่าย แถมเป็น Promise based สามารถใช้ then, async, await แบบ ES6 ทันสมัยสุดๆ 😙
- Lodash : An alternative to Underscore.js, delivering consistency, customization, performance, and extra features.
ถ้าคุณเขียน JavaScript ละก็ อันนี้มันต้องใช้จริงๆ มันคือทางเลือกของ Underscore.js อันนี้ผมไม่เคยใช้เหมือนกัน แต่ประโยชน์มากมายเหลือเกิน ในการจัดการพวก Object, Array, String ต่างๆ ครอบคลุมแถบจะทุกอย่างที่เราต้องการ ยกตัวอย่าง find, sort, union, countBy, filter และอีกโคตรเยอะเลย เรียกได้ว่าลืมการเขียน for, map, reduce แบบเดิมไปได้เลย เพราะสามารถจบงานต่างๆ บ้างทีบรรทัดเดียวเลย ลดบัคที่เกิดจากเรา ลดความไม่มีประสิทธิภาพของ loop เพราะบางอย่างเราไม่ลึกด้าน Algorithm ที่จะทำให้ได้ประสิทธิภาพที่สุดก็ให้ Lodash ช่วยเถอะ 😘
- Moment.js : Parse, validate, manipulate, and display dates and times in JavaScript.
ถ้าคุณต้องการจัดการกับเวลาละก็ ห้ามพลาดเลยกับ Moment ที่จะช่วยคุณ format ตัวแปรประเภทวันเวลา ทำให้แสดงผลได้ในหลายๆรูปแบบตามต้องการ หรือจะทำข้อความแบบนี้ “2 hours ago” ก็สามารถทำได้ การ +,- เวลาก็สามารถทำได้อย่างง่ายเลย 😊
- Numeral.js : A javascript library for formatting and manipulating numbers.
หลังจากการจัดการกับเวลาก็มีต่อกันกับเรื่องตัวเลข ทำเรื่องการแสดงผลตัวเลขเป็นเรื่องที่โคตรง่าย ไม่ต้องมางงเขียนโค้ดเอง อย่างเรื่องการใส่ (,) ในหน่วยเงิน 9,999,999.9900$ แบบนี้ก็แค่บรรทัดเดียว แค่กำหนด Format pattern ให้ถูก ก็สามารถแปลงเลขและแสดงจุดทศนิยมได้เลย แถมการแปลงกลับเป็นค่าตัวเลขเพื่อใช้ในการคำนวณต่อไป 🙄
- Is.js : Micro check library check types, regexps, presence, time and more.
ใช่ไหม ? ถามหน่อย is.js ช่วยเราในการเขียนเช็คค่าต่างๆ ความสามารถก็เป็นพวกเช็ค Type, Environment, Pattern ต่างๆ ใช้ในการ Validate บ้าง แต่ตัวนี้ผมไม่ได้ใช้เท่าไหร่ เพราะไปเลือกทางเขียนเอง หรือ ใช้ Validate ของพวก Framework มากกว่าแต่ลองแวะไปชมได้เผื่อมีประโยชน์ครับ 🧐
- JSVerbalExpressions : JavaScript Regular expressions made easy.
ทำให้เรื่อง Regular Expressions เป็นเรื่องง่าย 😎 เป็นตัวช่วยที่ออกไปทางขี้เกียจไปทำความเข้าใจกับการเขียน regex จะเห็นว่าการเขียนเข้ารูปแบบแต่ละอย่างละก็ Search Google แล้ว Search อีก นานๆทีจะเขียนก็ลืม ลืมความซับซ้อนได้เลยถ้ามี JSVerbalExpressions ตัวอย่างโค้ด
VerEx()
.startOfLine()
.then('http')
.maybe('s')
.then('://')
.maybe('www.')
.anythingBut(' ')
.endOfLine();// Output: /^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$/
แค่นี้ก็จะได้ regex ในรูปแบบที่เราเข้าใจง่ายๆแล้ว แต่แนะนำเอาไว้ใช้ข้างนอกดีกว่าอย่าใส่ในโปรเจ็คเลย 😜
- Store.js : Cross-browser storage for all use cases, used across the web.
ถ้าต้องใช้ความสามารถ Local storage เก็บข้อมูลไว้บน Browser ของฝั่งผู้ใช้ละก็ Store.js ช่วยคุณในการเขียนบน Local storage ได้อย่างง่ายแถมยัง Cross-browser ให้ Support บนหลายๆ Browsers ฟังชั่นก์การใช้งานก็ง่ายๆ get, set, remove, clearAll 😇
- Crypto-js : JavaScript library of crypto standards.
เข้ารหัส-ถอดรหัส ต้อง Crypto-js เลย ตัวช่วยเข้ารหัสก่อนส่งข้อมูลไปยังเซิฟเวอร์ มีมาตราฐานการเข้ารหัสหลายๆแบบ ให้เลือกใช้อย่าง MD5, SHA256, Base64 😲
- Compressor.js : JavaScript image compressor.
การลดขนาดภาพถือเป็นสิ่งสำคัญในการช่วยลดพื้นที่ในการจัดเก็บ Compressor.js ช่วยคุณในการนำไฟล์รูปภาพที่ผู้ใช้นำเข้ามา ทำการปรับขนาดของภาพ คุณภาพของภาพให้เหมาะสมในการจัดเก็บ และนำไปแสดงผลต่ออย่างรวดเร็ว โดยผ่านการประมวลผลบนฝั่งผู้ใช้ รองรับทั้งไฟล์ประเภท Jpeg, Png 🥰
- Workerize-loader : Automatically move a module into a Web Worker.
สิ่งที่จะมาช่วยในการใช้งาน Web Workers ต้องเล่ายาวนิดนึงนะครับ โดยพื้นฐานแล้วเว็บไซต์ที่เราเขียนโดย JavaScript จะทำงานทั้งหมดอยู่แบบ Single thread คือทำงานบน Main thread อย่างเดียว โดยความสามารถของ JavaScript ทำการสลับการทำงานเสมือน Multi thread แต่ถ้าใช้ฟังชั่นก์ที่ทำงานหนักมากๆ เช่นการคำนวณต่างๆจนทำให้ Single thread ทำงานไม่ไหว ผลกระทบแรกเลยก็คือ UI lag หน้าเว็บจะกระตุกๆตอบสนองช้า 🤑
ดีกว่าไหมถ้าเราสามารถแตก Thread ได้ใน JavaScript Workerize ให้เราใช้ความสามารถของ Web Worker ที่จะทำงานสิ่งต่างๆใน Background หรือ ต่าง Thread กันซึ่งจะไม่มีผลกระทบกับ Main thread ของเว็บเรา 😁
โดยสามารถเขียนฟังก์ชั่น JavaScript แบบปกติของเราแล้วทำการโยนไปให้ Web Worker ผ่าน Workerize ได้อย่างง่ายๆ แล้วก็มาทำการรอรับผลลัพธ์ในฝั่งเว็บเราปกติได้เลย 🤩
จบไปแล้วนะครับกับ 10 JavaScript libraries อาจจะเป็นอะไรที่ใช้กันอยู่แล้วหรือยังไม่เคยใช้กัน ก็อยากให้ลองดูครับ ต้องบอกอีกรอบว่าอาจจะไม่ได้เป็น libraries ที่ต้องมี ดีที่สุด แต่ก็เป็นสิ่งที่ผมใช้และอยากมาแชร์ครับ ไว้เจอกันครั้งหน้าลาหล่ะครับ 🤗 10 Vue.js libraries ตอนหน้ามาแน่จัดหนักจัดเต็ม
