وبلاگ
livewire نسخه 3 به طور رسمی منتشر شد
Caleb Porzio به تازگی Livewire v3 رسمی را منتشر کرد! در سخنرانی خود در لاراکون، او بسیاری از ویژگی های جدید را نشان داد، که برخی از آنها را در اینجا پوشش می دهیم
هسته بازنویسی شده
هسته Livewire کاملا از ابتدا بازنویسی شده است. بازنویسی هسته یک کار بزرگ بود، اما لازم بود برای انجامِ همه چیز که در این نسخه گنجانده شده است. معماری هسته جدید نیز برای Caleb و همکاران اصلی Livewire بسیار آسان تر خواهد بود.
استفاده از آلپاین
هسته V3 اکنون از تمام پتانسیل آلپاین استفاده می کند. به جای در نظر گرفتن کد برای اعمال بروزرسانی های DOM، اضافه کردن event listeners و غیره، در Livewire و Alpine، از آلپاین استفاده می کند. حالا Livewire با ثبت نام پلاگین های آلپاین، به آلپاین اجازه می دهد تا عملیات سنگین را انجام دهد.
این بدان معنی است که اکنون آلپاین به صورت پیش فرض با Livewire در نظر گرفته شده است، بنابراین نیازی به بارگذاری آلپاین از طریق CDN یا NPM نیست. به صورت خودکار تزریق می شود.
علاوه بر این، V3 از پلاگین Alpine Morph برای پخش DOM و اعمال بروزرسانی به جای morphdom استفاده می کند. این امر منجر به مشکلات پخش DOM کم تر و سازگاری بهتر بین Livewire و آلپاین خواهد شد.
بهبود component nesting
با reactive props، bundled requests ،`$parent` property جدید و پیشرفت های دیگر، V3 بهبود component nesting را تجربه کرده است.
بهبود property serialization
V2 سعی کرد به طور هوشمندانه تعیین کند که چه نوع ویژگی هایی در رندر اولیه وجود دارد تا آنها را به همان نوع در درخواست های بعدی بازگرداند. با این حال، V2 از deeply nested hydration پشتیبانی نمی کند. اگر شما یک مجموعه با انواع مختلف داشته باشید، V2 هر آیتم مجموعه را به نوع اصلی خود باز نمی گرداند. V3 در این مورد بسیار هوشمندانه تر است و نوع هر مورد را ذخیره می کند تا بتواند آنها را به انواع مناسب در درخواست های بعدی بازگرداند.
Bundled requests
در V2 ، هنگامی که چندین جزء در یک صفحه در حال polling یا listening به یک رویداد بودند، Livewire هر بار که نیاز به صحبت با سرور داشت، درخواست های جداگانه ای را برای هر جزء ارسال می کرد. V3 بسیار کارامد تر است و بروزرسانی ها را در قالب یک درخواست ارسال می کند.
پیش فرض های بهتر
Blade marker injection
DOM diffing یکی از رایج ترین مسائلی است که می توانید با V2 اجرا کنید. این مسئله به طور معمول توسط if@ و دستورالعمل های مشابه Blade، قرار دادن یا حذف عناصر DOM ایجاد می شود. V3 تلاش می کند تا این مسائل را با تزریق comment HTML (Marker) که در آن دستورالعمل های Blade شروع و پایان می یابد، دور بزند. با جستجوی این نشانگرها، Livewire می تواند عناصر DOM جدید یا حذف شده را با یک نشانگر (Marker) مطابقت دهد تا آن ها را به درستی در DOM قرار دهد.
wire:model به طور پیش فرض به تعویق افتاده است
در اصل ویژگی live بودن در لایووایر یک ویژگی جالب بود بنابراین به طور پیش فرض ساخته شد. پس از تفکر بیشتر و مشاهده استفاده از دنیای واقعی، Caleb متوجه شد که به تعویق انداختن درخواست های `wire:model` به صورت پیش فرض بهتر است. اکثر برنامه ها در واقع نیازی به مقادیر ورودی برای همگام سازی با سرور در هر ضربه کلید را ندارند، بنابراین V3 رفتار پیش فرض را تغییر داد. قابلیت wire:model.defer در نسخه قبلی، اکنون پیش فرض جدید در هنگام استفاده از wire:model است. wire:model.live برای جایگزینی رفتار پیش فرض قدیمی در ورودی هایی که در واقع نیاز به ویژگی "live" دارند، اضافه شده است.
ویژگی های جدید
injected assets به صورت خودکار
در 3 Livewire به طور خودکار استایل ها، اسکریپت ها و Alpine اضافه می شوند. دیگر نیازی به اضافه کردن <livewire:styles /> و <livewire:scripts /> یا بارگذاری Alpine در پروژه های خود نیست!
فضای نام پیش فرض جدید
به‌طور پیش‌فرض، نسخه 3 از فضای نام App\Livewire (و پوشه app\Livewire) به جای App\Http\Livewire استفاده می‌کند. یک گزینه پیکربندی برای حفظ فضای نام قدیمی در صورت تمایل وجود دارد.
Reactive properties
برخی از کاربران Livewire که از فریم‌ورک‌های frontend مانند React و Vue می‌آیند، به‌طور خودکار فرض می‌کنند ویژگی‌هایی که به nested componentsمنتقل می‌کنند، نسبت به تغییرات والد واکنش نشان می‌دهند. به دلیل برخی محدودیت ها در نسخه 2، این در واقع امکان پذیر نبود. ما مجبور بودیم برای همگام سازی nested componentsبه رویدادها یا راه حل های دیگر تکیه کنیم. v3 پشتیبانی از "props "reactive را اضافه می کند. این کار به سادگی افزودن یک ویژگی [Reactive] PHP # به ویژگی کلاس کامپوننت شما است.
Form objects
اشیاء فرم مفهوم جدیدی هستند که می توانند با حذف برخی از کدهای فرم خاص به تمیز نگه داشتن کلاس های مؤلفه کمک کنند. ممکن است بخواهید ویژگی‌های فرم، اعتبارسنجی، قابلیت ذخیره‌سازی و موارد دیگر را روی اشیاء فرم قرار دهید.
wire: navigate (SPA mode)
ویژگی جدید دیگر wire:navigate است. هنگام استفاده از full-page Livewire components، اکنون می توانید ویژگی wire:navigate را به لینک های خود اضافه کنید تا تجربه ای شبیه به SPA را فعال کنید. به جای بارگذاری تمام صفحه، Livewire یک نشانگر بارگذاری را به بالای صفحه اضافه می کند، محتویات صفحه جدید را در پس زمینه واکشی می کند، سپس به طور هوشمند HTML را در صفحه عوض می کند. این ویژگی همچنین از prefetching و تغییر مسیر پشتیبانی می کند و توانایی persisted elements را فعال می کند.
@persist
با اضافه شدن wire:navigate، اکنون ممکن است عناصری "مداوم (persisted)" داشته باشید که هنگام پیمایش در صفحات مختلف دوباره بارگیری نمی شوند. این ویژگی برای موارد استفاده مانند پخش‌کننده‌های صوتی که می‌خواهید در حالی که کاربران شما در صفحات مختلف کلیک می‌کنند به پخش صدا ادامه دهید، مفید خواهد بود.
اجزای Lazy-loaded
اکنون Livewire از اجزای Lazy-loaded پشتیبانی می کند. گاهی اوقات، شما مؤلفه‌ای دارید که ممکن است بارگذاری صفحه اولیه را کاهش دهد یا در ابتدا در یک مودال پنهان است که می‌خواهید با تنبلی بارگذاری کنید تا بارگذاری صفحه اولیه سریع بماند.
Livewire از ارائه آن مؤلفه در بارگذاری صفحه اولیه صرفنظر می کند. هنگامی که تمام محتویات دیگر بارگیری شد، یک درخواست شبکه برای رندر کامل کامپوننت ارسال می شود و کامپوننت در DOM وارد می شود.
$parent property
برای برقراری ارتباط با مؤلفه‌های «والد» در نسخه‌های قبلی Livewire، باید از events و listeners استفاده می‌کردید. در نسخه 3، یک ویژگی parent$ جدید وجود دارد که می‌توانید از آن برای فراخوانی متدها در کامپوننت های والد مستقیماً از فرزندان استفاده کنید.
Hybrid methods/evaluating JS from the backend
v3 به شما این امکان را می دهد که اکنون متدهای جاوا اسکریپت را در بک اند خود بنویسید. با افزودن ویژگی #[Js] به یک متد بر روی یک کامپوننت، می‌توانید کد جاوا اسکریپت را به‌عنوان یک رشته بنویسید و Livewire آن متد را در فرانت اند شما نمایش می‌دهد. هنگامی که از طریق wire:click فراخوانی می شود، جاوا اسکریپت در فرانت اند اجرا می شود و هیچ درخواست شبکه ای به سرور ارسال نمی شود.
PHP Attribute usage
PHP Attributes یک ویژگی نسبتاً جدید و قدرتمند برای PHP هستند و Livewire v3 به شدت از آنها برای ویژگی های جدید و موجود استفاده می کند.
[Url]#
ویژگی جدید [Url]# جایگزین ویژگی query$ از v2 می‌شود. [Url]# را بالای هر خاصیت در کامپوننت خود اضافه کنید تا در کوئری استرینگ ردیابی شود.
[On]#
ویژگی جدید [On]# جایگزین ویژگی listeners$ از v2 می‌شود. [On('some-event')]# را بالای یک متد در کامپوننت خود اضافه کنید، و هر زمان که آن رویداد ارسال شد، اجرا خواهد شد.
#[Layout] and #[Title]
ویژگی‌های جدید [Layout]# و [Title]# به شما امکان می‌دهد layout view و عنوان را برای full-page components تنظیم کنید. آنها ممکن است در متد رندر کامپوننت یا خود کلاس اضافه شوند.
[Computed]#
در نسخه 2، ویژگی های محاسبه شده تنها می توانند در طول یک درخواست ذخیره شوند. در نسخه 3، می‌توانید یک ویژگی را در چندین درخواست و حتی در بین کامپوننت ذخیره کنید. این باعث می شود که کش کردن پرس و جوهای پایگاه داده بسیار آسان شود!
[Rule]#
ویژگی جدید [Rule]# جایگزین ویژگی $rules و متد rules از v2 می‌شود. [Rule(['required', 'max:150'])]# را به یک ویژگی در کامپوننت خود اضافه کنید تا به Livewire بگویید چگونه property باید اعتبارسنجی شود.
[Locked]#
ویژگی جدید [Locked]# به شما این امکان را می‌دهد که از به‌روزرسانی یک ویژگی از صفحه اصلی توسط کاربر جلوگیری کنید. می‌توانید از این به عنوان یک اقدام امنیتی در مورد ویژگی‌هایی که کاربران نمی‌توانند آنها را تغییر دهند، استفاده کنید.
ارتقاء
فرآیند ارتقا برای اکثر برنامه ها بسیار سریع خواهد بود. یک دستور با عنوان artisan `livewire:upgrade` وجود دارد که در نسخه بتا برای کمک به برخی از تغییرات گنجانده شده است، سپس می‌توانید راهنمای ارتقا را دنبال کنید تا مطمئن شوید همه چیز به‌روز است.
طراحی وب سایت و دامنه جدید
علاوه بر تمام ویژگی ها و پیشرفت های جدید، سایت Livewire docs به طور کامل بازطراحی، بازسازی و بازنویسی شده است!
اسناد جدید بسیار دقیق تر از اسناد v2 هستند. آنها هر ویژگی را با جزئیات پوشش می دهند. توصیه می کنم هر زمانی که وقت دارید کل سایت را مطالعه کنید.