Grandi miglioramenti delle prestazioni e patch di sicurezza per Filament v4.12 e v5.7!

Qualche settimana fa, il team di Filament ha chiesto il vostro aiuto per testare una versione beta per v4 e v5 che aveva l'obiettivo di apportare un enorme miglioramento delle prestazioni per applicazioni Filament complesse. Beh, avete risposto tutti alla grande e, grazie al vostro aiuto, a partire dalle versioni v4.12.6 e v5.7.6, abbiamo rilasciato questi miglioramenti sui canali di rilascio stabili per tutti!

Oltre a questi miglioramenti delle prestazioni, abbiamo anche rilasciato alcuni aggiornamenti di sicurezza per risolvere una manciata di CVE, quindi se state eseguendo Filament v4 o v5, aggiornate a queste versioni più recenti per mantenere la vostra applicazione sicura!

Ora, senza ulteriori indugi, parliamo di prestazioni!

Grandi miglioramenti delle prestazioni

Iniziamo subito con i protagonisti: gli enormi miglioramenti delle prestazioni che vediamo come parte degli aggiornamenti dei nostri pacchetti forms e tables.

Forms & schema

Innanzitutto, dietro le quinte per questo aggiornamento, il team ha fatto un gran lavoro ottimizzando il modo in cui i form vengono renderizzati all'interno di Filament per migliorare il tempo complessivo di rendering dei campi dei form. E, beh, siamo rimasti scioccati dai risultati. Li lasciamo parlare da soli:

Anche se tutti questi sono risultati incredibili, il vincitore assoluto qui è la velocità di rendering superiore del 90% di un Repeater con 10 elementi, ciascuno contenente due campi. Poiché i repeater sono spesso utilizzati in Filament per rappresentare grandi elenchi di dati, una riduzione così drastica del tempo di rendering aiuterà i form grandi e ricchi di dati a diventare enormemente più performanti, anche quando il numero di elementi del repeater continua a crescere nel tempo.

Ora, potreste chiedervi come siamo riusciti a ridurre il tempo di rendering mediano in modo così significativo. Per maggiori dettagli, date un'occhiata alla PR e vedete tutte le modifiche apportate; in breve, tuttavia, abbiamo sostituito gran parte dei nostri percorsi di rendering dei componenti Blade ripetuti con il rendering diretto dei componenti utilizzando il nostro caro amico, il vecchio tag <?php. Questa modifica riduce sostanzialmente il sovraccarico del framework per ogni singolo campo e componente di schema incluso nel form Filament.

Nota bene: i numeri dei miglioramenti delle prestazioni mostrati sopra provengono dai nostri benchmark interni durante lo sviluppo. A seconda della vostra applicazione specifica, i risultati potrebbero variare.

Tables

Se frequentate la community di Filament da un po', forse ricorderete che, non troppe versioni fa, il team di Filament ha realizzato una versione con un grande miglioramento delle prestazioni per il pacchetto tables, che ha già aumentato notevolmente le prestazioni delle tabelle, in particolare quando contengono tantissimi dati.

Tuttavia, per le ultime versioni di Filament v4 e v5, insieme agli aggiornamenti dei componenti forms e schema, il team ha dedicato ancora più tempo all'ottimizzazione delle tabelle Filament per renderle ancora più scattanti e performanti. Ancora una volta, lascio parlare i numeri:

Ancora una volta, il team è entusiasta di essere riuscito a trovare ulteriori aree per migliorare le prestazioni delle tabelle, perché le tabelle grandi e ricche di dati sono una spina dorsale fondamentale del motivo per cui molti sviluppatori scelgono di usare Filament in primo luogo!

A differenza dell'aggiornamento di forms e schema, dove gran parte del guadagno in termini di prestazioni era dovuto al refactoring del codice esistente lontano dai componenti Blade, le modifiche qui sono molto più sottili. Potete trovare l'elenco completo delle modifiche in questa PR, ma in breve, i miglioramenti principali derivano dall'aggiunta di percorsi di rendering più leggeri per azioni e componenti comuni, da una gestione più efficiente degli attributi e dall'aggiunta di una cache per record delle decisioni ripetute di visibilità e autorizzazione.

Tutte queste modifiche lavorano insieme per ridurre in molti casi in modo significativo la quantità di lavoro lato server necessaria quando si eseguono il rendering e le interazioni con le tabelle. In particolare, le applicazioni che hanno molte righe, colonne, azioni, regole di visibilità condizionale e/o controlli di autorizzazione dovrebbero trarre i maggiori benefici da queste modifiche.

Proprio come per i benchmark di forms/schema, questi numeri di miglioramento sono anch'essi semplici benchmark ottenuti dal team durante il processo di sviluppo. A seconda della vostra applicazione, i risultati potrebbero variare.

Altri aggiornamenti

Oltre a questi due enormi aggiornamenti delle prestazioni, il team ha pubblicato anche una manciata di aggiornamenti minori per prestazioni, sicurezza e qualità della vita che pensiamo apprezzerete molto!

Prestazioni

Limite del numero di regole e della profondità di annidamento del query builder

Con i nuovi metodi maxRules() e maxNestingDepth() aggiunti al Query Builder, ora è possibile limitare in modo affidabile il numero di regole e condizioni che possono essere applicate a una determinata query. Questi metodi limitano sia l'interfaccia utente front-end impedendo agli utenti di superare questi limiti, sia rifiutando i payload ricevuti che superano il limite.

