การทดลองโครงการ WordExpress กับการนำ GraphQL มาสู่ WordPress

ในปี 2555 เมื่อ Facebook เริ่มออกแบบสถาปัตยกรรมแอปพลิเคชันมือถือที่ขับเคลื่อนด้วย HTML5 ใหม่ให้เป็นแอป iOS หรือ Android ดั้งเดิม บริษัทได้คิดค้น GraphQL ภาษาคิวรีโอเพนซอร์สใหม่นี้กำลังได้รับการประกาศเพื่อแทนที่ REST โดยตรง GraphQL เป็นวิธีที่มีประสิทธิภาพมากขึ้นในการสนับสนุนปริมาณการโต้ตอบที่เกิดขึ้นในแอปของ Facebook ทุกวัน แต่เป็นฐานข้อมูลที่ไม่เชื่อเรื่องพระเจ้าและสร้างขึ้นเพื่อใช้นอกเหนือจาก Facebook

แม้ว่า GraphQL จะยังค่อนข้างใหม่ แต่บริษัทใหญ่ๆ อย่าง Intuit, Coursera, Pinterest และ Shopify ก็ใช้สิ่งนี้ในการผลิต เมื่อเดือนที่แล้ว GitHub ได้ประกาศการสนับสนุน GraphQL สำหรับ GitHub API เพื่อตอบข้อเสียบางประการของสถาปัตยกรรม REST

GraphQL นำเสนอวิธีใหม่ในการจัดโครงสร้างการสื่อสารจากไคลเอนต์ไปยังเซิร์ฟเวอร์ที่ทำให้การดึงข้อมูลมีประสิทธิภาพมากขึ้น ในบทความของเขา GraphQL ในยุคของ REST APIs Petr Bela สรุปความแตกต่างระหว่างสถาปัตยกรรมทั้งสองประเภท:

พลังของ GraphQL มาจากแนวคิดง่ายๆ — แทนที่จะกำหนดโครงสร้างของการตอบสนองบนเซิร์ฟเวอร์ ไคลเอนต์จะมอบความยืดหยุ่น คำขอแต่ละรายการจะระบุฟิลด์และความสัมพันธ์ที่ต้องการรับกลับ และ GraphQL จะสร้างการตอบสนองที่ปรับให้เหมาะกับคำขอนี้โดยเฉพาะ ประโยชน์: จำเป็นต้องใช้การไปกลับเพียงครั้งเดียวเพื่อดึงข้อมูลที่ซับซ้อนทั้งหมดที่อาจขยายจุดปลาย REST หลายจุด และในขณะเดียวกันก็ส่งคืนเฉพาะข้อมูลที่จำเป็นจริง ๆ และไม่มีอะไรเพิ่มเติม

เมื่อเดือนที่แล้ว Facebook ประกาศว่า GraphQL กำลังออกจากขั้นตอน "ตัวอย่างทางเทคนิค" และขณะนี้พร้อมสำหรับการผลิตแล้ว มีการใช้งานในภาษาโปรแกรมต่างๆ มากมาย และได้รับการรับรองโดยบริษัทที่ต้องการวิธีการเข้าถึงข้อมูลที่มีประสิทธิภาพมากขึ้น

WordExpress นำ GraphQL มาสู่ WordPress

Ramsay Lanier นักพัฒนา JavaScript front-end ซึ่งทำงานที่ nclud ใน Washington, DC ได้สร้างการใช้งาน WordPress ที่ขับเคลื่อนด้วย GraphQL ที่เรียกว่า WordExpress Lanier ไม่ได้เป็นแฟนของ PHP และไม่ชอบทำงานกับลูปหรือเทมเพลต ทุกสิ่งที่เคยมีมาประกอบด้วยการพัฒนาส่วนหน้าของ WordPress จำนวนมาก เขาสร้าง WordExpress เป็นแอปพลิเคชัน Node.js โดยมีเป้าหมายที่จะแทนที่ PHP ด้วย JavaScript สำหรับด้านการนำเสนอของ WordPress มันใช้ Express ในส่วนแบ็คเอนด์และส่วนประกอบ React ที่ส่วนหน้า GraphQL อยู่ระหว่างทั้งสองเพื่อดึงข้อมูลจากฐานข้อมูล WordPress

