Laravel/frontend

مقدمة

لا يفرض Laravel عليك استخدام أي معالج JavaScript و CSS، إلّا إنّه يوفّر نقطة انطلاق بسيطة باستخدام Bootstrap و Vue ممّا سيساعد العديد من التطبيقات. بصفة عامّة، يستخدم Laravel أوامر npm لتنصيب حزم الواجهات الأمامية هذه.

CSS

يوفّر Laravel Mix واجهة برمجية (API) سهلة ومعبّرة لترجمة Sass أو Less، وهي إضافات للغة CSS الأساسية التي تضيف المتغيّرات والمخاليط (mixins) والعديد من الخصائص الأخرى التي تجعل العمل بلغة CSS أكثر متعة. في هذه الصفحة، سنناقش باختصار ترجمة CSS بصفة عامّة لكن يمكنك تفقّد توثيق Laravel Mix لمعلومات أدق حول Sass و Less.

JavaScript

لا يتطلب Laravel إطار JavaScript معيّن ليبني التطبيق. بل يمكنك ألّا تستعمل JavaScript على الإطلاق لكن Laravel يوفّر آليات أساسية للبناء لتسهيل بدء كتابة JavaScript عصرية باستعمال مكتبة Vue. يوفّر Vue واجهة برمجيّة (API) معبّرة لبناء تطبيقات JavaScript فعّالة باستعمال المكوّنات. كما ب CSS، يمكن استعمال Laravel Mix لترجمة مكوّنات JavaScript لملف JavaScript واحد جاهز للاستعمال من المتصفح. حذف المكونات المساعدة لبناء الواجهات الرسومية

إن أردت حذف بناءات الواجهات الأمامية من التطبيق، يمكنك ذلك عبر استعمال الأمر

preset

هذا الأمر حين يضاف إليه الخيار none، سيحذف بناء Bootstrap و Vue ويبقي فقط على ملف Sass فارغ وبعض مكتبات خدمات JavaScript الشائعة:

php artisan preset none

كتابة CSS

يتضمن ملف package.json في Laravel حزم Bootstrap تساعد على البدء في إعداد نماذج أوليّة للواجهة الأمامية للتطبيق باستخدام Bootstrap. لكن لك الحريّة في إضافة أو حذف أي حزمة من package.json حسب حاجة التطبيق. لست مطالبًا باستخدام إطار Bootstrap، لكنّه يمثّل نقطة انطلاق جيّدة لمن اختار استخدامه.

قبل ترجمة شيفرات CSS، ثبّت الاعتماديات اللازمة للواجهة الأمامية للتطبيق باستعمال إدارة حزم Node‏ (NPM) ‏:

npm install

بعد أن تُثبَّت الاعتماديات باستعمال npm install، يمكن الآن ترجمة ملفّات Sass لملفات CSS عاديّة باستعمال Laravel Mix. سيعالج الأمر npm run dev التعليمات في ملف webpack.mix.js. في العادة، ملفات CSS المترجَمة توضع في مجلد public/css

 npm run dev

ملف webpack.mix.js المضَمّن مع Laravel سيترجم ملف Sass الموجود في resources/assets/sass/app.scss. هذا الملف app.scss سيستورد ملفًا من متغيّرات Sass وسيُحمّل Bootstrap، ممّا سيوفّر نقطة انطلاق جيدة لمعظم التطبيقات. لك حرية تخصيص الملف app.scss ليتناسب مع التطبيق، لكن إن أردت يمكنك استعمال معالج مسبق (pre-processor، مثل Less) مغاير بضبط Laravel Mix.

كتابة JavaScript

كل اعتماديات JavaScript التي يتطلّبها التطبيق موجودة في الملف package.json من الملف الرئيسي للتطبيق. هذا الملف شبيه بملف composer.json، غير أنّه يحدِّد اعتماديات JavaScript بدل اعتماديات PHP. يمكن تثبيت التبعيّات باستعمال إدارة حزم Node ‏(NPM):

npm install

ملاحظة: افتراضيًا، يتضمن ملف package.json بعض الحزم مثل vue و axios للمساعدة على بدء بناء تطبيقات JavaScript. لك حريّة إضافة أو حذف من package.json حسب حاجة التطبيق.

بعد تثبيت الحزم، يمكن استعمال الأمر npm run dev لترجمة الملفات. Webpack هو مجمّع وحدات لبناء تطبيقات JavaScript. عند تنفيذ الأمر npm run dev، ينفّذ Webpack التعليمات الموجودة في الملف webpack.mix.js

npm run dev

افتراضيًا، الملف webpack.mix.js سيترجم ملف Sass وملف resources/assets/js/app.js. في الملف app.js يمكنك تسجيل مكوّنات Vue، أو إن كنت تفضّل إطارًا آخر، يمكنك ضبط تطبيق JavaScript الخاص بك. توجد ملفات JavaScript المترجمة عادة في المجلد public/js. ملاحظة: الملف app.js سيُحمِّل resources/assets/js/bootstrap.js ممّا سيمهّد و يضبط Vue و Axios و jQuery و كل تبعيّات Javascript. بإمكانك القيام بهذا في هذا الملف.

كتابة مكوّنات Vue

في العادة، تطبيقات Laravel الجديدة تحتوي على ملف ExampleComponent.vue لمكوّنات Vue في المجلد resources/assets/js/components. الملف ExampleComponent.vue مثال على مكوّن Vue في ملف واحد الذي يعرّف كل من JavaScript وقالب HTML في نفس الملف. يوفّر المكوّن في ملف واحد منهجيةً مريحة و ملائمة لبناء تطبيقات معتمدة على JavaScript. مثالٌ عن مكوّنٍ موجودٍ في الملف app.js:

Vue.component(

   'example-component',
   require('./components/ExampleComponent.vue')

);

لاستخدام المكوّن في التطبيق، يمكن إضافته إلى أحد قوالب HTML. على سبيل المثال، بعد تنفيذ الأمر make:auth لبناء نظام تعريف و توثيق التطبيقة، يمكن إضافة المكوّن إلى قالب Blade في home.blade.php

@extends('layouts.app')

@section('content')

   <example-component></example-component>

@endsection

ملاحظة: تذكر أنّه يجب إعادة تنفيذ الأمر npm run dev كلّما تغيّر مكوّن Vue. أو يمكن تنفيذ الأمر npm run watch لمراقبة وإعادة ترجمة المكوّن تلقائيًا كلما حصل تغيير.

إن كنت مهتمًا بمعرفة المزيد عن كتابة مكوّنات Vue، ممكن أن تقرأ توثيق Vue الذي يقدّم توثيقًا كاملًا سهل القراءة لإطار Vue.

استخدام React

إن كنت تفضل استخدام React لبناء تطبيقات JavaScript، يوفر Laravel طريقة لتغيير بناء Vue Ygn بناء React. على تطبيق Laravel جديدة، يمكن استعمال الأمر preset مع الخيار react:

php artisan preset react

هذا الأمر سيحذف قوالب بناء Vue ويعوضها بقوالب بناء React، بما في ذلك مثال عن مكونٍ نموذجي.

مصادر

صفحة Frontend في توثيق Laravel الرسمي.