הבנת מסגרת Frontity React שהוגדרה עבור וורדפרס

Frontity היא המסגרת הקדמית החדשה והחמה ליצירת אתרי וורדפרס מהירים

וורדפרס היא מערכת ניהול התוכן הפופולרית ביותר מזה זמן רב. זה לא רק שולט במעל 30% מאתרי האינטרנט באינטרנט, אלא שהוא גם מתגאה בקהילה ענקית של תורמים ששומרים על המערכת האקולוגית של וורדפרס חיה וחזקה.

וורדפרס היא בעיקר תוכנת שרת מבוססת PHP. ישנם אלפי שיפורים והרחבות מותאמים אישית לוורדפרס שהם בעיקר בצורה של תוספים מבוססי PHP. לפיכך, באופן לא מפתיע היו ניסיונות רבים לשלב מסגרות שאינן PHP עם WordPress, במיוחד מסגרות Javascript אשר משתלטות במהירות על מרחב החזית בפיתוח אתרים.

מסגרת אחת כזו שבאמת מטפסת בתרשימים היא מסגרת React.js לוורדפרס שנקראת Frontity. הוא פותח על ידי סטארט-אפ שבסיסו מספרד. פיתוח עבור Frontity נמשך כבר כמה שנים. עם זאת, לאחרונה היא הגיעה לחדשות כשגייסה סבב של מיליון אירו בהובלת החברה מאחורי וורדפרס, אוטומטי וחברת הון סיכון KFund. כדי להבין את הסיבה מאחורי זה, חשוב קודם כל להבין מהי מסגרת Frontity, ומה היתרונות שהיא מביאה.

מה זה פרונטיטי?

לפני שנלמד על Frontity, חיוני להכיר את הארכיטקטורה הבסיסית של וורדפרס. כפי שאתה אולי יודע, וורדפרס היא תוכנת שרת מבוססת PHP. זה דורש תוכנת שרת כמו Apache או Nginx כדי לשרת בקשות, ותוכנת מסד נתונים כמו MySQL לאחסון נתונים (פוסטים, דפים, משתמשים וכו').

ארכיטקטורת וורדפרס

ברגע שתפתח, אמור את העמוד הראשי של אתר וורדפרס, הוא יתקשר index.php קובץ ב-backend, שיחזיר את ה-HTML, CSS וה-JS עבור דף הבית שיוצג לאחר מכן בדפדפן. לפיכך, PHP פועלת כממשק שער משותף (CGI) עבור האתר ולכן כל סוג של שיפורים בחזית הקצה צריך להיות מבוסס PHP.

אדריכלות פרונטיטי

מאז פרונטיטי הוא א תגובה-בסed framework, בוא נדבר תחילה קצת על React JS. React היא מסגרת Javascript חזיתית שפותחה ופורסמה על ידי פייסבוק. זה פופולרי מאוד בגלל השימושיות שלו ביצירת ממשק משתמש מהיר, יציב ומגיב. React עובד כמודול Node JS ומכאן שאתר המשתמש ב-React חייב להיות מבוסס על שרת Node JS.

כעת, אם אתה רוצה להשתמש במסגרת Javascript גרידא כמו React כדי לשפר את החזית, כלומר ליצור ערכות נושא מותאמות אישית, מסורבל לעשות זאת. הסיבה היא שמסגרת כמו React פועלת בשילוב עם Node, שמתחיל שרת משלו. וכפי שציינו קודם, וורדפרס עובדת עם שרת PHP CGI בקצה האחורי. לפיכך, אין דרך פשוטה לבנות ערכות נושא וממשק משתמש מותאמים אישית באמצעות React עבור WordPress.

עם זאת, יש דרך לאחזר נתונים ממסד הנתונים של וורדפרס מרחוק. ניתן לעשות זאת באמצעות ה-WordPress REST API, המשולב במלואו בליבת וורדפרס מאז גירסת WP 4.7 ומעלה. אם אנחנו יכולים להביא נתוני וורדפרס מרחוק, זה אומר שעכשיו אנחנו יכולים להציג את הנתונים שאוחזרו כפי שאנו רוצים. משתמשים משתמשים ב- REST API כבר זמן רב כדי לפתח אפליקציות מותאמות אישית, דפי אינטרנט לגישה לנתוני וורדפרס ישירות ממסד הנתונים. סוגים אלה של מערכות ניהול תוכן (CMS) מכונות גם חֲסַר רֹאשׁ CMS.

פרונטיטי מבוססת על הרעיון הזה בדיוק. הוא מתחבר למסד נתונים של וורדפרס באמצעות REST API, דואג לניתוח וארגון הנתונים שאוחזרו. זה משאיר לך באיזה נושא תרצה להשתמש כדי להציג את האתר. מכיוון שהוא מבוסס על React, ניתן להשתמש בכל ערכת נושא של React עבור האתר. אתה יכול גם לפתח את הנושא המותאם אישית שלך אם תבחר בכך. הקצה הקדמי מבוסס PHP של וורדפרס עדיין ישמש יוצרים/מנהלים כדי ליצור תוכן או לשנות הגדרות. אבל ממשק קצה מבוסס Frontity ישמש כעמוד הראשי של האתר.

לפיכך, בהגדרת Frontity יהיו שני שרתים נדרשים: האחד הוא שרת וורדפרס, שבו פועל REST API ומחזיר נתוני וורדפרס, והשני הוא שרת Node JS שמריץ את Frontity כדי לקרוא ל- REST API ולהציג נתונים באמצעות React .

הדרך קדימה?

כשהחברה שמאחורי וורדפרס מגייסת מיליון יורו ו-React מביאה חווית משתמש עשירה לוורדפרס, לא יהיה זה מוגזם לומר ש-Frontity היא הדרך קדימה לאתרי וורדפרס מודרניים. ממשק המשתמש של וורדפרס ימשיך לשמש כלוח מחוונים ליצירת תוכן בעוד שחלק התצוגה יועבר לשרת Frontity.

תוכל לקרוא עוד על Frontity כאן. אם יש לך אתר וורדפרס ואתה רוצה לנסות את Frontity, תוכל לבצע את השלבים המוזכרים כאן כדי לעשות זאת.