“เมื่อตอนแรกฉันเริ่มต้นด้วยแนวคิดสำหรับ WordExpress ฉันต้องการใช้ REST API แต่ฉันพบว่าปลายทางที่มีอยู่ไม่ใช่สิ่งที่ฉันต้องการ” Lanier กล่าว “ฉันจะต้องเขียนปลายทางแบบกำหนดเองจำนวนมากและเชื่อมโยงการโทรเข้าด้วยกัน ดังนั้นฉันจึงคิดว่าฉันจะลองใช้ GraphQL”

เขาพบว่า GraphQL มีประสิทธิภาพมากกว่า REST เนื่องจากช่วยลดการเดินทางไปกลับที่เซิร์ฟเวอร์ ทำให้นักพัฒนาสามารถมุ่งเน้นไปที่ข้อมูลที่ลูกค้าต้องการจริงๆ Lanier เน้นถึงประโยชน์ที่เกี่ยวข้องกับไซต์ WordPress:

ด้วย GraphQL ไคลเอ็นต์จะกำหนดข้อมูลที่ต้องการผ่านการสืบค้น GraphQL แบบสอบถาม GraphQL มีฟังก์ชันการแก้ไขแบบกำหนดเองที่กำหนดวิธีการดึงข้อมูลนั้น ในฟังก์ชันนั้น คุณสามารถเข้าถึงฐานข้อมูลได้หลายฐานข้อมูล ตัวอย่างเช่น ใน WordPress คุณจะมีฐานข้อมูล MySQL แต่คุณอาจมีฐานข้อมูล Mongo สำหรับแอปพลิเคชันที่จัดเก็บข้อมูลอื่นๆ ที่ไม่จำเป็นต้องสัมพันธ์กัน ในฟังก์ชันการแก้ไข GraphQL คุณสามารถโทรเพื่อดึงข้อมูลจากทั้งสองฐานข้อมูล และส่งกลับไปยังไคลเอนต์ในการเดินทางไปกลับของเซิร์ฟเวอร์ครั้งเดียว

WordExpress ในรูปแบบปัจจุบันเป็นจุดเริ่มต้นที่ดีสำหรับการสร้างแอปพลิเคชันที่ขับเคลื่อนด้วย JavaScript ซึ่งใช้ WordPress สำหรับการดูแลระบบ Lanier กล่าวว่าการตั้งค่าการพัฒนานี้ช่วยให้เขาสร้างส่วนประกอบของหน้าเว็บและแอปพลิเคชันได้ง่ายกว่าเทมเพลต PHP

“ด้วย React แต่ละองค์ประกอบไม่เพียงแต่มีมาร์กอัปสำหรับแสดงเนื้อหาเท่านั้น แต่ยังมีการจัดสไตล์สำหรับองค์ประกอบนั้น ข้อมูลที่ต้องใช้ในการทำงาน และตรรกะการโต้ตอบใดๆ เช่นกัน ทั้งหมดนี้อยู่ในไฟล์หนึ่งหรือสองไฟล์” เขากล่าว

ความท้าทายในปัจจุบันของ WordExpress: ความเข้ากันได้ของปลั๊กอินและการแสดงผลฝั่งเซิร์ฟเวอร์

แม้จะมีประโยชน์ที่น่าตื่นเต้นของการสืบค้นที่มีประสิทธิภาพมากขึ้นและความเป็นไปได้ของส่วนหน้าที่ใช้ JavaScript แต่โปรเจ็กต์ WordExpress มีความท้าทายที่ร้ายแรงหลายประการที่จะทำให้การใช้งานจริงยากกว่าการติดตั้งบล็อกทั่วไป มันเข้ากันไม่ได้กับปลั๊กอิน WordPress ส่วนใหญ่ เนื่องจากส่วนใหญ่เขียนด้วย PHP

