کیت‌های آغازین Laravel 12 چیست و چگونه کار می‌کنند؟

React، Vue و Livewire

وقتی یک پروژه جدید Laravel را شروع می‌کنید، لازم نیست همه‌چیز را از صفر بسازید. Laravel کیت‌های آغازین (Starter Kits) ارائه می‌دهد که بخش‌های پایه را مدیریت می‌کنند؛ از جمله مسیرها (routes)، کنترلرها، احراز هویت و کدهای اولیه مربوط به فرانت‌اند.

در Laravel 12، این کیت‌های آغازین به‌روزرسانی شده‌اند تا از دو انتخاب محبوب امروزی برای فرانت‌اند تک‌صفحه‌ای (SPA) یعنی React و Vue پشتیبانی کنند و در عین حال امکان استفاده از رویکرد ساده‌تر مبتنی بر قالب‌های Blade همراه با پیکربندی Livewire را نیز فراهم نمایند. هر یک از این کیت‌ها رویکرد متفاوتی برای ساخت اپلیکیشن دارند:

• React برای زمانی که رویکرد کاملاً مبتنی بر کامپوننت را ترجیح می‌دهید

• Vue اگر به دنبال چیزی نزدیک‌تر به جاوااسکریپت سنتی هستید (برای مثال بدون JSX)

• Livewire اگر ترجیح می‌دهید بیشتر در دنیای PHP و Blade بمانید و وابستگی سنگینی به جاوااسکریپت نداشته باشید

در این مطلب بررسی می‌شود هر کیت چه امکاناتی ارائه می‌دهد، چه تفاوت‌هایی با یکدیگر دارند و کدام گزینه برای پروژه بعدی Laravel 12 منطقی‌تر است.

کیت آغازین React

اگر در حال ساخت یک وب‌اپلیکیشن بسیار تعاملی مانند Trello، Slack یا GitHub هستید و از کار با کامپوننت‌های رابط کاربری قابل استفاده مجدد لذت می‌برید، کیت آغازین React انتخاب مناسبی است. در React، این اجزا «کامپوننت» نامیده می‌شوند؛ بلوک‌های مستقلی که می‌توانند وضعیت داخلی خود را مدیریت کنند، داده را از کامپوننت‌های والد دریافت نمایند و در بخش‌های مختلف اپلیکیشن مورد استفاده مجدد قرار گیرند.

این کیت از Inertia.js برای اتصال React به مسیرها و کنترلرهای Laravel استفاده می‌کند. به‌طور ساده، مزایای بک‌اند و فرانت‌اند را هم‌زمان در اختیار دارید. Laravel تمام منطق سمت سرور از جمله مسیریابی، احراز هویت و عملیات پایگاه داده را مدیریت می‌کند، در حالی که React رابط کاربری تعاملی را پیاده‌سازی می‌کند و امکان به‌روزرسانی صفحات بدون بارگذاری مجدد کامل صفحه را فراهم می‌آورد. نیازی به ساخت API سفارشی وجود ندارد که باعث ساده‌تر و سریع‌تر شدن توسعه می‌شود. علاوه بر این، کیت شامل TypeScript برای ایمنی نوع داده‌ها، TailwindCSS برای استایل‌دهی سریع و shadcn/ui برای کامپوننت‌های آماده رابط کاربری است. این مجموعه، پایه‌ای منعطف و قدرتمند برای ساخت رابط‌های کاربری واکنش‌گرا فراهم می‌کند.

لایه‌بندی‌ها و واریانت‌ها

پس از نصب کیت آغازین React، بیشتر کدهای فرانت‌اند در مسیر resources/js قرار می‌گیرند. به‌صورت پیش‌فرض، اپلیکیشن از لایه‌بندی سایدبار استفاده می‌کند، اما می‌توان با تغییر ایمپورت در بالای فایل resources/js/layouts/app-layout.tsx به‌راحتی آن را به لایه‌بندی هدر تغییر داد.

لایه‌بندی سایدبار سه واریانت دارد: پیش‌فرض، inset و floating. با به‌روزرسانی ویژگی variant در فایل resources/js/components/app-sidebar.tsx می‌توان گزینه مناسب را انتخاب کرد.

صفحات احراز هویت مانند ورود، ثبت‌نام و بازیابی رمز عبور نیز دارای سه نوع لایه‌بندی هستند: simple، card و split.

برای تغییر آن‌ها کافی است ایمپورت بالای فایل resources/js/layouts/auth-layout.tsx را به‌روزرسانی کنید:

کیت آغازین Vue

اگر فرانت‌اندی منعطف و ساده برای کار می‌خواهید، کیت آغازین Vue انتخاب قابل اتکایی است. این کیت نیز از Inertia.js برای اتصال Vue به مسیرها و کنترلرهای Laravel استفاده می‌کند، بنابراین می‌توان صفحات تعاملی مشابه اپلیکیشن‌های تک‌صفحه‌ای ساخت، بدون نیاز به API سفارشی. در نتیجه، قابلیت‌های واکنشی Vue در کنار مدیریت کامل منطق بک‌اند توسط Laravel در اختیار شما قرار می‌گیرد.

