ازاي تخلي تجربة المستخدم في الـ Frontend سريعة مع Laravel Precognition

أكيد مريت بالموقف ده كتير: المستخدم يدخل بيانات في الفورم، يضغط زرار الإرسال، يستنى ثواني، وبعدين الصفحة تعمل Reload وتظهرله رسالة خطأ باللون الأحمر إن الايميل ده موجود قبل كدة أو إن الباسورد قصيرة. التجربة دي محبطة جداً ومزعجة لأي مستخدم. طيب، إيه رأيك لو قلتلك إن فيه طريقة تخلي لارافيل (Laravel) يقول للمستخدم إن فيه خطأ "قبل" ما الفورم تتبعت أصلاً للسيرفر للحفظ؟ ده بالضبط اللي بيعمله لارافيل بريكوجنيشن (Laravel Precognition).

يعني إيه Laravel Precognition؟

فكرة الـ Precognition باختصار هي "التنبؤ". هي مكتبة بتسمحلك تعمل Validation على الـ Frontend باستخدام نفس قواعد الـ Validation اللي كاتبها في الـ Controller بتاعك. يعني مش محتاج تعيد كتابة المنطق (Logic) مرتين، ولا محتاج تحول الـ Validation لـ JavaScript. هي بتبعت ريكويست "تجريبي" للسيرفر، السيرفر بيرد عليه ويقولك هل البيانات دي تمام ولا فيها مشاكل، من غير ما يحفظ أي حاجة في الداتابيز.

إزاي نبدأ نستخدمها في مشاريعنا؟

عشان نبدأ نستخدمها، لازم نكون شغالين بـ Laravel مع إطار عمل للـ Frontend زي Vue.js أو React أو حتى Inertia.js. أول خطوة هي تثبيت المكتبة عن طريق الـ NPM:

npm install laravel-precognition

بعد كدة، في الـ Controller، بدل ما تستخدم الـ Request العادي، بتستخدم الـ Precognition عشان تتأكد إن الريكويست اللي جاي ده مجرد "تأكيد" (Validation) مش عملية حفظ (Store):

public function store(Request $request)
{
    $request->validate([
        'email' => ['required', 'email', 'unique:users'],
    ]);

    // كود الحفظ بيتحط هنا ومش هيتنفذ لو ده ريكويست تنبؤي
}

الفرق الجوهري: ليه البريكوجنيشن أفضل من الـ Client-side Validation؟

ممكن حد يسأل: "ليه ما أستخدمش الـ Validation بتاع الجافاسكريبت العادي؟". الإجابة ببساطة هي التحقق الفريد (Unique Validation). الـ JavaScript ميعرفش الداتابيز فيها إيه، فمستحيل يتأكد إن الايميل ده محجوز فعلاً إلا لو سأل السيرفر. الـ Precognition بتخليك تستفيد من قوة لارافيل في التحقق من قواعد البيانات وفي نفس الوقت تاخد "تجربة فورية" للمستخدم (Instant Feedback) وهو بيكتب، وكأنه شغال Local بالظبط.

خطوات الربط مع الواجهة (Frontend Integration)

لو بتستخدم Vue.js مع Inertia، الموضوع بيبقى سهل جداً. بنستخدم الـ useForm اللي بيوفرها لارافيل عشان نربط الحالة (State) بتاع الفورم بالبريكوجنيشن:

import { useForm } from 'laravel-precognition-vue';

const form = useForm('post', '/register', {
    email: '',
});

const submit = () => form.submit();

مجرد ما المستخدم يخرج من حقل الايميل (Blur event)، المكتبة بتبعت ريكويست خفيف للسيرفر، لارافيل بيرجع الـ Validation Errors فوراً، والـ form.errors بتحدث نفسها في ثانية، والمستخدم بيشوف رسالة الخطأ قدامه من غير ما يضغط زرار الإرسال ومن غير ما الصفحة تعمل ريفريش.

نصيحة من أخ لمبرمج

التقنيات دي زي Laravel Precognition هي اللي بتفرق بين مبرمج "بيكتب كود شغال" ومبرمج "بيصمم تجربة مستخدم". نصيحتي ليك، ما تعقدش الأمور في البداية، ابدأ بتطبيقها على فورم واحدة زي الـ Registration أو الـ Contact Form. ركز جداً في فهم الـ Network Tab في المتصفح عشان تشوف الفرق بين الريكويست التجريبي والريكويست الحقيقي. دي مهارة هتخلي شغلك يبان بروفيشنال جداً وهتوفر على المستخدم وقت ومجهود كبير.