JAMstack websites

JAMstack คืออะไร โลกที่ไม่มีการสร้างเว็บไซต์บน LAMP / LEMP stack อีกต่อไป

ตั้งแต่เรารู้จักกับ 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 คนเดียว ที่ดูทั้งหลังบ้านและหน้าบ้าน

อยากให้ผู้อ่านนึกภาพตาม

Cr image: bejamas, single application

ในยุคดิจิทัสการพัฒนาเว็บหนึ่งโปรเจคจะไม่ใช่มีแค่ 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

Cr image: hackernoon, WordPress to JAMstack

เมื่อเราพูดถึงคำว่า “The Stack” เราจะไม่ได้พูดถึงระบบปฏิบัติการ หรือ Stack เว็บเซิร์ฟเวอร์, ภาษาโปรแกรมที่เป็น Backend หรือฐานข้อมูลอีกต่อไป

ซึ่งแนวคิดนี้จะประกอบด้วยเทคโนโลยี 3 ส่วน

  • DATA SOURCE
  • BUILD
  • DEPLOY & CDN

การพัฒนาเว็บและแอปพลิเคชันสมัยนี้ก็เลยมักจะมี API ไว้ใช้ในการส่งข้อมูลกัน นอกจาก REST API นั้นก็คือ GraphQL ที่เป็นภาษาที่ใช้ในการ Query ทำงานสำหรับ API ช่วยให้ ผู้ใช้ [client] มีความสามารถที่จะร้องขอหรือ request สิ่งที่ต้องการและได้รับ response ตามที่ต้องการกลับมาได้อย่างมีประสิทธิภาพ (ฟังดูอารมณ์คล้ายการทำแคชชิ่ง 55)

รู้จักการ Jamstack คืออะไร

Cr image: bejamas.io, JAMstack websites

แนวคิด CMS ยุคใหม่ที่แยกระบบจัดการเนื้อหาออกจากส่วนการนำเสนอ เป็น Back-end และ Front-end ซึ่งหมายความว่าฟังก์ชันการจัดการเนื้อหา (เช่น โพสคอนเท็นต์ลงเว็บ) จะแยกจากส่วนหน้า (Front-end) ทำให้คุณสามารถสร้างเนื้อหาเว็บเพจได้จาก JAMstack หลาย ๆ Front-end ได้

JAMstack เครื่องมือสร้างเว็บไซต์ (building website) ที่ทำให้เพิ่มประสิทธิภาพเว็บไซต์เร็วขึ้น ปลอดภัย พร้อมติดลำดับกูเกิลเสิร์ช (SEO) Performance + Security + Workflow โดยใช้เทคโนโลยีทันสมัย เช่น framework GatsbyJS, Hugo, Contentful, Netlify และอื่น ๆ

The Stack We Used: GatsbyJS (Site generator) + Storyblok (headless CMS) + Netlify (hosting)
Cr image: bejamas, headless CMS

ตัวอย่าง แพลตฟอร์ต SasS ที่รองรับ Headless CMS อีกทั้งยังมี marketplace ทั้งฟรีและจ่ายตังค์ ^^

เช่น

  • Contentful
  • Storyblok
  • Sanity
  • Forestry
  • DatoCMS
  • Prismic
  • NetlifyCMS
  • Strapi
  • Headless WordPress
  • TinaCMS
  • และ Final Words
Contentful – SasS Front-End

จากลิตส์รายชื่อ headless CMS ข้างบนเป็นส่วนของ Front-End (Site generate) และระบบการจัดการเนื้อหา (CMS) เราจะเรียกส่วนนี้ว่า “DATA SOURCES

Sanity – SasS Front-End

จากนั้นเมื่อคุณเพิ่มเนื้อหาเว็บเพจ เช่น เขียนโพส เสร็จก็สามารถส่งไปยัง Git (GitHub, GitLab, Bitbucket) ได้สร้าง build trigger แบบอัตโนมัติได้ (automate builds)

DatoCMS

ซึ่งตรงนี้เราต้องเลือก 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)

Cr image: etlifycms, Building Blog with NextJS and Netlify CMS

ดูเผินๆ เหมือน WordPress แต่จริง ๆ แล้วมันเป็น web, static site บน serverless architecture (เว็บแบบไม่ใช้เซิร์ฟเวอร์) สำหรับ ธุรกิจและแบรนด์ ในศตวรรษที่ 21 ที่ถูกบังคับให้ต้องใช้กลยุทธ์ omnichannel เพื่อเข้าถึงผู้มีโอกาสเป็นลูกค้าไม่ว่าพวกเขาจะอยู่ที่ใดก็ตามบนโลกอินเทอร์เน็ต

ดังนั้น…เราต้องกลับมาที่คำถามว่าธุรกิจของเราต้องการ CMS แบบ Headless หรือไม่?

และแน่นอนครับมันขึ้นอยู่กับความต้องการทางธุรกิจของคุณ!

เช่นการเป็นการสร้างเว็บไซต์สำหรับหน่วยงานและ บริษัท ต่าง ๆ คุณสามารถสร้างเว็บแบบไม่ใช้เซิร์ฟเวอร์ได้ ที่เป็น web static site ด้วยเครื่องมือ JAMstack ครับ

JAMstack มันไม่ได้เกี่ยวกับเทคโนโลยี แต่มันเป็นวิธีใหม่ในการสร้างเว็บไซต์และแอปที่ให้ประสิทธิภาพที่ดีขึ้น, ความปลอดภัยขึ้น, ลดต้นทุนในการ scale ระบบ และเพิ่มประสบการณ์ที่ดียิ่งขึ้นให้กับนักพัฒนาซอฟต์แวร์

source: netlify, jamstack, datocms

Scroll to top
X