แน่นอนว่าสมัยนี้หลายๆ คนคงรู้จักพลังของ Node JS และเริ่มใช้งาน MEAN Stack ในการทำระบบเว็บแอพพลิเคชั่นกันบ้างแล้ว
และส่วนประกอบหนึ่งของ MEAN Stack ฝั่งหน้าเว็บ หรือที่เรียกกันว่า Front-end ก็คือ Angular นั่นเองครับ
ทีนี้เรื่องมันมีอยู่ว่า โลกยังมี Framework อีกตัวหนึ่งที่ชื่อว่า React (ริเริ่มโดย Facebook) ซึ่งได้รับการยอมรับในเรื่องประสิทธิภาพฝั่ง Front-end ที่แจ่มแจ๋วมากๆ
แต่ถ้าเราอยากพัฒนาระบบเว็บแอพพลิเคชั่นด้วย MEAN Stack แต่ไม่อยากใช้ Angular อยากใช้ React แทนจะเป็นไปได้ไหม
มีตัวเลือกหนึ่งครับ คือแทนที่เราจะใช้ MEAN เราก็ใช้ “เมิน” (MERN) ซะเลย!
ปล. อ่านๆ ไป ก็อย่าเพิ่ง “เมิน” หน้าหนีนะ 555
เปิดอบรม React Native สำหรับผู้เริ่มต้น
ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้
MERN: เมื่อ MEAN Stack ไม่ใช้ Angular แต่ใช้ React แทน
เจ้า MERN เนี่ย การทำงานก็เหมือนกับ MEAN Stack ล่ะ เพียงแต่แทนที่เราจะใช้ Angular เราสลับมาใช้ React และ Redux แทน
ดังนั้นสำหรับคนที่ใช้ MEAN Stack เป็นแล้ว แต่ดันอยากใช้ React + Redux แทน ก็สามารถใช้ MERN เป็นตัวสร้างโปรเจคเว็บแอพพลิเคชั่นแทนได้
รายละเอียดเพิ่มเติมมีดังนี้ครับ
MERN และ Web Pack
ระบบ MERN ก็มีการใช้ Web Pack ในการทำงาน
โดยมีการแบ่งไฟล์ Web Pack ออกเป็น 2 ไฟล์ นั่นคือ:
-
- webpack.config.dev.js สำหรับใช้ในการพัฒนา
- webpack.config.prod.js สำหรับใช้ใน Production
MERN และ Express
เหมือนกับ MEAN Stack ทาง MERN ก็ใช้ Express เป็นตัว server ครับ
นอกจากนั้นในระบบ Server Rendering ทาง MERN ได้ใช้ฟังก์ชั่น match ของ react-router ในการจัดการ request ของเว็บแอพพลิเคชั่น
Route ทั้งหมดจึงถูกรวมไว้ในไฟล์ shared/routes.js
เริ่มสร้างเว็บแอพพลิเคชั่นด้วย MERN
เอาล่ะ ทำความเข้าใจพอแล้วเราก็มาลองสร้างโปรเจคด้วย MERN กัน
1. ขั้นแรก: ติดตั้ง MERN
เปิด Command Prompt (เครื่อง Windows) หรือ Terminal (เครื่อง Mac) ขึ้นมาแล้วสั่งคำสั่งต่อไปนี้เพื่อติดตั้งระบบ MERN-CLI
npm install -g mern-cli
2. สร้างโปรเจคด้วย MERN
จากนั้นให้ลองใช้คำสั่งในการสร้างโปรเจคเว็บแอพพลิเคชั่นดังนี้
mern NextflowMern
3. ติดตั้ง Node Package
หลังจาก MERN สร้างโปรเจคให้เราเสร็จแล้ว ก็เข้าไปติดตั้ง Node Package อื่นๆ
cd NextflowMern npm install
4. เริ่มการทำงานของเว็บแอพ
ใช้คำส่ังต่อไปนี้ เริ่มรัน server ของเว็บแอพพลิเคชั่นครับ
npm start
สรุป
นั่นคือ เมิน (MERN) คล้ายๆ กับ express-generator ที่เอาไว้สร้างโปรเจคเว็บแอพ สำหรับใช้แบบ MEAN Stack ล่ะ
ใครชอบ React + Redux และสร้างเว็บแอพพลิเคชั่นด้วยโครงสร้างของ MEAN Stack แทน ก็เลือกไปใช้ได้เลย
เปิดอบรม React Native สำหรับผู้เริ่มต้น
ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้
อ้างอิง – MERN.io