Кілька тижнів тому команда Filament попросила спільноту допомогти протестувати бета-версію для v4 та v5, яка мала значно покращити продуктивність складних застосунків. Завдяки зусиллям спільноти, починаючи з версій v4.12.6 та v5.7.6, ці покращення випущені у стабільних релізах для всіх користувачів.
Важливо: Окрім покращень продуктивності, випущено оновлення безпеки для усунення кількох CVE. Якщо ви використовуєте Filament v4 або v5, обов'язково оновіться до останніх версій для забезпечення безпеки вашого застосунку.
Значне покращення продуктивності
Форми та схеми
Команда проделала величезну роботу з оптимізації рендерингу форм у Filament, щоб покращити загальний час відображення полів. Результати вражають:
| Компонент |
Попередня версія |
Поточна версія |
Зміна |
TextInput |
0.559 мс |
0.044 мс |
~92% швидше |
Select |
0.634 мс |
0.052 мс |
~92% швидше |
FileUpload |
0.586 мс |
0.083 мс |
~86% швидше |
Repeater (10 елементів, 2 поля) |
28.077 мс |
2.885 мс |
~90% швидше |
Checkbox |
0.314 мс |
0.033 мс |
~90% швидше |
Особливо вражає 90% прискорення рендерингу Repeater з 10 елементами, кожен з яких містить два поля. Оскільки repeater-и часто використовуються для представлення великих списків даних, таке різке скорочення часу рендерингу зробить великі форми, насичені даними, значно продуктивнішими.
Як вдалося досягти таких результатів? Команда замінила значну частину шляхів рендерингу Blade-компонентів прямим рендерингом компонентів за допомогою старого доброго тегу <?php. Ця зміна суттєво зменшує навантаження фреймворку для кожного поля та компонента схеми у формах Filament.
Зверніть увагу: наведені показники продуктивності отримані під час внутрішнього тестування. Залежно від вашого застосунку результати можуть відрізнятися.
Таблиці
Якщо ви давно у спільноті Filament, можливо пам'ятаєте, що не так давно команда вже випускала версію зі значними покращеннями продуктивності для пакета таблиць, яка драматично прискорила роботу з великими обсягами даних.
Однак у останніх релізах Filament v4 та v5, паралельно з оновленнями форм та компонентів схеми, команда витратила ще більше часу на оптимізацію таблиць, щоб зробити їх ще швидшими. Знову ж таки, цифри говорять самі за себе:
| Сценарій |
Попередня версія |
Поточна версія |
Зміна |
50 рядків, 5 TextColumn, 3 Action на рядок |
27.53 мс |
13.11 мс |
~52% швидше |
50 рядків, 5 TextColumn, 1 ActionGroup з 3 Action на рядок |
33.09 мс |
16.73 мс |
~49% швидше |
Команда в захваті від того, що вдалося знайти додаткові області для покращення продуктивності таблиць, адже великі таблиці з даними - це основна причина, чому багато розробників обирають Filament.
На відміну від оновлення форм та схем, де більша частина приросту продуктивності була досягнута завдяки рефакторингу коду від Blade-компонентів, зміни тут більш тонкі. Основні покращення отримані завдяки:
- Додаванню легших шляхів рендерингу для поширених дій та компонентів
- Ефективнішій обробці атрибутів
- Кешуванню повторюваних рішень щодо видимості та авторизації для кожного запису
Всі ці зміни разом значно зменшують обсяг серверної роботи при рендерингі таблиць та взаємодії з ними. Найбільше виграють застосунки з великою кількістю рядків, колонок, дій, умовних правил видимості та/або перевірок авторизації.
Як і у випадку з формами, ці показники є лише бенчмарками, отриманими під час розробки. Ваші результати можуть відрізнятися.
Інші оновлення
Продуктивність
Обмеження кількості правил та глибини вкладеності у Query Builder
Нові методи maxRules() та maxNestingDepth(), додані до Query Builder, дозволяють надійно обмежити кількість правил та умов, які можна застосувати до запиту. Ці методи обмежують як фронтенд-UI, не даючи користувачам можливості перевищити ліміти, так і відхиляють отримані payload, які перевищують ліміт.
Раніше великі дерева правил (навмисні чи підроблені) могли спричиняти надмірне використання CPU та пам'яті під час обробки, що призводило до повільного відгуку, зростання інфраструктурних витрат або повного падіння сервера.
Функції безпеки
Санітизація значень CSS-кольорів
При впровадженні користувацького введення в HTML через атрибут style="", Filament тепер надає хелпер Str::sanitizeCssColor(), який дозволяє санітизувати дані для запобігання впровадженню додаткових атрибутів.
Опціональний захист від formula-injection у CSV
При відкритті CSV у програмах для роботи з таблицями, як-от Excel, значення комірок, що починаються з символів =, -, +, <Tab> або подібних, можуть інтерпретуватися як формули. Тому Filament додав опціональну систему захисту, яка навмисно додає префікс " до всіх комірок, що починаються з потенційно шкідливих символів, щоб вони залишалися текстом.
Ця функція зроблена опціональною, оскільки легітимні значення, як-от міжнародні телефонні номери (+), були б змінені.
Покращення зручності
Групування елементів меню користувача та орендаря
Раніше меню користувача та орендаря рендерилися як один плоский список, що ускладнювало сканування опцій у великих застосунках з багатьма елементами меню.
Тепер розробники можуть реєструвати кілька груп елементів меню, кожна з яких буде візуально відокремлена для покращення читабельності. Як бонус, Filament тепер мемоізує ці дії меню один раз на запит, що уникає повторного конструювання дій і трохи підвищує продуктивність.
Можливість скасування батьківських дій при закритті модального вікна
Це для всіх, хто працює з вкладеними модальними вікнами!
Раніше закриття модального вікна всередині ланцюжка вкладених дій закривало лише найвнутрішнє модальне вікно. Іноді це бажаний результат, але часто розробники хочуть закрити найвнутрішнє модальне вікно та всі його батьківські дії.
Оновлення вводить метод modalDismissesParentActions(), який дозволяє всім методам закриття модального вікна (кнопка закриття, клавіша Escape тощо) скасовувати всі батьківські дії або повертатися до певної іменованої батьківської дії. Це чудово працює для багатокрокових робочих процесів, які іноді потребують взаємодії "залишити цей процес".
Порожні стани для віджетів діаграм
Тепер ви можете створювати власні порожні стани для віджетів діаграм, що робить дашборд більш відполірованим та професійним, відрізняючи стан зламаної діаграми від валідного, але порожнього стану.
Невеликі, але корисні доповнення
- Модальні вікна та slide-over з можливістю кліку наскрізь - тепер можна відключити блокуючий backdrop модального вікна або slide-over, дозволяючи користувачам взаємодіяти з контентом позаду
- Посилання на батьківські елементи навігації за стабільним ключем - дочірні елементи навігації тепер можуть посилатися на батьківські за допомогою стабільного ключа навігації, запобігаючи несподіваним збоям через переклади, перейменування або динамічно згенеровані мітки
- Контроль розбиття пошукових термінів на рівні колонок - тепер можна налаштовувати розбиття пошукових термінів для окремих колонок, а не для всієї таблиці
- Умовне приховування колонок експорту - показ та приховування колонок в експорті тепер можна налаштовувати динамічно через closures у runtime
- Налаштування XLSX writer одразу після відкриття - тепер можна налаштовувати XLSX writer перед записом чогось у файл, що дає підтримку кастомних рядків як-от рядки заголовків, пояснювальні рядки або попереднє форматування
- Динамічне налаштування ширини контенту панелі - тепер можна динамічно налаштовувати ширину контенту в панелі, передаючи closure методу
maxContentWidth()
- Динамічне налаштування темного режиму та перемикача тем - тепер можна динамічно налаштовувати доступність темного режиму, примусовий темний режим та видимість перемикача тем у runtime
- Динамічне налаштування ширини сайдбару - тепер можна динамічно налаштовувати ширину сайдбару Filament через closures у runtime
Підсумки
Команда в захваті від цього релізу! Величезна кількість чудових функцій та виправлень, побудованих поверх масштабного рефакторингу продуктивності, все разом упаковане в неламаючий minor-реліз.
Дякуємо спільноті, особливо тим, хто витратив час на тестування цих покращень продуктивності в бета-версії! Без вашої допомоги ми не змогли б досягти таких результатів, зберігаючи реліз настільки простим, як оновлення до наступної minor-версії.