"โดยพื้นฐานแล้ว ฉันได้เปลี่ยนส่วนหน้าทั้งหมด ซึ่งหมายความว่าปลั๊กอินใดๆ ที่ส่งผลต่อส่วนหน้าจะไม่ทำอะไรเลย" Lanier กล่าว “อย่างไรก็ตาม คุณสามารถใช้ปลั๊กอินที่มีอยู่ซึ่งส่งผลต่อด้านผู้ดูแลระบบของสิ่งต่างๆ ได้อย่างแน่นอน (เช่น Advanced Custom Fields หรือปลั๊กอิน AWS S3) อะไรก็ตามที่จัดการวิธีที่ข้อมูล WordPress ถูกจัดเก็บใน MySQL ยังคงใช้งานได้ คุณเพียงแค่ต้องแก้ไขสคีมา GraphQL และคิวรีของคุณเพื่อทำงานกับสิ่งเหล่านี้”

ความท้าทายที่สำคัญอีกประการหนึ่งคือการทำให้การแสดงผลฝั่งเซิร์ฟเวอร์ทำงานได้ ซึ่งจำเป็นสำหรับการจัดการสิ่งต่างๆ เช่น SEO และเมตาแท็ก Apollostack ซึ่ง WordExpress ใช้เพื่อดึงข้อมูลและส่งไปยังส่วนประกอบ React ได้เพิ่มการรองรับก่อนหน้านี้สำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์อัตโนมัติ

“ฉันได้เปลี่ยนจากการใช้ Relay ของ Facebook เป็น ApolloStack” Lanier กล่าว “ทั้งสองเป็นเทคโนโลยีที่ค่อนข้างใหม่ และฉันไม่แน่ใจว่าพวกเขาเข้าใจวิธีจัดการกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์เป็นอย่างดีหรือไม่ ฉันไม่ได้ตรวจสอบเรื่องนี้มาสองสามเดือนแล้ว และสิ่งต่างๆ ได้ดำเนินไปอย่างรวดเร็วด้วย ApolloStack ดังนั้นตอนนี้พวกเขาอาจจะคิดออกแล้ว”

สำหรับตอนนี้ WordExpress เป็นเพียงการพิสูจน์แนวคิด และ Lanier กล่าวว่าเขาไม่มีแผนที่จะพยายามสนับสนุนปลั๊กอินที่มีอยู่ เนื่องจากปัจจุบัน WordExpress ไม่สามารถใช้ประโยชน์จากธีมและปลั๊กอินได้ ซึ่งเป็นส่วนที่ดีที่สุดของระบบนิเวศ WordPress บางส่วน Lanier กล่าวว่านักพัฒนาที่ใช้สแต็กนี้น่าจะสนใจที่จะรักษาพลังของผู้ดูแลระบบของ WordPress มากกว่า

“ฉันรักผู้ดูแลระบบ WordPress” เขากล่าว “มันมีประสิทธิภาพมากและใช้งานง่ายในการจัดการเนื้อหา WordExpress จะเป็นจุดเริ่มต้นสำหรับนักพัฒนา JavaScript ที่ต้องการสร้างแอปพลิเคชัน WordPress โดยใช้ JavaScript เพียงอย่างเดียว”

เป้าหมายของ Lanier กับ WordExpress คือการเปลี่ยนให้เป็นแพ็คเกจ npm ที่สามารถนำมาใช้ซ้ำได้ในโครงการ React ที่หลากหลาย เขาได้เผยแพร่แพ็คเกจ WordExpress npm สองแพ็คเกจที่ทำงานร่วมกัน: wordexpress-schema (จัดการสคีมา GraphQL และการตั้งค่าการเชื่อมต่อ) และ wordexpress-components (ปัจจุบันมีองค์ประกอบสองตัวแรกคือ WordExpressPage และ WordExpressMenu) เนื่องจากโปรเจ็กต์นี้สร้างขึ้นบน Node.js นักพัฒนาสามารถใช้แพ็คเกจ npm ใดก็ได้ที่ต้องการ ซึ่งเป็นการปลอบใจสำหรับความเข้ากันได้ของปลั๊กอินที่จำกัด

GraphQL และ WP REST API

หลายคนที่คาดการณ์ว่า GraphQL จะเข้ามาแทนที่ REST โดยตรง ก็มีความเห็นว่าทั้งสองสามารถอยู่ร่วมกันได้ อันที่จริงแล้ว Facebook ได้เขียนคำแนะนำสำหรับการห่อ REST API ใน GraphQL เมื่อไม่นานมานี้