این کیت شامل Vue 3 Composition API، TypeScript برای کدنویسی ایمن‌تر، TailwindCSS برای استایل‌دهی سریع و shadcn/ui برای کامپوننت‌های قابل استفاده مجدد است. این ترکیب، محیطی تمیز و منعطف برای ساخت رابط‌های کاربری واکنش‌گرا فراهم می‌کند.

لایه‌بندی‌ها و واریانت‌ها

بیشتر کدهای فرانت‌اند Vue در مسیر resources/js قرار دارند و به‌شکلی سازمان‌دهی شده‌اند که پیدا کردن و شخصی‌سازی کامپوننت‌ها، صفحات، لایه‌بندی‌ها و هوک‌ها ساده باشد. به‌طور پیش‌فرض، اپلیکیشن از لایه‌بندی سایدبار استفاده می‌کند، اما می‌توان با تغییر ایمپورت بالای فایل resources/js/layouts/AppLayout.vueآن را به لایه‌بندی هدر تغییر داد:

لایه‌بندی سایدبار سه واریانت دارد: پیش‌فرض، inset و floating. برای انتخاب هرکدام، کافی است ویژگی variant را در فایل resources/js/components/AppSidebar.vue تغییر دهید:

صفحات احراز هویت مانند ورود، ثبت‌نام و بازیابی رمز عبور نیز سه گزینه لایه‌بندی simple، card و split دارند. برای تغییر آن‌ها، ایمپورت بالای فایل resources/js/layouts/AuthLayout.vue را به‌روزرسانی کنید:

مانند React، کامپوننت‌ها در Vue قابل استفاده مجدد هستند و تغییر لایه‌بندی یا عناصر رابط کاربری نیازی به بازنویسی صفحات ندارد.

کیت آغازین Livewire

اگر رویکرد سنتی‌تر MVC را برای فرانت‌اند ترجیح می‌دهید و می‌خواهید از موتور قالب‌سازی Blade استفاده کنید، کیت آغازین Livewire گزینه مناسبی است. Livewire نوعی «جادوی کنترل‌شده» به قالب‌ها اضافه می‌کند؛ به این معنا که جاوااسکریپت بر اساس کامپوننت‌های Livewire (که عملاً ترکیبی از کنترلر با وضعیت و مجموعه‌ای از متدهای API برای به‌روزرسانی DOM هستند) تولید می‌شود. این رویکرد باعث ساده‌تر شدن کد می‌شود و در عین حال امکان واکنش بلادرنگ صفحات به ورودی کاربر را فراهم می‌کند. این کیت همچنین شامل TailwindCSS برای استایل‌دهی و کتابخانه Flux UI برای کامپوننت‌های رابط کاربری قابل استفاده مجدد است.

بیشتر کدهای فرانت‌اند در مسیر resources/views قرار دارند و منطق سمت سرور کامپوننت‌های Livewire در مسیر app/Livewire پیاده‌سازی شده است. در این ساختار، کامپوننت‌های Blade قابل استفاده مجدد، کامپوننت‌های Flux، کامپوننت‌های Livewire مخصوص صفحات و فایل‌های partial به‌گونه‌ای سازمان‌دهی شده‌اند که توسعه و گسترش آن‌ها ساده باشد.

لایه‌بندی‌ها و واریانت‌ها

کیت آغازین Livewire شامل دو لایه‌بندی اصلی است: سایدبار (پیش‌فرض) و هدر. برای تغییر بین آن‌ها، کافی است کامپوننت Blade مورد استفاده در فایل resources/views/components/layouts/app.blade.php را تغییر دهید:

صفحات احراز هویت (ورود، ثبت‌نام و بازیابی رمز عبور) نیز سه گزینه لایه‌بندی simple، card و split دارند. برای تغییر آن‌ها، کامپوننت Blade مورد استفاده در فایل
resources/views/components/layouts/auth.blade.php را به‌روزرسانی کنید:

مانند React و Vue، کامپوننت‌های قابل استفاده مجدد و لایه‌بندی‌های ماژولار در Livewire امکان آزمایش ظاهرهای مختلف را بدون بازنویسی کامل صفحات فراهم می‌کنند.

جمع‌بندی

کیت‌های آغازین Laravel 12، صرف‌نظر از انتخاب فرانت‌اند، یک پایه محکم برای شروع پروژه فراهم می‌کنند. React برای اپلیکیشن‌های تک‌صفحه‌ای کامل مناسب است، Vue انعطاف‌پذیر و کاربرپسند است، و Livewire امکان باقی‌ماندن در اکوسیستم PHP و Blade را در کنار رابط‌های پویا فراهم می‌کند. هر سه کیت شامل کامپوننت‌های قابل استفاده مجدد، لایه‌بندی‌های ماژولار و استایل‌دهی آماده هستند و این موضوع امکان آزمایش و تغییر طراحی را بدون بازنویسی صفحات ساده می‌کند. برای افرادی که تمایلی به نوشتن کد فرانت‌اند ندارند و Livewire را انتخاب کرده‌اند، امکان افزودن Laravel Echo و Reverb برای راه‌اندازی سرورهای WebSocket نیز وجود دارد.

اگر تازه کار با Laravel را شروع کرده‌اید، منابع آموزشی زیادی برای مبتدیان در دسترس است و اعضای جامعه Laravel تجربه‌ها و پیشنهادهای مفیدی را به اشتراک می‌گذارند.