MERN Stack คืออะไร ?

MERN Stack ก็คือ Tech Stack (Technology Stack) ที่ใช้ในการสร้างเว็บไซต์ หรือ Web Application รูปแบบหนึ่ง โดยคำว่า M E R N เป็นคำย่อของเทคโนโลยี 4 อย่าง เพื่อกระชับให้เดฟไม่ต้องพูดชื่อเต็ม

MERN Stack ประกอบไปด้วยอะไรบ้าง?

1. M MongoDB - ฐานข้อมูลแบบ NoSQL
2. E Express - เฟรมเวิร์กที่ช่วยในการเขียนเว็บเซิร์ฟเวอร์บน Nodejs
3. R React - Library ฝั่ง Frontend
4. N Nodejs - ตัวรัน Server (Runtime Environment)

ภาษาเดียวเอาอยู่ ด้วย JavaScript (จาวาสคริปต์)

สิ่งที่น่าใจคือ React Nodejs และ Express ซึ่งเป็น 3 แกนหลักของ MERN Stack นั้นใช้ภาษา JavaScript ในการเขียน แปลว่าหากเราเข้าใจภาษา JavaScript เราก็แทบจะเขียน MERN Stack ได้ทั้งหมดแล้ว

ใช้ภาษาโปรแกรมภาษาเดียวดีอย่างไร?

การใช้ภาษาโปรแกรมภาษาเดียวทำให้เดฟเรียนรู้ได้ไว นอกจากนั้นการทำงานเป็นทีมก็ง่ายขึ้นด้วย คนในทีมจะสามารถอ่านและเข้าใจโค้ดได้ง่าย ไม่ว่าคนๆ นั้นจะเมนในการเขียน Frontend หรือ Backend ก็จะสามารถเข้าใจโค้ดได้ทั้งหมด และสำหรับเดฟที่เป็น Full Stack เขียนทั้งหน้าบ้านและหลังบ้าน ก็จะไม่เจอปัญหาเรื่องความสับสนของ Syntax เมื่อต้องเขียนสลับฝั่ง

Nodejs คืออะไร

เดิมที JavaScript เป็นแค่ภาษาที่ใช้ในเว็บเบราว์เซอร์และไม่สามารถนำมารันเป็นเซิร์ฟเวอร์ได้เหมือนปัจจุบัน แต่ต่อมาในปี 2009 นาย Ryan Dahl ได้พัฒนาต่อยอด JavaScript เป็น Runtime Environment หรือที่เราเรียกกันว่า Nodejs ที่สามารถใช้รันเซิร์ฟเวอร์ได้ (ขอกราบงามๆ โดยส่วนตัวผมใช้ Nodejs เยอะมากๆ)

Nodejs ช่วยให้เขียนเร็วอย่างไร ?

ข้อดีของ Nodejs คือมี Library เยอะมากๆ หากเราเข้าไปที่เว็บ npm แหล่งรวบรวมแพ็คเกจ Nodejs จะพบว่ามีแพ็คเกจมากถึงล้านแพ็คเกจ (แต่อันที่สามารถนำมาใช้ในงานเราได้จริงก็อีกเรื่องนึงนะ ฮ่าๆ) ในการทำโปรเจคเราสามารถไปหยิบแพ็คเกจต่างๆ จาก npm (หรือ yarn) มาเสริมเติมต่อโปรเจคเราได้อย่างง่ายดาย นั่นเลยเป็นอีกหนึ่งสาเหตุว่าทำไม MERN Stack ถึงเขียนได้เร็ว

Express คืออะไร ?

Express คือ Framework ที่ช่วยให้เขียนเว็บเซิร์ฟเวอร์บน Nodejs ได้สั้นและง่ายขึ้น เราสามารถติดตั้ง Express ง่ายๆ ผ่าน npm ซึ่งเป็นแหล่งรวบรวมแพ็คเกจ Nodejs ตามที่ผมได้กล่าวถึงด้านบน

การเขียน API จำนวนหนึ่งเราต์โดยไม่ใช้ Framework หรือ Library อาจต้องเขียนโค้ดยาวถึง 10 บรรทัด ในทางกลับกัน Express สามารถช่วยให้เขียนเสร็จได้ภายใน 3 - 4 บรรทัด !

ตัวอย่างการเขียนเราต์ GET "/" เพื่อรับข้อความ "success" กลับมาด้วย Express

const express = require("express");
const app = express();

app.get("/", (req,res) => {
    res.status(200).json({message:"success"});
})

React คืออะไร ?

