ทำความเข้าใจกับ Frontity React Framework ที่ตั้งค่าสำหรับ WordPress

Frontity คือ front-end framework ใหม่ล่าสุดสำหรับการสร้างเว็บไซต์ WordPress ที่รวดเร็ว

WordPress เป็นระบบจัดการเนื้อหาที่ได้รับความนิยมมากที่สุดมาเป็นเวลานานแล้ว ไม่เพียงแต่มีประสิทธิภาพมากกว่า 30% ของเว็บไซต์บนอินเทอร์เน็ตเท่านั้น แต่ยังมีชุมชนผู้มีส่วนร่วมจำนวนมากที่ทำให้ระบบนิเวศของ WordPress มีชีวิตชีวาและแข็งแกร่ง

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

เฟรมเวิร์กหนึ่งซึ่งกำลังไต่อันดับขึ้นมาคือเฟรมเวิร์ก React.js สำหรับ WordPress ที่เรียกว่า Frontity ได้รับการพัฒนาโดยการเริ่มต้นจากสเปน การพัฒนาสำหรับ Frontity ดำเนินมาเป็นเวลาสองสามปีแล้ว อย่างไรก็ตาม เพิ่งสร้างข่าวเมื่อระดมทุนได้ 1 ล้านยูโร นำโดยบริษัทที่อยู่เบื้องหลัง WordPress อัตโนมัติ และบริษัทร่วมทุน KFund. เพื่อให้เข้าใจถึงเหตุผลเบื้องหลังนี้ สิ่งสำคัญอันดับแรกคือต้องเข้าใจว่ากรอบงาน Frontity คืออะไร และมีประโยชน์อย่างไร

Frontity คืออะไร?

ก่อนที่เราจะเรียนรู้เกี่ยวกับ Frontity จำเป็นต้องรู้สถาปัตยกรรมพื้นฐานของ WordPress เสียก่อน อย่างที่คุณอาจทราบแล้วว่า WordPress เป็นซอฟต์แวร์เซิร์ฟเวอร์ที่ใช้ PHP ต้องใช้ซอฟต์แวร์เซิร์ฟเวอร์ เช่น Apache หรือ Nginx ในการให้บริการคำขอ และซอฟต์แวร์ฐานข้อมูล เช่น MySQL สำหรับการจัดเก็บข้อมูล (โพสต์ เพจ ผู้ใช้ ฯลฯ)

สถาปัตยกรรม WordPress

พอเปิดมาพูดหน้าหลักของเว็บไซต์ WordPress ก็จะเรียก index.php ในแบ็กเอนด์ซึ่งจะส่งคืน HTML, CSS และ JS สำหรับโฮมเพจซึ่งจะแสดงในเบราว์เซอร์ ดังนั้น PHP ทำหน้าที่เป็น Common Gateway Interface (CGI) สำหรับเว็บไซต์ ดังนั้นการปรับปรุงส่วนหน้าจะต้องใช้ PHP เป็นหลัก

สถาปัตยกรรมแนวหน้า

เนื่องจาก Frontity เป็น a React-based framework มาพูดถึง React JS กันก่อน React เป็นเฟรมเวิร์ก Javascript ส่วนหน้าที่พัฒนาและเผยแพร่โดย Facebook เป็นที่นิยมอย่างมากเนื่องจากสะดวกในการสร้าง UI ที่รวดเร็ว เสถียร และตอบสนอง React ทำงานเป็นโมดูล Node JS ดังนั้นเว็บไซต์ที่ใช้ React จะต้องใช้เซิร์ฟเวอร์ Node JS

ตอนนี้ ถ้าคุณต้องการใช้เฟรมเวิร์ก Javascript อย่างเดียว เช่น React เพื่อปรับปรุงส่วนหน้า เช่น สร้างธีมที่กำหนดเอง การดำเนินการดังกล่าวค่อนข้างยุ่งยาก เหตุผลที่เฟรมเวิร์กอย่าง React ทำงานร่วมกับ Node ซึ่งเริ่มเซิร์ฟเวอร์ของตัวเอง และดังที่เราได้กล่าวไว้ก่อนหน้านี้ WordPress ทำงานร่วมกับเซิร์ฟเวอร์ PHP CGI ที่ส่วนหลัง ดังนั้นจึงไม่มีวิธีที่ตรงไปตรงมาในการสร้างธีมและ UI แบบกำหนดเองโดยใช้ React สำหรับ WordPress

อย่างไรก็ตาม มีวิธีการดึงข้อมูลจากฐานข้อมูล WordPress จากระยะไกล สามารถทำได้โดยใช้ WordPress REST API ซึ่งรวมอยู่ในแกนหลักของ WordPress ตั้งแต่ WP เวอร์ชัน 4.7 ขึ้นไป หากเราสามารถดึงข้อมูล WordPress จากระยะไกลได้ นั่นหมายความว่าเราสามารถแสดงข้อมูลที่ดึงออกมาได้ตามต้องการ ผู้ใช้ใช้ REST API มาเป็นเวลานานในการพัฒนาแอปที่กำหนดเอง หน้าเว็บเพื่อเข้าถึงข้อมูล WordPress โดยตรงจากฐานข้อมูล ระบบจัดการเนื้อหา (CMS) ประเภทนี้เรียกอีกอย่างว่า หัวขาด ซีเอ็มเอส

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

ดังนั้นในการตั้งค่า Frontity จะต้องใช้เซิร์ฟเวอร์สองเครื่อง: เซิร์ฟเวอร์หนึ่งคือเซิร์ฟเวอร์ WordPress ซึ่งมี REST API และทำงานและส่งคืนข้อมูล WordPress และที่สองคือเซิร์ฟเวอร์ Node JS ซึ่งเรียกใช้ Frontity เพื่อเรียกใช้ REST API และแสดงข้อมูลโดยใช้ React .

ทางข้างหน้า?

ด้วยบริษัทที่อยู่เบื้องหลัง WordPress ที่ระดมเงินได้ 1 ล้านยูโร และ React นำประสบการณ์การใช้งานที่หลากหลายมาสู่ WordPress ไม่ใช่เรื่องเกินจริงที่จะบอกว่า Frontity เป็นหนทางข้างหน้าสำหรับเว็บไซต์ที่ขับเคลื่อนด้วย WordPress ยุคใหม่ WordPress UI จะยังคงถูกใช้เป็นแดชบอร์ดสำหรับสร้างเนื้อหาในขณะที่ส่วนแสดงผลจะถูกย้ายไปที่เซิร์ฟเวอร์ Frontity

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ Frontity ได้ที่นี่ หากคุณมีเว็บไซต์ WordPress และต้องการลองใช้ Frontity คุณสามารถทำตามขั้นตอนที่ระบุไว้ที่นี่