Livewire ל-WP

ספוילר: את הפרויקט הזה גנזתי. באפילוג אני מסביר למה.

אני שונא לכתוב ajax. הצד של ה-php, הצד של ה-js - הכל. זה מרגיש כמו פונקציה רקורסיבית שפשוט לא נגמרת.

תחשבו על זה, כשאתם כותבים ajax או כל אינטראקציה של הלוך ושוב, מה שבאמת קורה בסוף זה ששולחים מכתב בתוך מכתב למשתמש שלכם. המכתב הראשון הוא ה-markup שלכם; header, footer, טופס. המכתב המקונן הוא ההוראות איך לחזור ולקרוא לכם - js עם fetch ו-nonce והחלפה. אחר כך אתם צריכים לחשוב איך לקבל את בקשת ה-ajax הזאת. ועדיין לא דיברנו בכלל על ולידציה אמיתית, לוגיקה או אבטחה.

דמיינו שלא הייתם צריכים לחשוב על כל זה בכלל. זה מה שמפתחי Laravel קוראים לו livewire. אתם כותבים את כל האינטראקציה ב-php ונותנים לקומפיילר לעשות בשבילכם את העבודה המשעממת.

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

הטוב

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

use LooseWire\Wire;

class Clicker extends Wire {

    public function render(): string {
        return "
            <span>hi mom!</span>
        ";
    }
}

שמים אותו בתיקיית theme/wires שלכם, ואז משתמשים בו בתבנית שלכם:

/*
Template Name: clicker
*/
use LooseWire\WireManager;

wp_head();

echo WireManager::setupWire('Clicker');

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

בשביל זה צריך עוד כמה דברים:

• משתנה ציבורי (public)
• פונקציה ציבורית
• הגדרת האירוע

use LooseWire\Wire;

class Clicker extends Wire {

    public $count = 0;

    public function increase() {
        $this->count++;
    }

    public function render(): string {
        return "
            <button onclick='".$this->pullOn('increase')."'>
              {$this->count}
            </button>
        ";
    }
}

זהו. כשהתוסף פעיל, זה פשוט עובד.

המכוער

הדבר היחיד שאמור להרים גבה זו השורה הזאת

"<button onclick='".$this->pullOn('increase')."'>";

לא רק כי היא מכוערת, אלא כי כאן קורה הקסם. במילים פשוטות, בכל פעם שלוחצים על הכפתור, נשלחת בקשה לשרת, שיוצרת מחדש אובייקט ממחלקת Clicker, ממלאת את המאפיינים הציבוריים שלו בערכים שהוגדרו בצד הלקוח, ואז מריצה את פונקציית ה-increase ולבסוף מחזירה render חדש.

והרע

עכשיו, כדי להיות כנה לגמרי, זו לא הדרך הטובה ביותר לגשת לזה, התחביר מסורבל ואני שומר יותר מדי נתונים בתוך ה-html.

<div wire-render="">
     <button onclick="loose.pullOn(this, &quot;Clicker&quot;, &quot;increase&quot;, &quot;eyJjb3VudCI6MH0=&quot;)">
        <span>0</span>
     </button>
</div>

אני מוסיף עטיפה כדי לדעת אילו אלמנטים לרנדר מחדש. והפונקציה $this->pullOn('increase') נפרשת להיות

loose.pullOn(this, "Clicker", "increase", "eyJjb3VudCI6MH0=");

this משמש לקביעת יעד הרינדור מחדש, Clicker ו-increase הם השם של הקובץ, המחלקה והמתודה שלנו, ו-eyJjb3VudCI6MH0= הוא מערך מקודד של המשתנים הציבוריים שלנו.

atob('eyJjb3VudCI6MH0=')
// '{"count":0}'

וזה הקאץ’ האמיתי: base64 זו תחפושת, לא מנעול. כל אחד יכול לפענח את המחרוזת הזאת, לשנות את count למיליון ולשלוח אותה בחזרה. אז תתייחסו לכל מאפיין ציבורי כמו לכל קלט משתמש אחר - תעשו לו ולידציה בשרת, בכל פעם.

זה Livewire? לא. זה קליקר צד-שרת שרץ על וורדפרס בלי שורה אחת של ajax שנכתב ביד? כן. המפלצת הושלמה, ואני לגמרי בסדר עם זה.

אפילוג: גנזתי אותו

בסוף החלטתי שזה בזבוז זמן. אף אחד כבר לא כותב ajax ביד, אז דרך נחמדה יותר לא לכתוב אותו ביד לא עוזרת לאף אחד. למה אני חושב ככה - זה כבר פוסט אחר לגמרי, על העתיד של AI. בקרוב.