React มาทำความรู้จักกันก่อนเถอะ

เกริ่นนำ

หลังจากที่ได้คลุกคลีกับ Angular JS มาเป็นเวลา 3 ปี ก็ถึงเวลาที่ผมต้องยกธงขาว ยอมแพ้ในการไล่ตามการเปลี่ยนแปลงของตัว Framework จาก Angular 1 ไป Angular 4 ผมก็เลยมาตัดสินใจว่า คงถึงเวลาที่จะไปศึกษา Library คู่แข่งอีกตัวซะแล้วล่ะ ดูเหมือนว่าวิธีการเขียนจะนิ่งกว่าทางฝั่ง Angular นี้เยอะมาก แน่นอนว่าผมพูดถึง React JS นี่เองครับ

ทำไมต้อง React

React นั้นเป็น Library ตัวนึง ที่เอาไว้ใช้ Render UI แค่นั้นเองครับ ผิดกับ Framework อย่าง Angular ที่ทำทุกอย่างครบจบในตัวมันเอง แน่นอนว่าถ้าเราอยากจะเขียนเว็บๆนึง เราไม่สามารถใช้แค่ React ทำขึ้นมาได้ ต้องเอาไปผสมกับ Library ตัวอื่นๆ เพื่อให้มันทำงานได้ครบจบสมบูรณ์นั่นเอง

อ้างอิงจากทาง github ละกันนะครับ (อธิบายง่ายๆเว็บนี้เป็นเว็บบริการเก็บโค้ดที่เป็นที่นิยมมากๆ เพราะถ้าเป็น Open Source จะสามารถเอาลงได้ฟรี พร้อมระบบ Source Control ยอดนิยมอย่าง .git หลายๆคนก็ทำ Portfolio เก็บไว้บนนี้ สะดวกสบายในการสมัครงาน) ใน Link จะเห็นว่า Framework ยอดนิยมตอนนี้ React กระโดดขึ้นมาเป็นที่ 1 เลยครับ

Trend ของ JavaScript frameworks แคปจอเมื่อ 7/5/2017

นอกจากนั้นดู Logo สิครับ Facebook บริษัทยักษ์ใหญ่เจ้าของ Social Media ที่ใหญ่ที่สุดในโลกเป็นผู้พัฒนาหลักร่วมกับคนอื่นๆบน community github แน่นอนว่าเว็บเฟสบุ๊คที่เราเล่นกันอยู่ทุกๆวันนี่ก็ถูกพัฒนาโดยใช้ React เป็นส่วนหนึ่งในนั้นเหมือนกัน นี่เป็นอีกเหตุผลหลัก ที่ผมเลือกเริ่มศึกษา React มันทำให้ผมมั่นใจได้ว่า เออ มันมีเว็บที่ใหญ่ๆ ที่ทำงานได้ดีมากๆ ออกมา Production ให้เราใช้งานได้จริงๆนะเห้ย มีหลักฐานอะ มันก็น่าจะดีในระดับหนึ่งแหละ

มารู้จักการทำงานคร่าวๆของ React กัน

ตอนนี้ผมเหมือนเด็กน้อยอมมืออะครับ ความรู้ทางฟาก React ผมมี 0 เลยก็ว่าได้ เริ่มตรงไหนดีล่ะทีนี้ เล่นให้มันง่ายๆละกัน ประเดิมด้วยการเปิดเว็บมันอ่านก่อนเลย

ความสามารถหลักๆ ที่โชว์เด่นบนหน้าเว็บ React เลยครับ

Declarative

จะให้อธิบายก็คงจะยากแฮะ เอาเป็นว่ามาดูตัวอย่างนี้กันเลยดีกว่าครับ

ขอบคุณแนวคิดจาก Stack Overflow นี้เลยครับ

มีเด็กนักเรียนห้าคนอยู่ในห้อง แต่ละคนมีเลขที่กำกับอยู่

let students = [ 1, 2, 3, 4, 5 ];

แล้วตอนนี้ผมอยากจะให้คนที่มีเลขที่ ที่เป็นเลขคี่แยกออกมา

ซึ่งวิธีแบบ Declarative ก็จะบอกแค่ว่าผมอยากได้เด็กที่มีเลขคี่ (เมื่อ mod % กับสองแล้วผลลัพธ์ต้องไม่เป็น 0 เท่านั้นนะ) ( mod % คือการหารแล้วเอาเศษมาเป็นผลลัพธ์ครับ) โค้ดจะออกมาหน้าตาประมาณนี้

