استكشف أقوى تقنيات Laravel الحديثة: Inertia.js، View Creators، وHLS خطوة بخطوة

يوليو 27, 2025

أدوات قوية تقدر تستخدمها لتطوير تطبيقات Laravel بشكل احترافي: Inertia.js v2، وView Creators، وحزمة Laravel HLS لبث الفيديوهات بأمان.

١. Inertia.js v2 مع Laravel Adapter و React

Inertia.js هو حل بيخليك تشتغل على تطبيقات SPA - Single Page Application باستخدام Laravel و React من غير ما تضطر تبني REST API بالكامل.

🔧 خطوات التثبيت:
composer require inertiajs/inertia-laravel

npm install @inertiajs/inertia @inertiajs/inertia-react react react-dom
⚙️ إعداد المشروع:
// resources/js/app.jsx
import { createInertiaApp } from '@inertiajs/inertia-react';
import { render } from 'react-dom';

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props }) {
    render(, el);
  },
});
🔥 أهم المميزات في Inertia v2:
  • inertia.ensure_pages_exist: Laravel بيعرض خطأ واضح لو الـ Component مش موجود.
  • php artisan inertia:check-ssr: أمر جديد بيتأكد إن SSR شغال بعد النشر.
  • form.resetAndClearErrors(): بينضف البيانات والأخطاء معًا في استدعاء واحد.
🧪 مثال على التنقل باستخدام Inertia:
import { Inertia } from '@inertiajs/inertia';

Inertia.visit('/users', {
  onSuccess: () => console.log('تم تحميل الصفحة'),
  onError: () => alert('فيه مشكلة في التحميل'),
});

٢. View Creators في Laravel

View Creators بتسمحلك تحضّر البيانات مباشرة بعد إنشاء الـ View، قبل ما تبدأ Laravel في رندرتها.

🔧 طريقة الاستخدام:
use Illuminate\Support\Facades\View;

View::creator('dashboard', function ($view) {
    $view->with('totalUsers', \App\Models\User::count());
});
📌 الفوائد:
  • بيفصل منطق تجهيز البيانات عن الـ Controller.
  • بيخلّي الـ View دايمًا فيه المعلومات المطلوبة من غير تكرار الكود.

٣. بث الفيديوهات باستخدام Laravel HLS

Laravel HLS هي حزمة بتخليك تحوّل فيديوهاتك المخزنة في Eloquent Models لبث مباشر أو عند الطلب باستخدام بروتوكول HLS، وبتدعم تشفير AES-128.

🔧 التثبيت:
composer require outl1ne/laravel-hls
⚙️ الاستخدام:

ضيف Trait في موديل الفيديو:

use Outl1ne\Hls\Traits\ConvertsToHls;

class Video extends Model {
    use ConvertsToHls;
}

وبعدين تقدر تنفذ التحويل:

$video = Video::find(1);
$video->convertToHls();
🎯 المزايا:
  • تحويل سريع وآمن للفيديوهات.
  • دعم تشفير AES-128 لحماية المحتوى.
  • مناسب للتعليم الإلكتروني أو منصات الفيديو حسب الطلب.

المدونة

Redux Toolkit 2.9.0 - شرح التحديثات وتحسينات RTK Query بالتفصيل

فبراير 05, 2026

شرح تحديث Redux Toolkit 2.9.0 إصدار Redux Toolkit 2.9.0 ركّز بشكل أساسي على تحسين أداء RTK Query، وتنظيم طريقة التعامل مع الطلبات غير المتزامنة (...

شرح مفصل لكل هوك في React

يوليو 01, 2025

🎣 شرح React Hooks وبأمثلة عملية 🧠 useState بيعمل إيه: بيضيف حالة داخلية (state) جوا أي مكون شغال بوظيفة. مثال عملي: import React, { useSta...

إتقان CSS الحديثة: قوة if()، Popover Hints، والتنسيقات الذكية

يوليو 16, 2025

🌐 إتقان CSS الحديثة: قوة if()، Popover Hints، والتنسيقات الذكية CSS دلوقتي بقت أذكى بكتير. دالة if()، وميزة popover="hint"، وازاي نكتب تنسيقات متج...

لارافيل 12: كل جديد من 12.0 لـ 12.19 – دليل شامل

يوليو 20, 2025

🔧 1. لارافيل 12.0 – ستارتر كيتس وتعديلات أساسية إصدار 12.0 جاب Starter Kits جاهزة للـ React، Vue، Livewire، وكمان دمج مع WorkOS AuthKit،...

Laravel 12.19: استخدام Attributes لتنظيم الـ Query Builder

يوليو 07, 2025

Laravel 12.19: استخدام Attributes تنظّم Query Builder في Laravel 12.19، دلوقتي تقدر تستخدم Attribute اسمه #[UseEloquentBuilder] علشان تحدد Query Bu...

دليل للأنيميشن المتحركة بالسكّول بس بـ CSS

يونيو 26, 2025

دليل للأنيميشن المتحركة بالسكّول بـ CSS دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت — كله CSS بحت. 1. التلات مكونات بتوع...