All'inizio di quest'anno, ho avuto l'occasione di aiutare il GRUSP a preparare un corso di base su Vue.js nonché una manciata di domande per un test su HTML rivolto agli stranieri che vogliono imparare a programmare. Le due cose sembrano apparentemente non collegate eppure, cercando su MDN ispirazione per domande su argomenti meno conosciuti, così da aggiungere una certa complessità al test HTML, ho scoperto cose interessanti.
Vue, a differenza di altri framework JS, ha davvero a cuore la separazione dei concetti fra HTML, CSS e Javascript che è qualcosa che apprezzo molto siccome non ho mai amato molto tutto quell'HTML e CSS dentro JSX.
E, già solo lavorandoci, si nota in modo naturale che davvero ama usare cose che sono già esistenti in HTML5 nel loro significato semantico.
Per esempio, il tag <template> che Vue.js usa per incapsulare il markup del componente, esiste davvero in HTM5 e ha proprio questo significato: contenere HTML che non deve essere visualizzato immediatamente quando una pagina viene caricata ma può essere istanziato successivamente durante il runtime utilizzando JavaScript. [MDN reference]
È meraviglioso! Per un'amante del codice semantico come sono, questo è molto bello.
La stessa cosa per il tag <slot>: è un segnaposto all'interno di un componente web che puoi riempire con il tuo markup, che ti consente di creare alberi DOM separati e presentarli insieme. [MDN reference]
Come puoi vedere dalla documentazione, arriva anche con l'attributo name per dare un nome allo slot proprio come succede in Vue.js.
Sia <template> sia <slot> sono parte della specifica dei componenti web per cui si adattano perfettamente allo scopo di Vue senza bisogno di re-inventare nuovi elementi.
L'avevi mai notato?
E ciò che apprezzo anche di Vue.js è il concetto che puoi davvero giocare ad "inventare" nuovi elementi HTML5. La flessibilità che HTML5 dà serve davvero molto bene lo scopo: puoi realmente immaginare i componenti come nuovi elementi HTML e pensare alle props come ad attributi personalizzati. La Guida sullo Stile di Vue.js stessa raccomanda alcuni modi per farlo correttamente: pensa al nome del componente come ad una parola composta per non andare in conflitto con i futuri elementi HTML5 (siccome questi saranno sempre composti da una parola sola). Fornisce anche alcuni consigli sul nominare componenti comuni usati spesso e componenti unici usati in tutta l'applicazione. Riguarda alle props, visto che possiamo pensare ad esse come a attributi personalizzati e sappiamo che HTML non usa mai lettere maiuscole, ecco che la Guida di Stile raccomanda il kebab case per i nomi di attributo usati nel template anche se vengono scritti in camel case nella dichiarazione.
Con questo in mente, puoi creare nuovi bellissimi e semantici elementi come componenti Vue.js, puoi davvero costruire il tuo proprio codice HTML! E personalmente credo che avere questi concetti in testa aiuti davvero nel costruire componenti efficienti ed intuitivi (non vorresti usare un nome di prop lunghissimo se deve diventare un attributo di tag, giusto?).
I Single File Components (aka SFC) poi sono la reale forza di Vue.js, quelli che permettono di tenere separato l'HTML, unito al template, dalla parte logica JS e da quella di presentazione CSS mantenendo il tutto, di fatto, in un unico file. Separati ma uniti. È bello come una canzone!
Questa organizzazione del codice dà la possibilità di mantenere tutto in ordine. Potresti anche decidere di mantenere la logica JS e lo stile in file separati e poi importarli semplicemente tramite l'attributo src. Quindi, fondamentalmente, Vue.js offre molta flessibilità che ti consente di decidere davvero come dovrebbe essere organizzato il tuo codice.
È, ovviamente, per gli amanti di JS, ma anche per gli amanti di HTML e CSS. Ecco perché mi piace: non devo rinunciare a nessuno dei tre :)
Chiaramente Vue.js è molto più di questo, ma sono queste le cose che mi hanno fatto subito innamorare 💚
