Why React over JQuery?
หลายๆคนที่เพิ่งเข้ามาเขียน web ครั้งแรกหรือห่างเหินจากการพัฒนา frontend web application มาเนิ่นนานมักจะมีปัญหาในการกลับมาทำงานสายนี้ ด้วยอะไรไม่รู้ที่ผุดขึ้นมายุบยับเป็นดอกเห็ดไปหมดในปี 2016 เมื่อเราไปคุยกับเพื่อนร่วมงาน กลับถูกเพื่อนร่วมงานตอกกลับมาว่า
อี๋ เดี๋ยวนี้ใครเขาใช้ JQuery กันฟะ
ตามด้วยคำแนะนำต่างๆนาๆ “React สิไอหนุ่ม”, “Vue แม่งโคตรเด็ดเลยนะน้อง” บลาๆๆ เต็มไปหมด ไอเราก็สงสัยว่าเอ้า แล้ว JQuery มันไม่ดียังไงวะ? เขียนก็ง่าย เขียนอะไรก็ได้ดั่งใจไปหมด แล้วดูดิไอพวก React อะไรที่เขาพูดๆกันเนี่ยมันดียังไงฟะ? ทำไมเราต้องตามไอพวกหัวใหม่ไปเขียนเว็ปด้วย library พวกนี้ด้วย เพราะฉะนั้นวันนี้เราจะมาพูดถึงเรื่องอีพวก JavaScript Lib/framework สมัยใหม่เช่น React เนี่ยมันแก้ปัญหาอะไรของ JQuery บ้าง
บทความนี้เหมาะกับมือใหม่ที่กำลังอยากหัด modern javascript นาจา
JQuery
ถ้าดูเผินๆจาก wikipedia JQuery นั้นเกิดขึ้นมาเพิ่งแก้ปัญหานี้
jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.
หรือแปลง่ายๆว่า
- ง่ายต่อการติดต่อกับ DOM (document object model)
- สามารถสร้างลูกเล่นฟรุ้งฟริ้งได้
- Syntax ตรงตัว สื่อความหมายชัดเจนเช่น
$('#ShubU').on('click', function() {
$('#someText').text( function( e, old ) {
return "Hello World"
}
});แค่อ่านก็สามารถเข้าใจทันทีว่า code นี้ทำอะไร เมื่อคลิ๊กปุ่มที่มี id = ShubU แล้วข้อความใน text ที่มี id = someText ก็จะถูกเปลี่ยนเป็น Hello World ด้วยพลังของ JQuery Selector ($ ในตำนานนั่นเอง)
พูดง่ายๆก็คือถ้าเกิด event ใดๆโดยที่มี function มารองรับขึ้นแล้ว เราสามารถปรับเปลี่ยน DOM ผ่าน $ ได้ตรงๆเลย สะดวกใช่ไหมหล่ะครับ

อ่าวแล้วแบบนี้มีปัญหาอะไรหล่ะ? ลองจินตนาการถึงเว็ปที่มีขนาดใหญ่ขึ้นเรื่อยๆ ประกอบไปด้วย button, form, sidebar, ลูกเล่นต่างๆนาๆซึ่งปรับเปลี่ยนผ่าน event handler ทั้งหลายแหล่ดูนะครับ

ที่นี้ก็จะเริ่มลำบากขึ้นมาหน่อย, เราไม่สามารถรู้ได้ทันทีเลยว่าใครบ้างที่เป็นตัวเปลี่ยน DOM ตัวนี้ การสร้าง Hello world ขึ้นมาหนึ่งประโยคอาจจะเกิดขึ้นมาจากการกดปุ่ม, การพิมพ์ หรือการคลิ๊กบน link ในหน้าเว็ปก็ได้ เพราะงั้นหากงานขยายขนาดขึ้นเรื่อยๆ เส้นระหว่าง Event handler กับ DOM ก็จะมากขึ้นตามไป และจบลงด้วย code ยุ่งๆแผงยาวๆ
เพราะฉะนั้นข้อเสียของ JQuery หลักๆก็คือ
- code ยุ่ง พันกันเป็น spagetti แก้ 1 ที่ bug 4 ที่
- มักจะต้องมานั่งใช้กรรมที่ developer คนเก่าทำไว้
- หลายส่วนของ code ไม่สามารถนำมาใช้ใหม่ได้ (reusable)
React
เราลองนำ code ด้านบนมาแปลงเป็นแบบฉบับ React
export default class App extends Component {
constructor(){
this.state = {
message : “”
}
}
render(){
<div>
<h1> {this.state.message} </h1>
<button onClick = { () => this.setState({message : “hello world”}) }> Click me </button>
</div>
}
}อ่าว ทำไมมันยาวกว่าเดิม อย่าเพิ่งตกใจนะครับ ลองสงบสติแล้วดู code ดีๆ ทุกครั้งที่มีการ click ที่ <button> นั้น state ที่มีชื่อว่า message ก็จะถูกเปลี่ยนจากค่าเดิมให้เป็นค่าใหม่คือ “Hello World” ซึ่ง state ของ message นั้นดันไปผูกกับ tag <h1> ไว้ซะด้วย ดังนั้นข้อความใน <h1> ก็จะแสดงออกมาเป็น Hello world ในที่สุด
จะเห็นว่าจริงๆแล้ว button ของเราไม่ได้เปลี่ยน text ของ <h1> ด้วยตัวเอง แต่ว่า เราแค่เปลี่ยน state ของ text เท่านั้นเอง หลังจากนั้นตัวไหนเปลี่ยนก็เรื่องของ React เขาจัดการไป ใครอยากอ่านเรื่องการจัดการของ React เชิญ

ซึ่งหลังจาก state เปลี่ยนไปแล้ว ก็เป็นหน้าที่ของตัว React เองที่จะไป render ตัวที่ผูกกับ state นี้ไว้ใหม่อีกครั้งและออกมาเป็น output อย่างที่ต้องการ
และเนื่องจาก React เป็น Component based library เราจึงสามารถแบ่ง application เป็น component ย่อยๆได้ ซึ่งแต่ละ component ก็สามารถมี state ของตัวเองและทำงานแยกกันกับ component อื่นๆได้อย่างสิ้นเชิง

เพราะฉะนั้นข้อดีของ React คือ
- ไม่จำเป็นต้องติดต่อกับ DOM (virtual DOM ของ react จัดการให้)
- เล่นลูกเล่นฟรุ้งฟริ้งได้เหมือนเดิม
- code ไม่ spagetti แบบ JQuery เนื่องจากเราจัดการแค่ state เท่านั้น
- สามารถนำ Component ต่างๆมาใช้ใหม่ได้เรื่อยๆ (ดูรูปบนดิ)
- “อาจจะ” ไม่ต้องใช้กรรมจาก dev คนเก่า
ที่บอกว่าอาจจะไม่ใช่อะไร การพัฒนา web ด้วย JavaScript สมัยใหม่มันแลกมาด้วยการศึกษาเพิ่มเติมที่ผุดขึ้นมาเป็นดอกหญ้าหน้าบ้าน ซึ่งถ้าหากไม่ได้ศึกษาและระมัดระวังรอบคอบเพียงพอ สุดท้ายแล้ว code ของคุณก็จะเละไม่ต่างจาก JQuery และต้องกลับมานั่งใช้กรรมในอนาคตอยู่ดี
บรัย
source :
http://maketea.co.uk/images/2014-03-05-robust-web-apps-with-react-part-1/wireframe_deconstructed.png
