Slides "FilamentPHP: il tuo admin panel sotto steroidi", portato al Laravel Day Italia 2023.
Tratta di Filament, di cosa lo rende speciale e come puo' essere utilizzato per gestire la permissistica di una piattaforma backoffice online.
2. Sono uno sviluppatore web, docente e
Scrum Fundamentals Certified.
In Aulab faccio parte di un team dedicato a
vari corsi di upskilling e reskilling
nell'ambito della programmazione, dove
sono il Product Owner di un percorso
formativo basato proprio su Laravel.
Hello world!
Sono Davide Cariola
3. Questo progetto nasce dalla necessita'
aziendale di creare un sistema di gestione
granulare della permessistica su una
piattaforma con numerosi tipi di utente.
Con il pretesto, quindi, di presentarvi
Filament, andremo a vedere come
abbiamo pensato di implementare questo
sistema.
Il progetto
5. FilamentPHP, o solo Filament, è un toolkit
open source che permette di creare
dashboard attraverso dei componenti full-
stack.
E' uno strumento batteries included, che
permette di creare tantissime UI a seconda
delle necessità del cliente.
Nasce il 16 Agosto 2022 dall'impegno di
Dan Harrin, Lead Developer per
Kirschbaum, e Ryan Chandler,
sviluppatore Laravel, Rust e Go.
Cos'è FilamentPHP
6. Nova e' il favoured enemy di Filament:
entrambi i tool permettono, infatti, di
creare gestionali complessi.
Al contrario di Nova, che preferisce
componenti in Vue.js, Filament integra
perfettamente lo stack TALL (Tailwind CSS,
Alpine.js, Laravel, Livewire).
Lo stack tecnologico
7. C'e' una community Discord dedicata,
molto attiva, che conta più di 10k utenti e
sezioni dedicate a pacchetti di terze parti,
per raccogliere feedback e consigli.
Sul sito ufficiale e' possibile trovare, inoltre,
delle sezioni Tricks e Blog sul sito ufficiale,
con più di 100 articoli, a cui tutti possono
contribuire.
Notato dalla community…
8. Filament è stato notato anche da Taylor
Otwell, Jeffrey Way e tutto il team dietro
Laracasts.
Sulla piattaforma di video tutorial dedicati
a Laravel e' infatti possibile trovare una
"Creator Series" tenuta proprio daDan
Harrin, che spiega come creare
componenti custom e interi plugin per
Filament.
…e anche da Laravel
10. Filament e' un toolkit low-code
che permette di creare pannelli
gestionali attraverso codice
estremamente dichiarativo,
sfruttando al massimo OOP e
Fluent Interface.
È facile
11. Simile a Nova
Filament è incredibilmente facile da
utilizzare, soprattutto per chi -come il
sottoscritto- adora Laravel Nova e l'ha
utilizzato spesso nei propri progetti.
Permette infatti allo sviluppatore Laravel
di trasferire immediatamente la sua
Developer eXperience sul nuovo tool con
il massimo risultato.
12. Tramite attributi statici e metodi molto
parlanti, possiamo ottenere un ottimo
risultato in pochissimo tempo.
Un punto focale, come magari possiamo
notare nel codice ma che vedremo
meglio dopo, è che ogni singolo metodo
accetta anche una Closure.
Tanto in poco tempo
14. Sfruttando Livewire, Filament ha dei
campi built-in molto particolari, alcuni tra
i quali permettono di modificare il valore
di un elemento in un click, senza passare
dalla sezione di edit.
Con Nova, questo richiederebbe un Field
custom sviluppato con Vue.js.
Tante possibilita'
16. Ed essendo una caratteristica built-in del
tool, la medesima logica è utilizzabile
anche su altri tipi di input, come un input
text.
Nel codice qui accanto, l'input
TextInputColumn, ci consente di poter
modificare (e salvare) lo stato di un
oggetto direttamente dalla
visualizzazione tabellare.
Reattivita' al top
17. Abbiamo già detto che Filament
utilizza il TALL stack, e questo
permette allo sviluppatore
Laravel di essere molto più
efficiente ed efficace.
Soprattutto se ha conoscenze di
sviluppo con VueJS minime.
È veloce
18. Un'altro elemento importante di
Filament è che utilizza di default
Laravel-Vite invece di lavorare
con Laravel Mix.
Questo da accesso a diverse
features come l'hot-reloading,
che permettono di avere
un'esperienza di sviluppo più
produttiva e rapida.
Usa Laravel-Vite
19. Una delle cose che più mi ha
colpito di Filament è la
possibilità di personalizzazione
data allo sviluppatore.
Se alcune feature, come
personalizzare le label di
navigazione, le icone ecc. sono
abbastanza standard, altre
invece sono molto più
particolari.
È personalizzabile
20. Per esempio, basta una semplice riga di
codice per rendere la sidebar collassabile.
O magari preferiamo una navbar invece di
una sidebar: una semplice riga di codice.
E davvero tanto altro per quanto riguarda la
UI, in un'applicazione che può essere anche
multi-tenant.
Tante UI diverse
21. Ma la feature che davvero fa brillare
Filament è la possibilità di creare delle
"Pages".
Queste pagine sono dei componenti full-
page di Livewire, che integrano
perfettamente il Tall stack.
In questi componenti, infatti, possiamo fare
tutto ciò che possiamo fare con Livewire,
ma potendo aggiungere anche elementi di
Filament come azioni, widgets e altro.
Livewire Pages
24. La schermata appena vista è un ottimo
esempio di quanto sia personalizzabile
Filament.
Infatti quella è una pagina che utilizza un
componente Livewire per tabs e
contenuto, una table di Filament per la
visualizzazione e un form di Filament per
la creazione.
Filament & Livewire
25. In questo modo abbiamo potuto
unire Livewire a una UI già
predisposta di Filament per ottenere
ciò che ci serviva davvero.
Senza cambiare linguaggio o
framework.
Stesso discorso per i field custom,
senza dimenticare che abbiamo
accesso ad Alpine.js.
Senza cambiare
linguaggio
27. Una gestione granulare dei permessi è
importante per diverse ragioni, tra cui non
solo c’è la flessibilità ma anche
soprattutto la sicurezza e la
minimizzazione di rischi.
Per quanto un approccio di tipo RBAC
(Role-Based Access Control) sia sempre
necessario, non è detto che sia abbastanza.
Se poi utilizziamo nella nostra azienda
concetti come Principle of Least Privilege
(Principio del Privilegio Minimo) e un
modello Zero Trust (Fiducia Zero), la
questione si complica ulteriormente.
Permessi granulari
È vero che, di solito, la gestione della
permessistica si basa sul ruolo in azienda.
È anche vero però che potremmo voler
gestire in maniera diversa – o
complementare - questa soluzione.
Vogliamo la possibilità di gestire i
permessi per competenze, oppure fare in
modo che utente specifico abbia un
permesso che esula dal suo ruolo,
assegnatogli per necessità di organico o
di formazione.
29. Nel Permission Manager abbiamo creato
una prima parte tabellare con Filament che
consente la gestione CRUD delle nostre
istanze oltre a replicare e filtrare tutti i
permessi disponibili in piattaforma.
Nice-to-have:
Grazie al comportamento reattivo di
Filament, è stato piuttosto semplice settare
in tempo reale il campo "Identifier",
composto dallo slug del nome più il
contesto di permessistica scelto.
Permission Manager
31. La seconda parte è invece un
componente Livewire che ci
permette di assegnare ogni singolo
permesso ai ruoli disponibili.
Nice-to-have:
Tramite Livewire, basta un click per
assegnare un permesso.
Tramite la direttiva @cannot, inoltre,
possiamo disabilitare le checkbox a
seconda dei permessi di ogni ruolo.
Permission Manager
33. Nel Role Manager abbiamo una
prima parte tabellare con Filament
che consente la gestione CRUD delle
nostre istanze oltre a replicare e
filtrare tutti i ruoli disponibili in
piattaforma.
Nice-to-have:
Possibilità di riordinare tramite drag-
and-drop, gli elementi di una tabella.
Creare Custom Actions super
rapidamente.
Role Manager
34. Abbiamo poi un componente
Livewire, ripetuto sulle ultime schede,
che ci consente di indicare quale
ruolo ha i permessi per assegnare o
modificare gli altri ruoli.
Nice-to-have:
Il sistema built-in di notifiche
completamente customizzabili
rende molto facile dare un feedback
all'utente sulle azioni compiute.
Role Manager
36. La schermata degli utenti invece
è un po’ più standard, in quanto
è una visualizzazione tabellare
gestita direttamente dalla
Risorsa User di Filament.
Ma anch'essa nasconde una
personalizzazione niente male:
l'azione gestisci che ci permette
di entrare nel dettaglio dei
permessi assegnati a un utente.
Gli utenti
38. Di default, Filament si lega alle
Policies standard di Laravel.
Per tutto il resto, ci sono metodi come
hidden(), visible() o disabled() che ci
permettono di gestire tutto tramite
delle closure.
In definitiva ci sono bastati un trait,
le Policies di Laravel e due Gates.
Policies & Gates
39. Per avere un codice il piu' pulito e
manutenibile possibile, tutta la logica
di business e' gestita in classi Service.
Nice-to-have:
Tanto migliore puo' diventare il nostro
progetto quanto piu' alta e' la nostra
proficiency su Laravel.
Clean Code
