livewire best practices
2.1.1
هذا المستودع عبارة عن قائمة منسقة من التوصيات العامة حول كيفية استخدام إطار عمل Laravel Livewire لتلبية مخاوف المؤسسة فيما يتعلق بالأمان والأداء وصيانة مكونات Livewire.
اسمي مايكل روبيل وبدأت باستخدام إطار عمل Livewire في عام 2019 عندما كان جديدًا وبالكاد مستقرًا. في الماضي، أعجبت بمدى سرعة شحن واجهات المستخدم الديناميكية دون استخدام JavaScript. ولكن مثل أي حل برمجي، كان له عيوبه، وكان علي أن أتعامل معها. الهدف الرئيسي لهذا المستودع هو جمع أهم التجارب التي تحتاج إلى أخذها في الاعتبار عند العمل مع Livewire.
لنبدأ...
يتطلب Livewire وجود عنصر جذر (div) في كل مكون. يجب عليك دائمًا كتابة التعليمات البرمجية داخل <div>Your Code Here</div> . سيؤدي حذف هذه البنية إلى حدوث الكثير من المشكلات في تحديث المكونات.
مثال
Don't pass large objects to Livewire components!تجنب تمرير الكائنات إلى الخصائص العامة للمكون إن أمكن. استخدم الأنواع البدائية: السلاسل، والأعداد الصحيحة، والمصفوفات، وما إلى ذلك. وذلك لأن Livewire يقوم بإجراء تسلسل/إلغاء تسلسل الحمولة النافعة للمكون الخاص بك مع كل طلب إلى الخادم لمشاركة الحالة بين الواجهة الأمامية والخلفية. إذا كنت بحاجة إلى العمل على كائنات، فيمكنك إنشائها داخل طريقة أو خاصية محسوبة، ثم إرجاع نتيجة المعالجة.
ما للنظر في كائن كبير؟
ملاحظة: إذا كنت تستخدم مكونات صفحة كاملة، فمن المستحسن جلب الكائنات في مكون الصفحة الكاملة نفسه، ثم تمريرها إلى العناصر المتداخلة كأنواع بدائية.
إذا كان لديك مكون Livewire (0) يتضمن مكون Livewire آخر (1)، فيجب ألا تقوم بتداخله بشكل أعمق (2+). الكثير من التداخل يمكن أن يسبب صداعًا عند التعامل مع مشكلات DOM المختلفة.
تفضل أيضًا استخدام مكونات Blade عند استخدام التداخل، حيث سيكون بمقدورها الاتصال بمكون Livewire الخاص بالوالدين ولكن لن يكون لها الحمل الإضافي الذي يضيفه Livewire.
مثال
قدم Livewire v3 طبقة تجريد جديدة تسمى Form Objects . استخدمها دائمًا لأن ذلك يجعل مكوناتك أكثر قابلية للصيانة على المدى الطويل.
المستندات
تجنب المواقف التي قد تؤدي إلى تمرير بيانات حساسة إلى مكونات Livewire، لأنه يمكن الوصول إليها بسهولة من جانب العميل بشكل افتراضي. يمكنك إخفاء الخصائص من الواجهة الأمامية باستخدام السمة #[Locked] بدءًا من الإصدار 3 من Livewire.
بدلاً من استطلاع الصفحة باستمرار لتحديث بياناتك، يمكنك استخدام مستمعي الأحداث لإجراء تحديث المكون فقط بعد بدء مهمة محددة من مكون آخر.
مثال
يمكنك استخدام الخصائص المحسوبة لتجنب استعلامات قاعدة البيانات غير الضرورية. يتم تخزين الخصائص المحسوبة مؤقتًا خلال دورة حياة المكون ولا يتم تشغيلها عدة مرات في فئة المكون أو عرض النصل. بدءًا من Livewire v3، يمكن أيضًا تخزين نتيجة الخصائص المحسوبة مؤقتًا في ذاكرة التخزين المؤقت العامة على مستوى التطبيق (على سبيل المثال Redis)، راجع.
مثال
قم بتمرير معرف أو UUID فقط إلى طريقة mount ، ثم قم بتعيين سمات النموذج إلى خصائص المكون. تذكر: لا تقم بتعيين نموذج كامل، بل سماته فقط. لتجنب تعيين سمات النموذج يدويًا، يمكنك استخدام طريقة fill .
مثال
تجنب استخدام السلك live : معدل النموذج. وهذا يقلل بشكل كبير من الطلبات غير الضرورية إلى الخادم. في Livewire الإصدار 3، يتم تأجيل جميع النماذج افتراضيًا (القديم: معدل defer )، وهو أمر جيد.
أمثلة
يحتوي Livewire على أوامر Artisan مضمنة لإنشاء المكونات ونقلها وإعادة تسميتها وما إلى ذلك. على سبيل المثال، بدلاً من إعادة تسمية الملفات يدويًا، والتي قد تكون عرضة للأخطاء، يمكنك استخدام الأمر التالي:
php artisan livewire:move Old/Path/To/Component New/Path/To/Component يمكنك استخدام حالات التحميل لتحسين تجربة المستخدم. سيشير للمستخدم إلى حدوث شيء ما في الخلفية إذا كانت العملية الخاصة بك تعمل لفترة أطول من المتوقع. لتجنب الخفقان، يمكنك استخدام معدل delay .
مثال
بدلاً من حظر عرض الصفحة حتى تصبح بياناتك جاهزة، يمكنك إنشاء عنصر نائب باستخدام تقنية التحميل البطيء لجعل واجهة المستخدم الخاصة بك أكثر استجابة.
مثال
قم بمزامنة بياناتك مع الواجهة الخلفية باستخدام التوجيه $wire.entangle. بهذه الطريقة سيتم تحديث النموذج على الفور على الواجهة الأمامية، وستستمر البيانات من جانب الخادم بعد وصول طلب الشبكة إلى الخادم. إنه يحسن تجربة المستخدم بشكل كبير على الأجهزة البطيئة. يُطلق على هذا الأسلوب اسم "الاستجابة المتفائلة" أو "واجهة المستخدم المتفائلة" في مجتمعات الواجهة الأمامية الأخرى.
مثال
لا يدعم Livewire طلبات النماذج داخليًا، ولكن بدلاً من ترميز مجموعة قواعد التحقق من الصحة في المكون، يمكنك الحصول عليها مباشرة من طلب النموذج. وبهذه الطريقة يمكنك إعادة استخدام نفس قواعد التحقق من الصحة في طبقات التطبيق المختلفة، على سبيل المثال، في نقاط نهاية API.
مثال
حتى الاختبارات البسيطة يمكن أن تساعد كثيرًا عند تغيير شيء ما في المكون. يتمتع Livewire بواجهة برمجة تطبيقات اختبار واضحة وقوية.
هل تعمل مع Livewire يوميًا؟
اقترح أفضل ممارساتك إذا لم تراها في القائمة.
إذا لم تكن متأكدًا مما إذا كانت هذه ممارسة جيدة، فيمكنك بدء المناقشة.
