ตั้งแต่เรารู้จักกับ CMS หรือระบบจัดการเนื้อหาของเว็บไซต์ (Content Manament System) โลกของการเขียนโค๊ดพัฒนาเว็บไซต์ก็ไม่เหมือนเดิมอีกต้องไป จากเมื่อก่อนที่การเขียนเว็บเพจต้องประกอบไปด้วย โค๊ด HTML, CSS และภาษาโปรแกรม เช่น PHP พอมัดรวมเป็นก้อนมันจะไม่สามารถแสดงผลได้เลยหากไร้ซึ่ง LAMP / LEMP stack ซึ่งเป็นโครงสร้างของระบบเว็บเซิฟร์เวอร์นั้นเองครับ
เราอยู่ในสถาปัตยกรรมการพัฒนาเว็บ (LAMP / LEMP stack) ตั้งแต่ในช่วงต้นทศวรรษ 2000 ที่ประกอบโอเพนซอร์ส 4 ส่วน ที่นักพัฒนาเพื่อสร้างเว็บไซต์ (Web developer) ได้แก่
- ระบบปฏิบัติการ Linux
- เซิร์ฟเวอร์ Apache HTTP (และ NGINX)
- ฐานข้อมูล MySQL
- และภาษา PHP
วิธีการทำงานของเว็บไซต์ที่ทำงานบน LAMP/LEMP stack คือเมื่อผู้ใช้ทุกคน request หน้าเว็บ เครื่องเซิร์ฟเวอร์จะค้นหาข้อมูลบนฐานข้อมูลก่อน และรวมผลลัพธ์กับข้อมูลจาก markup และ plugins (เช่น หน้าฟอร์มลงทะเบียน) เพื่อสร้างเอกสาร HTML ในเบราว์เซอร์
แต่ในทางกลับกันเว็บไซต์ที่สร้างจากเครื่องมือ JAMstack จะเป็น static files แบบคงที่ ทันทีเมื่อมีการ request สามารถแสดงผลกลับได้ทันที ไม่จำเป็นต้องไปสืบค้นฐานข้อมูล เนื่องจากไฟล์ได้รับการรวบรวมและส่งไปยังเบราว์เซอร์จากระบบ CDN แล้ว
ถ้าตื่นมาไม่มี WordPress แล้วทำไง
เมื่อ LAMP/LEMP stack เป็นโครงสร้างพื้นฐานให้กับ WordPress ทำให้มันมีข้อจำกัดในการทำงานอย่างมีประสิทธิภาพ
ซอฟต์แวร์ WordPres เป็นตั้ง Front-End และ Back-End ทำให้ระบบจัดการเนื้อหาของเว็บไซต์สามารถพัฒนาได้โดย Develper คนเดียว ที่ดูทั้งหลังบ้านและหน้าบ้าน
อยากให้ผู้อ่านนึกภาพตาม…
ในยุคดิจิทัสการพัฒนาเว็บหนึ่งโปรเจคจะไม่ใช่มีแค่ Develper เพียงคนเดียวอีกต่อไป ในหนึ่งเว็บอาจมี Developer 2-3 คน และยังมีนักการตลาด Content marketter, Copywriter, Content edioter เป็นต้น
เมื่อ LAMP/LEMP stack + WordPress มัดรวมกันทำให้ผู้มีส่วนร่วมในโปรเจค 4-5 คน ทำงานบน Production (Backend) นั้นหมายความว่า โพสคอนเท็นต์, แก้ไขโพส, เขียนคำโฆษณา, การติดตั้งธีม ติดตั้งปลั๊กอิน และอื่น ๆ ทำบนระบบที่กำลังทำงานอยู่
API/ Webhook คืออะไร
API (Application Programming Interface) เอาไว้ใช้กรณีที่เราต้องการข้อมูลตอนที่
“เราต้องการ”
ตัวอย่าง เช่น Bank อันนี้เรียก “ผู้ให้บริการ” เมื่อ Bank เปิด API ให้ใช้งาน เวลา แล้วนักพัฒนาโปรแกรมหรือ [ผู้ใช้] ต้องการข้อมูลต่าง ๆ ก็จะร้องขอส่ง request โดยใช้ความสามารถของ HTTP method เช่น GET, POST ไปที่ URL ดังกล่าวที่เปิดไว้ [ผู้ใช้] จึงจะได้รับข้อมูลกลับมา
Webhook เอาไว้ในกรณีที่เราต้องการข้อมูลตอนที่
“มีเหตุการณ์”
คือกลับกัน [ผู้ใช้] บนแพลตฟอร์ม หรือเรา ๆ นี่แหละที่ต้องมี URL หรือมันก็คือ API ของเรานั้นเองนี่ ที่จะส่งไปให้ผู้ให้บริการแทนครับ
สิ่งเหล่านี้แหละเป็นตัวจุดเริ่มแนวคิด “Modern Stack Website” โครงสร้างพื้นฐานสร้างเว็บด้วยเทคโนโลยีใหม่ โดยไม่ต้องง้อ LAMP/LEMP stack
แนวคิด Modern Stack Website แห่งศตวรรษที่ 21
เมื่อเราพูดถึงคำว่า “The Stack” เราจะไม่ได้พูดถึงระบบปฏิบัติการ หรือ Stack เว็บเซิร์ฟเวอร์, ภาษาโปรแกรมที่เป็น Backend หรือฐานข้อมูลอีกต่อไป
ซึ่งแนวคิดนี้จะประกอบด้วยเทคโนโลยี 3 ส่วน
- DATA SOURCE
- BUILD
- DEPLOY & CDN
การพัฒนาเว็บและแอปพลิเคชันสมัยนี้ก็เลยมักจะมี API ไว้ใช้ในการส่งข้อมูลกัน นอกจาก REST API นั้นก็คือ GraphQL ที่เป็นภาษาที่ใช้ในการ Query ทำงานสำหรับ API ช่วยให้ ผู้ใช้ [client] มีความสามารถที่จะร้องขอหรือ request สิ่งที่ต้องการและได้รับ response ตามที่ต้องการกลับมาได้อย่างมีประสิทธิภาพ (ฟังดูอารมณ์คล้ายการทำแคชชิ่ง 55)
รู้จักการ Jamstack คืออะไร
แนวคิด CMS ยุคใหม่ที่แยกระบบจัดการเนื้อหาออกจากส่วนการนำเสนอ เป็น Back-end และ Front-end ซึ่งหมายความว่าฟังก์ชันการจัดการเนื้อหา (เช่น โพสคอนเท็นต์ลงเว็บ) จะแยกจากส่วนหน้า (Front-end) ทำให้คุณสามารถสร้างเนื้อหาเว็บเพจได้จาก JAMstack หลาย ๆ Front-end ได้
JAMstack เครื่องมือสร้างเว็บไซต์ (building website) ที่ทำให้เพิ่มประสิทธิภาพเว็บไซต์เร็วขึ้น ปลอดภัย พร้อมติดลำดับกูเกิลเสิร์ช (SEO) Performance + Security + Workflow โดยใช้เทคโนโลยีทันสมัย เช่น framework GatsbyJS, Hugo, Contentful, Netlify และอื่น ๆ
ตัวอย่าง แพลตฟอร์ต SasS ที่รองรับ Headless CMS อีกทั้งยังมี marketplace ทั้งฟรีและจ่ายตังค์ ^^
เช่น
- Contentful
- Storyblok
- Sanity
- Forestry
- DatoCMS
- Prismic
- NetlifyCMS
- Strapi
- Headless WordPress
- TinaCMS
- และ Final Words
จากลิตส์รายชื่อ headless CMS ข้างบนเป็นส่วนของ Front-End (Site generate) และระบบการจัดการเนื้อหา (CMS) เราจะเรียกส่วนนี้ว่า “DATA SOURCES“
จากนั้นเมื่อคุณเพิ่มเนื้อหาเว็บเพจ เช่น เขียนโพส เสร็จก็สามารถส่งไปยัง Git (GitHub, GitLab, Bitbucket) ได้สร้าง build trigger แบบอัตโนมัติได้ (automate builds)
ซึ่งตรงนี้เราต้องเลือก Framework ที่ต้องการ ส่วนนี้เรียกว่า “BUILD” เช่น Gatsby (React-based framework), NEXT.JS, HUGO, NODE.JS บน host web ที่เราเลือกใช้บริการ เช่น Netlify, Firebase เราจะเรียกส่วนนี้ว่า “DEPLOY & CDN“
รูปข้างล่างนี้เป็นตัวอย่าง การสร้างเว็บบล็อกด้วยเทคโนโลยี Next.js (template) ด้วย NetlifyCMS (Deploy github repo on netlify)
ดูเผินๆ เหมือน WordPress แต่จริง ๆ แล้วมันเป็น web, static site บน serverless architecture (เว็บแบบไม่ใช้เซิร์ฟเวอร์) สำหรับ ธุรกิจและแบรนด์ ในศตวรรษที่ 21 ที่ถูกบังคับให้ต้องใช้กลยุทธ์ omnichannel เพื่อเข้าถึงผู้มีโอกาสเป็นลูกค้าไม่ว่าพวกเขาจะอยู่ที่ใดก็ตามบนโลกอินเทอร์เน็ต
ดังนั้น…เราต้องกลับมาที่คำถามว่าธุรกิจของเราต้องการ CMS แบบ Headless หรือไม่?
และแน่นอนครับมันขึ้นอยู่กับความต้องการทางธุรกิจของคุณ!
เช่นการเป็นการสร้างเว็บไซต์สำหรับหน่วยงานและ บริษัท ต่าง ๆ คุณสามารถสร้างเว็บแบบไม่ใช้เซิร์ฟเวอร์ได้ ที่เป็น web static site ด้วยเครื่องมือ JAMstack ครับ
JAMstack มันไม่ได้เกี่ยวกับเทคโนโลยี แต่มันเป็นวิธีใหม่ในการสร้างเว็บไซต์และแอปที่ให้ประสิทธิภาพที่ดีขึ้น, ความปลอดภัยขึ้น, ลดต้นทุนในการ scale ระบบ และเพิ่มประสบการณ์ที่ดียิ่งขึ้นให้กับนักพัฒนาซอฟต์แวร์