"มีแนวโน้มว่าหาก GraphQL พิสูจน์ได้ว่ามีประสิทธิภาพ ก็จะอยู่ร่วมกับ REST APIs" Petr Bela กล่าว “API บางตัวจะใช้ REST และบางตัวจะใช้ GraphQL บางคนอาจสนับสนุนทั้งสองอย่าง” เขาคาดการณ์ว่าจะต้องใช้เวลาหลายปีของอุตสาหกรรม หรือแม้แต่สิบปีในการเปลี่ยนจาก REST เป็น GraphQL โดยสิ้นเชิง

WordExpress ของ Lanier ซึ่งเพิ่งผ่าน 1,000 ดาวบน GitHub ปัจจุบันเป็นโครงการโอเพ่นซอร์สเพียงโครงการเดียวที่กำลังสำรวจการใช้งาน WordPress ที่ขับเคลื่อนโดย GraphQL การค้นหาคร่าวๆ บน GitHub เผยให้เห็นว่ามีอีกหลายคนกำลังทดลองกับการตั้งค่าที่คล้ายคลึงกัน โชคดีที่ GraphQL ไม่ต้องการการเปลี่ยนแปลงใด ๆ ใน WordPress core เพื่อให้ไซต์สามารถใช้ API สำหรับการสืบค้นฐานข้อมูล

Lanier กล่าวว่าเขาชื่นชมการทำงานของผู้ที่พยายามรวม WP REST API เป็นแกนหลักและไม่เห็นว่าการใช้งาน GraphQL เป็นภัยคุกคามต่อสิ่งนั้น

“ฉันคิดว่างานที่พวกเขาทำกับ REST API เป็นสิ่งที่ดี” เขากล่าว “พวกเขาจำเป็นต้องทำตามขั้นตอนนั้นอย่างแน่นอน REST มีมานานแล้ว – GraphQL ยังค่อนข้างใหม่ ดังนั้นจึงควรไปที่เส้นทาง REST นอกจากนี้ ยังมีผู้คนอีกมากมายที่รู้วิธีใช้งาน ข้อดีของ GraphQL ก็คือคุณสามารถใช้มันเพื่อห่อ REST API เพื่อให้ทั้งคู่อยู่ร่วมกันได้”

ความเป็นไปได้ที่ WordExpress จะเป็นมากกว่าการพิสูจน์แนวคิดง่ายๆ ขึ้นอยู่กับคำติชมจากชุมชน Lanier กล่าวว่านักพัฒนากำลังแสดงความสนใจใน WordExpress โดยการฟอร์เวิร์ดและถามคำถาม

“ผู้คนกำลังใช้มันและเล่นด้วย และ (หวังว่า) จะสร้างมันขึ้นมาเอง” เขากล่าว “ฉันคิดว่าความสนใจอยู่ที่นั่น เพื่อให้เป็นไปได้จริง ๆ คุณต้องมีทีมนักพัฒนาทั้งหมดเพื่อให้เป็นตัวเลือกชั้นยอด”

เมื่อเร็ว ๆ นี้ Lanier ได้งานใหม่ซึ่งเขาใช้ React 100% และไม่มีโอกาสใช้ WordPress มาสักระยะหนึ่งแล้ว แต่เขาบอกว่าเขาเปิดกว้างที่จะสำรวจการทำงานร่วมกันเพื่อเตรียมการผลิต WordExpress ให้พร้อม

“ถ้าผู้คนสนใจจริง ๆ และต้องการรวมตัวกันเพื่อพัฒนามันให้เป็นทางออกที่เป็นไปได้ ฉันจะมีส่วนร่วม 100%” เขากล่าว

นักพัฒนาที่ต้องการทดสอบและเริ่มพัฒนาด้วย WordExpress จะต้องมีความเข้าใจพื้นฐานเกี่ยวกับวิธีการทำงานของ React Lanier ได้เขียนเอกสารโดยละเอียดเกี่ยวกับวิธีการตั้งค่าการใช้งาน GraphQL และวิธีขยายการสืบค้น GraphQL และโมเดลฐานข้อมูล ไซต์ WordExpress.io เป็นการสาธิตโค้ดแบบสด ซึ่งคุณสามารถพบได้บน GitHub