มารู้จักกับ JAMstack และ การมาถึงของยุค Headless CMS กัน
วันนี้เราจะมาทำความรู้จักกันว่า JAMstack กับ Headless CMS คืออะไรกันแน่?
JAMstack คืออะไร?
ต้องทำความเข้าใจกันก่อนว่าตอนนี้เทรนด์การพัฒนาเว็บไซต์ในแบบของ JAMstack กำลังมาแรงพอสมควร ก่อนจะไปรู้จักกับ Headless CMS เราต้องแวะไปทำความรู้จักกับ JAMstack กันก่อนครับ
JAMStack = JavaScript, API และ Markup มันคือการพัฒนาเว็บไซต์ที่มีการแยกส่วนกันอย่างชัดเจน
JAMStack = building static, database-free websites
ส่วนประกอบของ JAMStack มีดังนี้
- JavaScript (J) = ส่วนของการที่ทำงานแบบ dynamic บนฝั่ง client ทั้งหมด อาทิ React, Angular, Vue และ Vanilla js ก็นับน่ะ
- API (A) = ส่วนของการเชื่อมต่อกับ Database layer และมีการคำนวณในฝั่ง Server โดยมีการเชื่อมต่อกับฝั่ง JavaScript ผ่าน HTTP API ทั่วไป
- Markup (M) = ส่วนของหน้าตา Template ของเว็บเรา ที่จะใช้ในขั้นตอนการพัฒนา ซึ่งผู้ใช้จะไม่เห็นตรงนี้น่ะครับ เช่น Gastby, webpack ที่มาช่วยทำ Site genarator ให้เรา
แบบเดิมกับแบบใหม่ต่างกันยังไง?
ทีนี้เราลองทำความเข้าใจกันก่อน โดยดูกันครับว่า CMS ในอดีตเป็นรูปแบบนี้
คือเรามีการใช้ภาษาฝั่ง Server เช่น PHP มาเรียก Database จากนั้นทำการแปลงให้ออกมาเป็น HTML เพื่อให้ Client หรือ Browser chrome เข้ามาเรียกดูเพื่อใช้งาน
ซึ่ง CMS แบบทั่วไปในอดีต อาทิ Wordpress, Joomla, Drupal และ อีกมากมายก็ล้วนใช้ท่านี้กันทั้งนั้นแหละครับ
ทีนี้ก็เลยมีคำถามกันว่า… ในเมื่อสุดท้ายแล้วสิ่งที่ผู้ใช้จะเห็นมันก็คือ Static ไฟล์ธรรมดาเลย อาทิ HTML, CSS, JavaScript และ Media ไฟล์ต่าง ๆ เท่านั้นเองนี่น่า
ให้นึกภาพเช่นระบบ Blog ของเราน่ะครับ ที่จะมีการเปลี่ยนแปลงข้อมูลของเว็บไซต์แค่บางโพสต์ตอนสร้าง หรือ อัพเดทครับเท่านั้น ทำไมมันต้องยุ่งยากไปดึงข้อมูลมาจาก Database ใหม่ทุกครั้งตอนผู้ใช้เข้ามาดูเว็บ? ทำไมต้องสร้างหน้าเว็บจาก Template ขึ้นมาใหม่ทุกครั้งด้วยล่ะ? ทำไมเราไม่ย้ายการสร้างเรื่องพวกนี้ไปตอนที่แก้ไขเนื้อหาเว็บทีเดียวเลยล่ะ?
จนเกิดมาเป็นท่าใหม่นี้ขึ้นมานั่นก็คือ เอา JavaScript framework (Gastby, Next, Nuxt, Jekyll) เข้ามาช่วยทำส่วนของ Site Genarator ตรงนี้ เพื่อ Build สร้าง Static ไฟล์ จาก Template ที่เราพัฒนาเมื่อมีการแก้ไขเนื้อหาของเว็บเรา เพื่อให้ผู้ใช้เปิดเว็บเข้ามา แล้วฝั่ง Server แสดงเหล่า Static ไฟล์ออกมาเลย ซึ่ง
ข้อดีหลัก ๆ ของการทำรูปแบบนี้
- เร็ว — แน่นอนว่าผู้ใช้จะสามารถเข้ามาเว็บเราได้อย่างรวดเร็ว เนื่องจากไฟล์ต่าง ๆ ถูกสร้างไว้แล้ว ยิ่งถ้าเป็น Static ไฟล์แล้ว การที่มี CDN มาช่วยก็ทำให้สามารถเข้าถึงได้เร็วยิ่งขึ้นด้วย
- ความปลอดภัย — ไม่ต้องกังวัลเรื่องการโดน hack เนื่องจากเราจะมีแค่ static file ที่ให้ผู้ใช้เห็น (อันนี้ไม่รวมกรณีเค้าไปแกะ API เน้อ…)
- แยกส่วน — การพัฒนาสามารถแยกส่วนชัดเจน ส่วนของการแสดงผลก็ทำหน้าที่อย่างเดียว ส่วนของการคำนวณก็จะเกิดขึ้นอีกที่นึง ทำให้การพัฒนาต่อยอดสามารถทำได้อย่างสะดวกราบรื่นในระยะยาว
- Deployment & Workflow ที่เปลี่ยนไป — ความยุ่งยากจะหายไป เราจะได้ใช้งานพวก Netlify, AWS Amplify, GitHub Pages, Now.sh, Firebase Hosting ที่จะมาช่วยทำให้เราสามรถทำ CI/CD ได้แบบง่าย ๆ ทำให้เราสามารถทดสอบผลการทำงานได้, จัดการเรื่อง CDN ได้ไม่ยาก อีกทั้งยังประหยัดเงินในการใช้ Host อีกด้วย (เราสามารถใช้งานได้ฟรีเลยในหลายตัวที่ผมแนะนำมาครับ)
แล้วเราจะเพิ่มหรือแก้ไขเนื้อหาเว็บยังไง?
เราสามารถแก้ไขเนื้อหาของเว็บได้จากการเพิ่มไฟล์พวก Markdown เป็นต้น เราก็แค่เพิ่มไฟล์ของเราเข้าไปในโฟลเดอร์ Project ของเรา จากนั้นเรียกใช้เครื่องมือจำพวก Site generator เพื่อสร้าง Static ไฟล์ เช่น Jekyll และ Gastby เป็นต้น
จากรูปด้านบนคือรูปแบบการทำงานของ Gastby ที่จะทำให้เราสามารถเห็นได้ว่ามีการดึงข้อมูลจากใดได้บ้างครับ จากนั้นเจ้า Gastby จะนำเอา Template ที่เราสร้างขึ้นมารวมกันกับข้อมูลจากแหล่งที่เราระบุมาแพ็ครวมกัน เพื่อ Build ออกมาเป็น Static ไฟล์ต่อไปครับ ซึ่งโดยปกติของวิธีนี้เค้าก็มีชื่อด้วยก็คือ Git-based เน้นการเพิ่มเนื้อหาต่าง ๆ ผ่านการ commit นั่นเอง แล้วถ้าไม่ใช่สาย technical แบบเราล่ะ การจะมานั่งอัพ content ผ่าน git คงจะเป็นเรื่องลำบากพอตัว จะดีกว่าไหมถ้าเรามีระบบจัดการเนื้อหาพวกนี้ได้แบบ Wordpress
Headless CMS คืออะไร?
ต่อไปนี้มันจึงเกิดมาแล้ววว นั่นก็คือ… นั่นก็คือ…Headless CMS พระเอกของเราที่กำลังพูดถึงเมื่อตอนต้นนั้นเองครับ
CMS ทั่วไปมีความสามารถอยู่ 3 เรื่อง
- การจัดเก็บข้อมูล แบบไฟล์ หรือ ฐานข้อมูล
- CRUD UI ในการจัดการเนื้อหาของข้อมูล
- การนำเอาข้อมูลมาแสดงผล
Headless CMS ก็มีความสามารถอยู่ 3 เรื่อง เช่นกัน
- การจัดเก็บข้อมูลที่เหมือนกัน
- CRUD UI
- API ในการแสดงผล <~ ตรงนี้ล่ะที่แตกต่างออกไปครับ
ดังนั้นคำว่า Headless CMS มันก็มาจากการที่ตัดส่วนหัว (head) ออกไปนั่นเอง ซึ่งจากรูปด้านขวาจะเห็นว่าเปรียบเสมือนส่วนของ view (หน้าบ้าน) เปลี่ยนเป็นการแสดงผลด้วย API
ส่วนระบบจัดการหลังบ้าน (CRUD UI) ยังคงอยู่เหมือนเดิมเพื่อดึงความสามารถในการจัดการที่เรียบง่ายไว้ จะเห็นว่าเราจะสามารถสร้างส่วนหน้าบ้านด้วยอะไรก็ได้ ซึ่งในปัจจุบันนี้ที่เป็นที่นิยมก็คือ JAMstack ที่สอดคล้องกันกับแนวคิดแบบนี้ตามที่เล่าไปนั่นเองครับ
สำหรับใครอยากทดลองเล่น Headless CMS ก็สามารถลองไปเลือกดูได้ที่นี่เลยครับ จะพบว่ามีหลายตัวที่น่าสนใจอย่างมาก อาทิ strapi, ghost และ Netlify cms เป็นต้น ซึ่ง 3 ตัวนี้ทางพวกเราชาว Geeker ได้ทำการทดสอบใช้งานบางแล้วในงานของเราเอง ทำให้ได้เรียนรู้ จุดอ่อน จุดเด่นของแต่ละตัว รวมทั้งข้อจำกัดต่าง ๆ ไว้โอกาสหน้าพวกเราจะนำเอามาแชร์ต่อไปครับ ทุกคนกด Follow medium พวกเรา และ กด like page : I GEAR GEEK ได้เลยครับ จะได้ไม่พลาดบทความเจาะลึกในแบบนี้อีกครับ ขอบคุณที่อ่านมาถึงตรงนี้ครับ :)
