إدارة الـ Routing في تطبيقات Inertia بدون وجع دماغ
لو أنت مبرمج بتستخدم لارافيل (Laravel) ومعاها React أو Vue، أكيد مريت بلحظة "الزهق" دي: ليه أروح أعمل تعريف للـ Routes في لارافيل، وبعدين أرجع أعملها تاني في React Router أو Vue Router؟ ليه التكرار ده؟ وليه أحياناً بضطر أهتم بالـ Client-side routing والـ Server-side routing في نفس الوقت؟
في المقال ده، هنتكلم عن الحل السحري اللي بيقدمه إطار العمل Inertia.js، إزاي تنسى خالص فكرة الـ Front-end Router، وتخلي لارافيل هو الملك المتوج على عرش الـ Routing بتاعك.
Table of contents [Show]
ليه الـ Client-side Router بيعملنا صداع؟
لما بنستخدم الطريقة التقليدية (SPA)، بنحتاج مكتبات زي React Router. المشكلة مش في المكتبة نفسها، المشكلة في "التزامن". لو غيرت مسار في الباك-إند، لازم تروح تحدث الـ Front-end، ولازم تتعامل مع الـ Middleware مرتين، وغير مشاكل الـ Authorization اللي ممكن تظهر في ناحية وما تظهرش في التانية. مع Inertia، إحنا بنلغي الفصل ده وبنخلي التطبيق عبارة عن "Monolith" بتجربة مستخدم خرافية.
الاعتماد الكلي على Laravel Routing
فلسفة Inertia ببساطة هي: لارافيل هو اللي بيتحكم في كل حاجة. أنت بتعرف الـ Routes بتاعتك في ملف web.php كأنك شغال على مشروع Blade عادي جداً:
Route::get('/dashboard', function () {
return Inertia::render('Dashboard', [
'user' => auth()->user()
]);
});
هنا مفيش حاجة اسمها مسارات في الـ Front-end. الـ Controller هو اللي بيبعت الـ Component المناسب بالـ Data المطلوبة، و Inertia بتعمل الباقي "في الخلفية" (Under the hood) من غير ما الصفحة تعمل Refresh.
استخدام Ziggy: الجندي المجهول
ممكن تسألني: "طب لو عايز أعمل Link لصفحة تانية من جوه الـ Component بتاعي؟ أكتب المسار بايدي؟". طبعاً لأ! هنا بييجي دور مكتبة Ziggy. المكتبة دي بتخلي كل الـ Routes اللي عرفتها في لارافيل متاحة جوه الـ JavaScript.
بدل ما تكتب /users/1/edit، بتستخدم الدالة route() اللي اتعودنا عليها في Blade:
import { Link } from '@inertiajs/react';
<Link href={route('users.edit', user.id)}>
تعديل بيانات المستخدم
</Link>
ده مش بس بيخلي الكود أنضف، ده بيخليك تغير الـ URL في ملف الـ Routes مرة واحدة بس، وكل الروابط في تطبيقك هتتحدث أوتوماتيكياً!
توجيه الـ Middleware والحماية
بما إنك معتمد كلياً على نظام الـ Routing بتاع لارافيل، فأنت بتستفيد من كل حاجة: الـ Middleware، الـ Form Requests، والـ Policy. لو المستخدم مش مصرح له يدخل صفحة، لارافيل هيعمل Redirect للـ Login، و Inertia هتفهم ده وتوجه المستخدم للصفحة الجديدة فوراً من غير ما يفتح الـ Browser Console ويجيلك مشاكل غريبة.
نصيحة من أخ لمبرمج
يا صديقي، التطوير مش معناه دايماً إنك تستخدم أحدث مكتبة ظهرت على NPM. التطوير الصح هو إنك تختار الأدوات اللي بتقلل "الحمل الذهني" (Cognitive Load) عليك. Inertia بتقدم لك ده بامتياز. ركز في تعلم الأساسيات القوية في لارافيل، وهتلاقي إن الـ Front-end بقى جزء بسيط وسهل من رحلتك البرمجية.
ابدأ جرب الـ Single Page Application مع Inertia، وهتكتشف إن الوقت اللي كنت بتضيعه في تظبيط الـ Routing، تقدر تستثمره في بناء Features تخلي تطبيقك أقوى وأسرع.