var results = students.filter((number) => number % 2 != 0);

จะเห็นว่าเออ สั้นๆดีนะ เราแค่บอกว่า เรา “อยากได้อะไร” ส่วนไอ่ตัว function filter นั่นน่ะ จะไปหามายังไงก็ปล่อยมัน เราไม่สน Declarative = Tell only what we want

แต่ถ้าเป็นอีกแบบล่ะ

อีกแบบมีชื่อว่า Imperative ส่วนนี้ก็ง่ายๆเลย ตรงข้ามกับด้านบน เราจะบอกว่า “ทำอย่างไร” เป็นขั้นตอนทีละสเต็ป โค้ดก็จะหน้าตาประมาณนี้

let results = [];
students.forEach( (student) => {
    if(student % 2 != 0) {
        result.push(student);
    }
}

จากโค้ดด้านบนจะเห็นว่า เราจะบอกละเอียดเลย สร้างตัวแปรนะ เอาก้อน students มาวนทีละรอบนะ แล้วเช็คทีละตัวว่าเป็นเลขคี่ไหม ถ้าเป็นก็เอาใส่ไว้ในก้อน results บอกหมดทีละอย่างๆ เป็นขั้นเป็นตอน Imperative = Tell how it’s done

แน่นอนว่า React เป็นแบบ Declarative นั่นทำให้โค้ดสั้น อ่านง่ายแบบด้านบน ซึ่งตัว React Library เองและ JavaScript ก็จะเตรียม function ต่างๆไว้ให้เราเลือกใช้อยู่แล้ว เหมือนกับ filter function ด้านบนในตัวอย่างที่เป็น function ของ Array ใน JavaScript นั่นเอง แต่ถ้าใครอยากได้พวกฟังก์ชั่นช่วยเหลือประมาณนี้ล่ะก็ผมขอแนะนำให้ไปดู Lodash เอาไว้ก็ไม่เสียหายครับ

และเขาก็เคลมมาว่า การเขียนโค้ดแบบ Declarative นี่จะช่วยให้โค้ดอะคาดเดาได้ง่าย เขียนง่าย แถมยัง Debug ง่าย (เป็นการไล่หาว่าโค้ดมีข้อผิดพลาดตรงไหน เวลามีอะไรพัง)

นอกเหนือจากการเขียนโค้ดแบบ Declarative แล้ว ทาง React ยังบอกด้วยว่าเป็น Library ที่เหมาะกับการทำ Interactive User Interface หรือหน้าจอที่มีการตอบสนองต่อผู้ใช้ได้อย่างดี เพราะว่าทาง React ได้ใช้ Virtual DOM เข้ามาช่วย

เอ้าแล้ว Virtual DOM นี่คืออะไรล่ะ แปลง่ายๆจาก Wikipedia เลยก็คือการจำหน้าจอไว้ในหน่วยความจำชั่วคราว (in-memory cache) แล้วพอ User กดปุ่ม หรือทำอะไรกับหน้าจอ ตัว React ก็จะเอาข้อมูลนี่แหละมาเทียบกับตัวที่เก็บไว้ในหน่วยความจำชั่วคราว แล้วเช็คดูว่า มีส่วนไหนที่ต้องวาดใหม่ไหม แล้วก็ทำการวาดใหม่แค่ “บางจุด” เท่านั้น วิธีนี้ทำให้ได้ความเร็วในการ render เพิ่มขึ้นมามากมาย

Component-Based

ส่วนนี้ทาง React เขียนไว้ว่า เราสามารถเขียนโค้ดแบ่งเป็น Component ส่วนเล็กๆ ที่แต่ละส่วนก็จะจัดการแต่ State ของตัวเองไป แล้วค่อยนำมาประกอบกันเพื่อเป็นแอพใหญ่ทีหลัง

ไอเดียนี้มันก็คุ้นๆนะครับ คล้ายๆกับแนวคิดของ OOP เลยเนาะ มีการ Encapsulate แยกส่วนโค้ด ไว้เป็นส่วนเล็กๆ อีกทั้งเรายังสามารถนำ Component มาเขียนต่อยอดกันอีกก็ย่อมได้ คุ้นๆมั้ยครับคล้ายๆ Inheritance ใน OOP เลยอะ

ส่วนตัวแล้วผมชอบมากนะครับ มันช่วยให้เรา Reuse Component ได้ง่ายมากๆ อีกทั้งเวลาเราจะอัพเดทอะไรที มันจะไม่ค่อยกระทบส่วน Component อื่นๆ เวลาแอพเราโตๆไปมากๆ ช่วยลดความปวดหัวไปได้เยอะมากเลย

และอีกอย่างก็คือทั้งส่วนที่เป็น User Interface และส่วนที่เป็น Logic ในการทำงานก็จะอยู่ในไฟล์ JavaScript ทั้งหมด ซึ่งทำให้ง่ายในการโยนข้อมูลจากฝั่ง Logic เข้าไปวาดใน User Interface

หลายๆคนที่ผันตัวจากการเขียนเว็บแบบที่มี html mark up มีเปิดแทก ปิดแทก ก็คงจะตื่นเต้นเบาๆนะครับ เพราะว่าตอนเราเขียน React อะทุกอย่างจะเขียนรวมอยู่ในไฟล์ .js ทั้งหมด แต่ถึงยังไง ทุกท่านก็จะยังสามารถไปเปิดแทก ปิดแทก ได้แบบเดียวกันกับไฟล์ .html แค่มี syntax เปลี่ยนนิดๆหน่อย

โดย React จะใช้ JSX เข้ามาช่วยให้เราสามารถเขียน html markup ได้ในไฟล์ .js เลย ผมว่าเท่านี้ก็คงจะโอเคแล้วล่ะ ซึ่งไอ่เจ้า JSX นี่จะช่วยแปลงตัว mark up ที่เราเขียนในไฟล์ มาเป็นโค้ด JavaScript เองโดยอัตโนมัติ ตัวอย่างก็ประมาณนี้

<div className="red">Children Text</div>;

ก็จะแปลงได้

React.createElement("div", { className: "red" }, "Children Text");

และพอทำการ compile ออกมาก็จะได้ User Interface เหมือนกับที่เราเขียนบนไฟล์ .html ตามปกติเลยล่ะ ซึ่งกระบวนการแปลงนี้ทาง React Library จะแอบทำให้เราเองด้วย แหล่มแมวมากๆเลยเด้อ

Learn Once, Run Anywhere

เย้ อันสุดท้ายละโว้ยยยยยย

ส่วนนี้หลักๆแล้วก็จะบอกว่า เราสามารถใช้ React เข้ากับ Library ตัวอื่นๆที่เราถนัดได้เลย ไม่มีปัญหา เพราะว่าไอ่ตัว React มันก็ JavaScript ธรรมดาๆ นี่แหละ เราเก่ง Jquery ก็จัด Jquery ไปเลยไม่มีปัญหา

เราสามารถ render เว็บที่เขียนจาก react บนฝั่ง server ได้ด้วย ซึ่งจะช่วยในเรื่องของ SEO ให้สามารถเข้ามาอ่านเว็บเรา และจัดอันดับบน google ได้ดีกว่าแบบที่ render ในฝั่ง client (บนเครื่องของผู้ใช้)

และเหตุผลที่สำคัญที่สุด ก็คือเราสามารถเอามาเขียนเป็น React Native ที่ได้ผลลัพท์ เป็น Native Code ที่เร็วปรู้ดปร้าด Performance ดี หน้าตาสวยงามเหมือนแอพ เรียนทีเดียวนี่คุ้มเลยผม

สรุป พอละครับ ง่วง

แต่ทั้งนี้ทั้งนั้น ผมจะเริ่มจากการเขียนเว็บก่อน ค่อยๆขยับขยายไปทีละนิดๆ ไม่คิดว่ามันจะยาวขนาดนี้นะเนี่ย แค่อธิบายคร่าวๆ ลากมาซะเยอะเลยผม หวังว่าทุกท่านคงจะได้ความรู้ จากการเล่าเรื่อยๆเปื่อยๆ ของผมไปบ้างไม่มากก็น้อยนะครับ ไว้รอบหน้าก็คงจะลงมือเริ่มเซ็ทอัพ เขียน React บนเครื่องกันเลยดีกว่า วันนี้ก็ขออำลานะครับ สวัสดี