พอดีมีลูกเพจท่านนึงที่กำลังเริ่มต้นหัดทำเว็บไซต์สอบถามเข้ามาเกี่ยวกับความสำคัญของ jQuery ซึ่งเป็น Library ชื่อดังที่มีมาตั้งแต่ปี 2006 แอดเห็นว่าอันนี้เป็นประเด็นที่น่าสนใจดีครับ เลยขอหยิบมาเล่าให้ฟังกันเลยละกันครับ
คนบางกลุ่มเข้าใจว่าการใช้ jQuery ในสมัยนี้ไม่ดีแล้ว ควรไปใช้ React หรือ VueJS แทน แต่คนทำเว็บใน StackOverflow 80% กลับบอกว่าเค้า “ถนัดใช้ jQuery” มากกว่า
สรุปบทความนี้แบบสั้น ๆ คือ “jQuery ยังใช้ได้อยู่ แต่ไม่ต้องเรียนก็ได้” ครับ เพราะอะไรตามมาดูกัน
jQuery คืออะไร มีไว้ทำอะไร
หลาย ๆ ท่านที่ทำเว็บกันมานานแล้ว (เกิน 3 ปี) จะต้องเคยใช้ jQuery กันมาก่อน ส่วนเด็กรุ่นใหม่ ๆ มักจะเริ่มจาก React, Vue.js, Angular กันมากกว่า
jQuery คือ JavaScript Library ที่ได้รับความนิยมมากหลายปีก่อน ประมาณ 5 ปีที่แล้ว ช่วงนั้นถือเป็นยุคที่น่าปวดหัวของคนเขียน JavaScript เพราะเราจะเจอปัญหาเรื่องการเขียนให้รันได้ทุกบราวเซอร์ โดยเฉพาะ Internet Explorer 6, 7, 8 นี่ถือเป็นศัตรูตัวสำคัญของคนทำเว็บเลย (ใครเคยทำเว็บช่วงนั้นจะเข้าใจ T_T ดักแก่รัว ๆ)
ฟีเจอร์หนึ่งของ jQuery คือ คำสั่ง jQuery สามารถรันได้ในทุกบราวเซอร์ (Cross-Browser) ทำให้เราเขียนอะไรก็ไม่ต้องกลัวว่าคนใช้ IE จะรันไม่ได้หรือเปล่า เพราะก่อนหน้านี้ IE มีคนใช้เยอะมาก ๆ เพราะฉะนั้นการใส่ jQuery เข้ามาในโปรเจคในตอนนั้น ถือว่าเป็นของที่ต้องมีครับ
นอกจากนั้น JavaScript ก่อน ES6 ก็ไม่ได้เขียนกันง่าย ๆ ลองมาดูตัวอย่าง ถ้าเราอยากจะเลือก Selector ด้วย ID หรือ Class แบบใช้กับไม่ใช้ jQuery
# ไม่ใช้ jQuery
# เลือกได้แค่ ID รองรับบราวเซอร์เก่า
var el = document.getElementById("id_ตรงนี้");
# เลือกได้แค่คลาส รองรับ IE9+
var el = document.getElementsByClassName("class_ตรงนี้");
# ใช้ jQuery
# เลือก ID ใช้ได้ทุกบราวเซอร์
var el = $('#id_ตรงนี้')
# เลือก Class ใช้ได้ทุกบราวเซอร์
var el = $('.class_ตรงนี้')
จากโค้ดข้างบนจะเห็นได้ค่อนข้างชัด ว่า jQuery ทำให้โค้ดคลีนขึ้นมาก แถมคนเขียนก็ไม่ต้องมาจำ 2 คำสั่งแยกกันอีกด้วยครับ
(เพิ่มเติม: ถ้าใครยังตกอยู่ในกงเกวียนกำเกวียนที่ต้องทำเว็บให้รองรับ IE 6-8 อยู่ แล้วอยากได้ฟีเจอร์ Selector อันนี้แต่ไม่อยากได้ jQuery ทั้งก้อน แนะนำให้ใช้ SelectivizrJS ก็พอครับ)
และสำหรับใครที่คิดว่าโค้ดข้างบนมันก็ไม่ได้ต่างกันเยอะอะไรนี่นา อยากให้ลองดูโค้ด AJAX แบบใช้ jQuery กับไม่ใช้ ก่อนครับ จะเห็นว่าความยาวต่างกันเยอะมากที่เดียว เพราะฉะนั้นการใช้ jQuery ทำให้เราได้โค้ดที่เขียนง่าย อ่านง่าย ขึ้นเยอะครับ
สุดท้าย ฟีเจอร์สำคัญของ jQuery ที่ไม่พูดถึงไม่ได้ คือ jQuery มีคนทำปลั๊กอินไว้เยอะมาก อยากได้อะไรใส่เว็บก็โยนใส่ได้เลย
สำหรับเว็บที่ต้องการความ Interactive ไม่ว่าจะเป็นการใส่ Slider ให้มีรูปเลื่อนสวย ๆ, Gallery รูปภาพ, Layout เท่ ๆ แบบ Masonry ฯลฯ ทุกอย่างนี้มี jQuery Plugin รองรับไว้แล้วทั้งหมด เราแค่ก็อปมาใส่ในเว็บก็เสร็จเลย ไม่จำเป็นต้องเขียน JavaScript เทพ
สรุปคือ jQuery ทำให้คนทำเว็บไซต์สามารถ เขียน JavaScript ได้สะอาดขึ้น , รองรับการทำงานในทุก Browser และ มีปลั๊กอินให้ใช้เยอะมาก เพราะฉะนั้นเราก็โยน jQuery ใส่โปรเจคแบบไม่ต้องคิดมากเลย
ทำไมเดี๋ยวนี้คนทำเว็บไซต์ไม่ต้องใช้ jQuery กันแล้ว
ปัจจุบันนี้ คนทำเว็บคิดเรื่องการเขียน JavaScript ให้ Cross-Browser กันน้อยลงแล้วครับ เพราะศัตรูตัวสำคัญอย่าง Internet Explorer ได้รับความนิยมน้อยลงมาก ๆ และ Google Chrome ซึ่งเป็น Browser ที่คนใช้เยอะที่สุดในปัจจุบัน ก็ไม่ค่อยมีปัญหากับคำสั่ง JavaScript ใหม่ ๆ
ส่วนในเรื่องของการเขียนโค้ดให้สะอาดขึ้น การมาของ JavaScript Framework ใหม่ ๆ รวมถึง ES6 (JavaScript เวอร์ชั่นใหม่ที่มากับบราวเซอร์ใหม่ ๆ เช่น Chrome, Firefox) เป็นต้นไป เค้าก็ทำให้โค้ด JavaScript สมัยใหม่สะอาดมาก ๆ
เช่น เคสของการเลือก Selector ที่ยกตัวอย่างไว้ด้านบน ก็จะเหลือโค้ดแค่นี้
document.querySelector("ใส่ CSS Selector ได้ตรงนี้เลย")
ส่วนการยิง AJAX เดี๋ยวนี้มี Fetch API ที่รองรับในบราวเซอร์หลัก ๆ แล้ว โค้ดคลีนไม่ต่างอะไรกับการใช้ jQuery เลยครับ
fetch('https://www.example.com/file.json')
.then(function(response) {
return response.json();
})
.then(function(result) {
console.log(JSON.stringify(result));
});
และในส่วนของ jQuery Plugin อันนี้ต้องยอมรับว่ายังหาอะไรมาแทนที่ได้ยาก เพราะ jQuery เกิดมานานแล้ว ทำให้มีคลัง Plugin ที่คนเขียนมาแจกเยอะจนเสิร์จหาอะไรก็เจอ ขนาดที่ว่าคำถาม JavaScript ใน StackOverflow มักจะมีคนมาตอบเป็นคำสั่ง jQuery แทน
อย่างไรก็ตาม JavaScript Framework สมัยใหม่ ก็มีคนทำเป็น Plugin ออกมาแจกบ้างเหมือนกันครับ เช่น Ant Design ของ React ที่ได้รับความนิยมสูง ถ้าไม่ต้องการอะไรที่หลุดโลกมาก ๆ และไม่อยากเขียนเอง ก็ยังพอหาได้อยู่ครับ
ผล Survey คนทำเว็บล่าสุด: คนยังใช้ jQuery กันอยู่หรือเปล่า
ก่อนจะเขียนบทความนี้ แอดได้มีโอกาสไปอ่าน The Frontend Survey 2018 ซึ่งเค้านับผลจาก Frontend Developer 5,000 คนทั่วโลก
สิ่งที่น่าสนใจ คือ คนส่วนใหญ่ (79.73%) บอกเป็นเสียงเดียวกันว่า “Feel comfortable using jQuery” ซึ่งเห็นได้จากบาร์สีน้ำเงินด้านซ้ายสุดที่พุ่งสูงกว่าคนอื่นแบบไม่แคร์สายตาชาวโลก
ส่วน JavaScript Framework สมัยใหม่ เช่น React, Angular, VueJS จะเห็นได้จากกราฟข้างบนว่าคนส่วนใหญ่เคยได้ยินชื่อ หรือเคยอ่านผ่าน ๆ (บาร์สีเหลือง) มากกว่า แต่ไม่ได้ใช้จริง
อย่างไรก็ตาม ความนิยมของ jQuery ลดลงมาจากปีที่แล้ว 7% เพราะฉะนั้น เป็นไปได้ว่าเราจะไปถึงจุดที่ JavaScript Framework สมัยใหม่ได้รับความนิยมแซง jQuery ในที่สุด
สำหรับในตอนนี้ แอดมองว่าการเรียนรู้ jQuery ไว้ไม่เสียหายครับ และไม่ต้องใช้เวลาเยอะ เผลอ ๆ วันเดียวก็ใช้คล่องแล้ว พอเราใช้เป็น เราจะได้เลือกถูกว่าโปรเจคไหนควรใช้ jQuery และโปรเจคไหนควรใช้ React
สรุป เรายังต้องเรียน jQuery กันอยู่มั้ย
แอดคิดว่ามี 3 เคสที่เรายังควรใช้ jQuery กันอยู่ครับ นั่นคือ
ถ้าเราใช้ Software ที่เริ่มพัฒนามานานแล้ว
Software หลาย ๆ ตัวเริ่มพัฒนามานานหลายปีแล้ว แต่ก็ยังได้รับความนิยม และมีคนอัพเดทอยู่เป็นประจำ หนึ่งในนั้นก็คือ WordPress ที่เกิดมาเกิน 10 ปีแล้ว และคนใช้เยอะมาก ๆ ขนาดที่ว่าเว็บไซต์ 1/3 ของโลก สร้างด้วย WordPress
นอกจาก Core ของ WordPress จะใช้ jQuery เยอะในส่วนทั้งหน้าบ้านและหลังบ้าน ตัวปลั๊กอิน WordPress เองส่วนใหญ่ก็ใช้ jQuery เขียนขึ้นมาอีกด้วย เพราะฉะนั้นได้ใช้กันไปอีกยาว ๆ แน่นอนครับ
บทความแนะนำ: สอนเปิดร้านค้าออนไลน์ฟรี ด้วย WordPress และ WooCommerce
Software อีกตัวที่หลาย ๆ คนน่าจะรู้จัก คือ Bootstrap ซึ่งเป็น CSS Framework ที่มีคนใช้มากที่สุดในโลก ด้วยความที่มันง่าย และหน้าตาดี ซึ่งถ้าเราอยากเอา JavaScript Component ของ Bootstrap ไปใส่ในโปรเจค เค้าก็บังคับใช้ jQuery ด้วยครับ
อย่างไรก็ตาม ถ้าเราใช้ JavaScript Framework แล้วอยากใช้ Bootstrap ก็ยังพอมีวิธีครับ เพราะมีคนที่ชอบ Bootstrap มาก ๆ ได้จับ Bootstrap มาใส่ React จนได้ หาข้อมูลเพิ่มเติมได้ที่ React-Bootstrap ครับ
ถ้าต้องการใช้ jQuery Plugin
ด้วยความที่ jQuery Plugin มีแทบทุกอย่างในโลกที่เราต้องการ และถ้าเราใช้ JavaScript Framework แล้วเราอยากได้ อาจจะต้องเขียนขึ้นมาใหม่เองทั้งหมด ซึ่งอะไรที่ซับซ้อนก็จะใช้เวลาเขียนหลายวันแน่นอน
ในกรณีนี้ ถ้าใช้ jQuery แล้วจบงานได้เร็วกว่า (หรือบางครั้งก็อาจจะเสียเงินค่า jQuery Plugin ไม่กี่ร้อย) ก็ควรใช้ jQuery ไปเลยครับ เราจะได้เอาเวลาอันมีค่าของเราไปโฟกัสที่การเขียนโค้ดในส่วนอื่น
ถ้าคนในทีมถนัดใช้ jQuery
ในการเลือกเทคโนโลยีมาทำเว็บไซต์ ความถนัดของทีมถือเป็นเรื่องสำคัญครับ การเรียนรู้ JS Library และ Framework แต่ละตัวก็มี Learning Curve แตกต่างกันออกไป อย่าง jQuery และ VueJS ทีมจะสามารถเรียนรู้ได้เร็วมาก ส่วน React หรือ Angular ก็อาจจะใช้เวลาสักหน่อยถ้าต้องเริ่มจากศูนย์ครับ
อย่างไรก็ตาม นอกจากความถนัด เราก็ต้องดูปัจจัยอื่นด้วยครับ เช่น ถ้าเป็นเว็บไซต์ที่จะมีการพัฒนาต่อในระยะยาว การใช้ JavaScript Framework ต่าง ๆ ก็จะดูแลรักษาโปรเจคได้ง่ายกว่าครับ เพราะมีท่าต่าง ๆ ในการจัดเก็บโค้ดให้เป็นระเบียบ มาทำต่อได้ง่าย
สำหรับ jQuery ถ้าโปรเจคใหญ่มาก ๆ การดูแลรักษาก็จะยากกว่า JavaScript Framewok พอสมควรครับ และด้วยความที่เราสามารถเขียนโค้ดใน jQuery ได้แบบไม่ต้องมีโครงสร้างอะไร เลยทำให้หลาย ๆ ครั้งที่ผมเจองานแก้เว็บ แล้วมีโค้ด jQuery พัง ๆ ที่โปรแกรมเมอร์คนเก่าเขียนไว้ ก็ต้องรับกรรมไป T_T
ถ้าอยากเรียน jQuery เริ่มต้นจากไหนดี
วิธีเรียนเขียนโค้ดที่ผมคิดว่าเวิร์คมาก ๆ คือ ต้องลองทำจริง ครับ เพราะการทำเว็บเป็นเรื่องของการลงมือทำมากกว่าทฤษฎี
คอร์สที่เจอว่าฟรี และเนื้อหาโอเค คือ Introduction to jQuery ของ CodeAcademy ครับ สอนเรื่องสำคัญ ๆ ตั้งแต่พื้นฐาน ไปจนถึงการผูก Event และการวิ่งเล่นใน DOM
ถ้าใครสนใจเรื่องเกี่ยวกับ UI/UX และ Front-end Web Development ติดตามเรื่องราวใหม่ ๆ ได้ทางเพจ Designil ของเราเช่นเดิมนะครับผม หรือถ้ามีหัวข้อไหนที่อยากให้พูดถึงก็ Inbox มาคุยกันได้ครับ