In precedenza, alberi di regole di grandi dimensioni (che fossero intenzionali o manomessi) potevano causare un uso eccessivo di CPU e memoria durante l'elaborazione, portando a tempi di risposta lenti, costi infrastrutturali fuori controllo o veri e propri arresti del server.

Funzionalità di sicurezza

Sanitizzazione dei valori di colore CSS

Quando si inietta l'input dell'utente nell'HTML tramite un attributo style="", Filament ora fornisce un helper Str::sanitizeCssColor() che permette di sanificarlo per prevenire l'iniezione di attributi aggiuntivi.

Protezione opt-in contro l'iniezione di formule CSV

Quando si apre un CSV in un software per fogli di calcolo come Excel, i valori delle celle che iniziano con caratteri come =, -, +, <Tab> o altri caratteri simili possono essere interpretati come formule. Per questo motivo, Filament ha ora aggiunto un sistema di protezione opt-in che anteporrà deliberatamente un carattere " a tutte le celle che iniziano con caratteri potenzialmente dannosi, in modo che rimangano testo quando si apre il CSV nel suddetto software per fogli di calcolo.

Abbiamo reso intenzionalmente questa funzionalità opt-in perché valori legittimi come i numeri di telefono internazionali (+) verrebbero alterati.

Qualità della vita

Raggruppa le voci di menu di utenti e tenant

In precedenza, i menu di utenti e tenant venivano renderizzati come un'unica lista piatta, rendendo difficile la scansione degli elenchi di opzioni per le grandi applicazioni che visualizzano molte voci di menu.

Ora gli sviluppatori possono registrare più gruppi di voci di menu, ciascuno dei quali verrà renderizzato come elenchi visivamente separati per migliorare la leggibilità. Inoltre, come bonus aggiuntivo, Filament ora memoizzerà queste azioni di menu una volta per richiesta, evitando di costruire le azioni più volte, dando una piccola spinta alle prestazioni.

Consenti la chiusura del modale per annullare le azioni genitore

Per tutti i nidificatori di modali, questo è per voi!

Prima di questo aggiornamento, chiudere un modale all'interno di una catena di azioni annidate chiudeva solo il modale più interno. A volte, questo è il risultato desiderato, ma spesso gli sviluppatori vogliono chiudere il modale più interno e tutte le sue azioni genitore.

Questo aggiornamento introduce il metodo modalDismissesParentActions(), che consente a tutti i metodi di chiusura di un modale (pulsante di chiusura, tasto Esc, ecc.) di annullare tutti i genitori o di risalire fino a una determinata azione genitore denominata. Funziona alla grande per i flussi di lavoro multi-step che a volte richiedono un'interazione "abbandona questo flusso", piuttosto che la soluzione precedente in cui gli utenti dovevano chiudere ogni modale singolarmente.

Crea stati vuoti per i widget dei grafici

A partire da questa versione, ora potete creare stati vuoti personalizzati per i vostri widget dei grafici, contribuendo a una dashboard dall'aspetto più curato e professionale che distingue uno stato di grafico rotto da uno stato valido ma vuoto.

Aggiunte piccole ma utili

Oltre alle modifiche più grandi elencate sopra, il team di Filament ha aggiunto anche alcune correzioni e funzionalità minori a questa versione:

• Consenti clic attraverso modali e slide-over - ora potete scegliere di rimuovere il backdrop che blocca i clic da un modale o slide-over, consentendo agli utenti di interagire con i contenuti dietro il modale o slide-over mentre è mostrato.
• Riferimento ai genitori di navigazione tramite chiave stabile - mentre le voci di navigazione figlie dipendevano principalmente dal testo dell'etichetta visualizzata del genitore, ora possono essere referenziate utilizzando una chiave di navigazione stabile, prevenendo rotture impreviste con traduzioni, rinomine o etichette generate dinamicamente.
• Controllo della suddivisione dei termini di ricerca per colonna - ora potete configurare la suddivisione dei termini di ricerca per singola colonna anziché per l'intera tabella.
• Nascondi condizionalmente le colonne di esportazione - mostrare e nascondere colonne in un'esportazione ora può essere configurato dinamicamente tramite closure in fase di esecuzione.
• Configura il writer XLSX immediatamente dopo l'apertura - ora potete configurare il writer XLSX prima di scrivere qualsiasi cosa nel file, abilitando il supporto per righe personalizzate come righe di titolo, righe esplicative o formattazione preliminare senza dover sostituire l'intera pipeline di rendering.
• Configura dinamicamente la larghezza del contenuto del pannello - ora potete configurare dinamicamente la larghezza del contenuto in un pannello passando una closure al metodo maxContentWidth().
• Configura dinamicamente dark mode e theme switcher - ora potete configurare dinamicamente le impostazioni per la disponibilità della dark mode, la dark mode forzata e la visibilità del theme switcher in fase di esecuzione.
• Configura dinamicamente la larghezza della sidebar - ora potete configurare dinamicamente la larghezza della sidebar di Filament utilizzando closure in fase di esecuzione.

Considerazioni finali

Inutile dire che il team è entusiasta di questa versione! Tantissime fantastiche funzionalità e correzioni costruite sopra un refactor delle prestazioni di grande impatto, tutte racchiuse per voi in una release minore non-breaking.

Grazie ancora alla community, in particolare a coloro che hanno dedicato tempo ad aiutarci a testare queste correzioni delle prestazioni mentre erano ancora in beta! Senza tutto il vostro aiuto, non saremmo riusciti a ottenere i risultati che abbiamo ottenuto mantenendo questa versione semplice come un passaggio alla successiva versione minore.