React.JS เครื่องมือที่ Frontend Web Developer ต้องลอง!
บทความนี้เป็นส่วนหนึ่งของชุดบทความ “React.JS เครื่องมือที่ Frontend Web Developer ต้องลอง!”
ใครทำงานสาย Web คงจะรู้ดีว่า เทคโนโลยีในสายงานนี้ มันหมุนเร็วมากๆ แต่ละยุค แต่ละสมัย มีพระเอกแจ้งเกิดตลอดเวลา บางตัวก็อยู่ค้างฟ้า บางตัวก็ล้มหายตายจากไปบ้างแล้ว… แต่วันนี้ ผมจะมาขออนุญาตแนะนำเครื่องมือตัวใหม่ที่ผมเพิ่งได้ลอง อันมีนามว่า “React” ที่ริเริ่มโดย Facebook นั่นเอง!
ทำไมต้อง React?
เรื่องที่ 1: มันง่าย!
แต่ยากแค่ตอนเรียนรู้เนี่ยแหละ (Learning Curve สูงนิดนึง)
คุณเคยรู้สึกไหมว่า… Code ที่คุณรับช่วงต่อมา มันพันกันยุ่งเหยิงเหลือเกิน จับต้นชนปลายไม่ค่อยจะถูก… หรืออารมณ์แบบ… ถ้าแก้ตรงนี้ แล้วจะไปทำอย่างอื่นพังไหมน้า… เขียนๆ โค้ดไปแล้วรู้สึกแบบ… ทำไมมันไม่เป็นแบบนี้ว้า~…
ผมรับประกันได้เลยว่า เพียงแค่คุณหันมาใช้ React, ความรู้สึกเหล่านั้นจะหมดไปครับ
React มันช่วยให้เราคาดเดาสิ่งที่จะเกิดขึ้น ง่ายพอๆ กับการนับเลขเลยทีเดียว…
ที่มันทำได้ก็เพราะ การทำงานของมัน เป็นการเก็บข้อมูลต่างๆ ลงในสิ่งที่เรียกว่า State (ให้นึกถึง Global Variables ไปก่อน) ซึ่งไอ้ State นี้เนี่ย มันคือ “ความจริงเที่ยงแท้” (Single-Source-of-Truth) นั่นหมายความว่า Developer มีหน้าที่แค่เปลี่ยนแปลงค่าใน State… ส่วนงานที่เหลือ การ Update ข้อมูลในส่วนๆ ต่างๆ เช่น DIV, INPUT BOX ทั้งหลายแหล่ พวกมันจะรีบกุลีกุจอจัดการตัวเอง เปลี่ยนแปลงแสดงผลด้วยตัวของมันเอง เพื่อเป้าหมายเดียวคือ ให้ User เห็นค่าที่ตรงกับไอ้ Single-Source-of-Truth* ที่เราตั้งไว้!
พูดอีกแบบคือ Developer ไม่มีสิทธิเปลี่ยน DOM เอง… หมดยุคของ jQuery ที่ต้องมา GetElementById แล้ว Set HTML ไปแล้วครับ…
เปลี่ยน DOM แบบ jQuery ไม่ดีตรงไหน ?
มันเขียน Code ง่าย แต่ดูแลยากครับ… แค่นั้นแหละ… การที่คุณเปลี่ยน innerHTML ของแต่ละ Element ด้วยมือเอง คุณไม่ได้คำนึงถึงเรื่องการ Reusable กับส่วนอื่นๆ ของเว็บเลย นั่นหมายความว่า หากในอนาคต เว็บมีการเปลี่ยนแปลง หรือทีมใหม่เข้ามาดูแลต่อ… มันไม่ใช่งานสนุกเลยครับ (#อินเนอร์แรง)
แล้ว React ดีกว่ายังไง ?
พอไม่ได้เปลี่ยน DOM ด้วยมือ… ก็ต้องใช้วิธีสร้าง Component ครับ… ถ้าเปรียบเทียบ Component ใน OOP ก็คือ การสร้าง Class นั่นแหละ มันมีกฎเกณฑ์ มีรูปแบบ ง่ายต่อการดูแล งานแรกสุดของ React ก็คือการ Design Components นี่แหละครับ
เรื่องที่ 2: เครื่องมือ Debug สุดอลังการ!
อันนี้ แถมมากับกล่องเลยนะครับ… Out-of-the-Box! คุณได้ทั้งหมดไปเลย ไม่ต้องโทรมาตอนนี้ด้วย! ดูรูปประกอบด้านล่าง
จากรูปคือ…
- อย่างที่บอกไว้ในเรื่องที่แล้ว… React จะเก็บ State ของข้อมูลที่เปลี่ยนแปลงเอาไว้ จากตัวอย่าง เช่น ถ้า User เปลี่ยนวันที่ Check-in… React ก็เปลี่ยนข้อมูลนั้นใน State… หลังจากนั้น, Component ทุกอย่างที่เกี่ยวข้อง (เช่น Check-out Date จะต้องเปลี่ยนตาม) มันก็จะรีบจัดการตัวเอง ให้ตรงกับ “ค่าความจริงเดียวนั้น” ปัญหาเรื่องความไม่ตรงกันของข้อมูลจะหมดไป… (แถม Code สวยมาก… เห็นแล้วมีความสุข… นอนหลับฝันดี)
- จากข้อ 1… ไม่ช้าครับ! คือบางคนเป็นห่วงว่า มันดูต้องคิดเยอะนะ… ไม่ต่างกับ Refresh หน้าเลยปะเนี่ย…. ไม่ใช่ครับ! React มีเทคโนโลยี VirtualDOM ซึ่งจะทำให้ React ฉลาดพอที่จะรู้ว่า เปลี่ยนแค่ตรงนี้พอนะ ตรงอื่นดีอยู่แล้ว อะไรแบบนี้
- Replay ได้…! มันช่วยให้งาน Debug ง่ายขึ้นมากๆ ครับ แถม Cool สุดๆ…
เรื่องที่ 3: JSX !
JSX มันคือ Syntax ใหม่ ที่มาพร้อม React เนี่ยแหละ… ซึ่งมันทำให้ Code ของ HTML กับ Javascript Blend กันอย่างสวยงาม… #มีความลงตัว อารมณ์เหมือนได้มองงานศิลปะอะไรแบบนั้นเลย… ที่สำคัญ, มันง่ายมากๆ คือถ้าคุณเขียน HTML เป็นอยู่แล้ว คุณก็ไม่ต้องเรียนรู้อะไรเพิ่มเลยหละ 555
อย่างที่บอกคือ React Developer จะใช้เวลาส่วนใหญ่ วนเวียนอยู่ตรงการจัดการพวก Component เนี่ยแหละ แล้วแต่ละ Component มันก็จะต้องมีโครงสร้าง HTML ของมัน จากรูปประกอบข้างบนที่เห็น ก็คือ Component ชนิดนึง ที่ตั้งชื่อไว้ว่า HelloMessage เวลาจะเรียกใช้ Component นี้ ก็เรียกแบบ HTML ได้เลย คือ <HelloMessage /> ส่วนไอ้ JSX เนี่ย, มันก็ช่วยให้เรายัด HTML ลงไปใน Javascript ได้แบบสวยๆ เลย ไม่ต้องใส่ฟันนงฟันหนู อะไรให้วุ่นวาย… การ Highlight Syntax ใน IDE ก็เลยสวยงามตามท้องเรื่อง (#ปลื้มปริ่ม) แถมถ้าหากจะแทรก JS ลงใน HTML ที่บังเอิญอยู่ใน JS อีกที… ก็ทำได้ง่ายๆ แค่ใส่ {} คร่อม JS ไปเลย… โอ้ว… ขอบคุณ Facebook…
เรื่องที่ 4: ES6!
ออกตัวแรงก่อนเลยว่า… ผมชอบ Java และเกลียด Javascript มากกกก… (แต่งานหลัก เป็น PHP Developer 555) เพราะก่อนหน้านี้ Javascript มันไม่ใช่ OOP! (มันทำได้ แต่มันแค่ wanna-be) อีกเรื่องก็คือ ผมชอบ TypeHint มาก อย่างใน Java มันช่วยให้เราเรียนรู้งานคนอื่นได้เร็ว เวลาที่เราใช้ IDE ดีๆ Class ต่างๆ ใน OOP บวกกับ TypeHint ดีๆ มันก็จะช่วยให้การ suggest หรือ autocomplete ฉลาดขึ้น คอยแสดง method ต่างๆ ที่เราสามารถเรียกใช้ได้ แสดงคู่กันกับ Type ของ Parameter ที่ต้องยัดลงไปในนั้น… หากถึงคราวที่ต้อง Refactor Code ก็ไม่ต้องลงทุนลงแรงอะไรแบบพลิกฟ้าคว่ำแผ่นดิน…
แต่ๆๆๆ…! ตอนนี้ผมบอกได้เลยว่า ผมเริ่มชอบ Javascript มากขึ้นละ… ด้วยการมาของ ES6 มันเริ่มเห็นภาพ OOP ชัดเจนขึ้น… แถมถ้าอยากได้ TypeHint จริงๆ ก็มี Transpiler แบบ TypeScript ติดตั้งเพิ่มได้… สรุปก็คือ Javascript IDE ฉลาดแล้ว เย้!
เรื่องที่ 5: มันออกแบบบน Unix Concept…
คือผมก็ไม่ใช่แฟน Unix จ๋า… แต่สิ่งนึงที่ดีงามของ Unix ก็คือ โปรแกรมต่างๆ ใน Unix มัน Lean มากๆ… ใครเคย install โปรแกรมใน Linux จะรู้ว่า แต่ละโปรแกรมมันใช้ Dependencies มากมายก่ายกอง… ข้อดีของมันก็คือ มันทำให้ Unix อยู่ยั้งยืนยง หาก Library ตัวไหนมีปัญหา ก็แค่ตัดเนื้อร้ายส่วนเล็กๆ นั้นทิ้งไป… ไม่ใช่ว่าจะต้องตัดทั้งแขนขา หรือเปลี่ยนตับไตไส้พุง อะไรแบบนั้น
React ก็เช่นกัน มันไม่ใช่ Framework! มันเป็นแค่ Library… ซึ่งนอกจากขนาดมันจะเบาหวิวแล้ว มันเกิดมาเพื่อทำหน้าที่เดียว คือ การรักษา Single-Source-of-Truth* นั่นแหละครับ ส่วนถ้าคุณจะทำเว็บจริงๆ จังๆ คุณต้องพึ่งพา Lib อื่นๆ อีกเยอะเลย ยกตัวอย่างเช่น react-router, redux, reselect, sagas etc… แต่ไม่ต้องห่วงครับ… มีผู้ใหญ่ใจดี ทำ Starter Kit ให้เราเริ่มต้นกันได้ง่ายๆ แบบเบบี้เสตป เพื่อให้เด็กน้อยอย่างเราๆ ก้าวไปสู่ทางที่ถูกที่ควร…
ซื้อแล้วหละ… แล้วจะเริ่มเขียน React ยังไงดี
อย่างที่บอกไปว่า มี Opensource Project มากมาย ที่ช่วย Guide พยุงพาเราไปสู่ React Developer แบบง่ายๆ ครับ #ในส่วนของผมนั้น ผมใช้อันนี้ครับ
หรือ ถ้าใครอยากหาตัวเลือกอื่นๆ ก็ Search ใน GitHub เองได้เลยครับ มีให้เลือกตามรสนิยมส่วนบุคคล หรือไม่ ลองดูเว็บข้างล่างนี้ก็ได้ครับ มีคนทำเอาไว้ดีมาก
หรือหากต้องการเริ่มจากแก่นของ React แท้ๆ แบบยังไม่รวม Lib อื่นๆ แนะนำให้เริ่มเรียนจากสองลิงค์นี้ครับ
- Learn raw React NO JSX, FLUX, ES6 and WEBPACK
http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ - Build your own React Starter Kit (including Babel, Webpack and Express)
http://andrewhfarmer.com/build-your-own-starter/
สรุป
เชื่อเถอะครับ… ถ้าต้องเริ่ม Project ใหม่ ที่เน้น Frontend หนักๆ… ลอง React เถอะครับ Library ต่างๆ พื้นฐาน ก็มีครบครัน อย่าง Datepicker นี่… บอกได้เลยว่า ไม่เคยมีครั้งไหน ที่ติดตั้งได้ง่ายขนาดนี้มาก่อนเลยในชีวิต 555… ก็นั่นแหละครับ หา Lib ที่ถูกใจ จัด Deck กันตามสบาย แล้วมาออกลุยอย่างห้าวหาญ ในโลกของ React กันเถอะ!
ปล. ตอนแรกว่าจะเขียนแค่ 3 เรื่องนะ กำลังดี… แต่ข้อดีมันงอกออกมาเองจริงๆ
ปล.2 บทความนี้เอียงตรงเปรียบเทียบแค่กับ jQuery… มวยจริงๆ น่าจะต้องงัดกับ AngularJS… (ตอนนี้มี v2 แล้วด้วย) แต่เท่าที่ research มา สรุปสั้นๆ คือ #ไม่ผ่าน ไว้จะมาเล่าอีกที บทความหน้าละกันครับ
หมายเหตุ*: Single-Source-of-Truth จริงๆ แล้วเป็นความสามารถของ Redux ครับ ซึ่งเป็นตัวช่วย React อีกทีหนึ่ง เข้ามาช่วยจัดการ State ต่างๆ ให้เป็นระบบระเบียบมากยิ่งขึ้น
บทความอื่นๆ ในชุดบทความนี้
คำถามท้ายบท
- Web Project ของคุณปัจจุบันใช้ Technology Stack อะไรอยู่? เจอปัญหาอะไรบ้างไหม?
- ถ้าให้เริ่ม Project ใหม่ คุณสนใจเครื่องมือตัวไหน? เพราะอะไร?
ถ้าถูกใจบทความ ขอฝากกดไลค์ Facebook Page เตาะแตะต๊อกแต๊ก ทีนะคร๊าบบ https://www.facebook.com/rootusercc/ เป็นกำลังใจให้ผู้เขียนสุดพลัง :-)