React เป็น Library ฝั่ง Frontend ที่มีจุดประสงค์ช่วยให้เว็บไซต์มีการ "โต้ตอบ" หรือมีความ "Reactive" มากขึ้น แต่สิ่งหนึ่งที่เราจะได้รับมาด้วยจากการใช้ React คือการ "ใช้ซ้ำ" ลองจินตนาการดูครับ หากเราต้องเขียนโค้ดเพื่อสร้างโพสต์ข้อความซ้ำๆ เป็น 10 รอบมันจะเหนื่อยแค่ไหน

เราสามารถใช้ React แก้ปัญหานี้ได้ โดยการเขียนโค้ด Component ของตัวโพสต์ข้อความแค่ครั้งเดียว และนำมาใช้ซ้ำได้ 10 รอบ หรือเป็น 100 รอบก็ได้! แค่เปลี่ยนตัวข้อความข้างในอย่างเดียว ไม่ต้องมานั่งเขียน html css อีกรอบ ตัวอย่างการใช้งาน React ที่เด่นๆ ก็จะมี Facebook กับ Instagram ที่มีโพสต์จำนวนมาก (และผู้สร้าง React ก็คือ Facebook หรือ Meta นั้นเอง)

React ยากมั้ย ?

ถ้าสำหรับใช้เขียน Frontend ทั่วไปต้องบอกเลยครับว่าง่ายมาก ตอนที่ผมเพิ่งเริ่มเรียน React ผมใช้เวลา 3 - 4 วันก็สามารถใช้ฟังชันก์ได้เกือบทั้งหมด (เขาเรียกกันว่า Hooks นะครับ) แต่ ! หากต้องการเขียนแอปพลิเคชั่นที่มีสโคปใหญ่ ก็อาจต้องใช้เวลาเรียนรู้พอสมควรครับ เพราะตัว React เองนั้นเหมือนเป็น Library ขนาดเล็กที่ไม่ได้มีของครบครันเหมือน Angular เดฟอาจต้องศึกษา Third-Party Library เพิ่มเติมเอง

ยกตัวอย่าง Third-Party Library ที่ใช้บ่อยก็จะเป็น Redux และ React Router ครับ
ทั้งนี้ เวลาที่ใช้ในการเรียนรู้ Redux กับ React Router ก็ไม่ได้นานมากครับ แค่ 1 - 2 สัปดาห์ ก็จะเริ่มเข้าที่แล้วครับ

สุดท้าย MongoDB คืออะไร ?

MongoDB ฐานข้อมูลประเภท NoSQL เป็นฐานข้อมูลที่มีโครงสร้างแบบ JSON ซึ่งเป็นสิ่งที่ชาวเดฟคุ้นเคยและใช้งานบ่อย จึงทำให้เดฟไม่ต้องเรียนรู้อะไรเพิ่มเติม นอกจากเรียนฟังชันก์ของ MongoDB โดยฟังชันก์ที่ใช้หลักๆ มีแค่ไม่กี่อย่างครับ เช่น find() findOne() findOneAndDelete() findOneAndUpdate() findOneAndReplace() (อันนี้กรณีที่ใช้กับ Nodejs นะครับ) ต้องบอกเลยว่าใช้งานง่ายมาก ชื่อฟังชันก์ก็เป็นตัวใบ้อยู่แล้วว่าใช้ทำงานอะไร

MongoDB กับการใช้งานขั้น Advance

แต่ถ้าถามว่ามีจุดที่ยากมั้ย ก็พูดตามตรงว่ามีครับ ด้วยความที่ MongoDB เป็นฐานข้อมูลแบบ JSON เพราะฉะนั้นเราอาจจะเจอกรณีที่ข้อมูลมีการ Nested และมีความซับซ้อน เช่น

{
    posts:{
        categoryOne:[{subCategoryOne:[1, 2, 3]},{subCategoryTwo:[1, 2, 3]}],
        categoryTwo:[{subCategoryOne:[1, 2, 3]},{subCategoryTwo:[1, 2, 3]}]
    },
    username: "admin",
    password: "1234",
    record:[[1, 2],[1],[3, 1, 2]]
}

จะเห็นได้ว่าข้อมูลนี้ Object และ Array มีการซ้อนทับกันไปมา ในตอนดึงข้อมูลมาใช้หรือแก้ไข อาจทำให้เราปวดหัวได้ เพราะฟังชันก์จะต้องเขียนยาวมาก แต่ยังไงก็ตามเราก็ยังสามารถหาตัวช่วยจาก Google ได้อยู่ดีครับ

สรุป

MERN Stack ก็คือ Tech Stack ที่ประกอบไปด้วย MongoDB Express React และ Nodejs และเป็น Tech Stack ที่มีข้อดีจำนวนมากที่ช่วยให้เดฟเขียนโค้ดได้ง่ายขึ้นและเร็วขึ้นครับ

สำหรับบทความนี้ ขอตัวลาไปก่อนครับ ขอบคุณครับ - เพชร