Bootstrap 5: le novità più im­por­tan­ti

Bootstrap è uno dei framework più popolari per lo sviluppo front end di siti web. Lo strumento fornisce modelli per CSS e HTML con i quali è possibile im­ple­men­ta­re design web moderni in modo re­la­ti­va­men­te semplice. Layout, font, pulsanti e vari elementi di na­vi­ga­zio­ne possono essere pro­get­ta­ti e po­si­zio­na­ti in modo semplice e veloce.

Ori­gi­na­ria­men­te svi­lup­pa­to per Twitter, il framework è di­spo­ni­bi­le da tempo come progetto open source gratuito per tutti. Ora è stata ri­la­scia­ta l’alpha dell’ultima versione di Bootstrap 5.

Dal 16 giugno 2020 Bootstrap 5 è già di­spo­ni­bi­le in una versione alfa, che è ancora con­si­de­ra­ta spe­ri­men­ta­le. Gran parte delle modifiche previste sono già state attuate, ma lo sviluppo non è ancora terminato. Allo stesso tempo, con­ti­nue­ran­no a essere ri­la­scia­te le patch per la versione 4 del popolare framework. Il team non ha pub­bli­ca­to un programma di rilascio, quindi non è at­tual­men­te possibile dire quando verrà ri­la­scia­ta una prima beta e infine la versione finale. Nel caso del pre­de­ces­so­re sono passati circa 2 anni e mezzo tra il rilascio della versione alpha e la versione finale.

Il team di Bootstrap ha an­nun­cia­to diverse centinaia di modifiche per la nuova versione. In molti casi si tratta di piccoli ag­gior­na­men­ti minori, ma ci sono anche alcune novità che possono rivelarsi estre­ma­men­te im­por­tan­ti per gli utenti di questo framework open source.

Al giorno d’oggi sono pochi gli utenti che uti­liz­za­no ancora il vecchio browser di Microsoft Internet Explorer. Talmente pochi che con Bootstrap 5 gli svi­lup­pa­to­ri hanno deciso di non offrire più alcun supporto per questo browser. Siccome Internet Explorer è diventato obsoleto e non viene più svi­lup­pa­to da Microsoft (a favore del nuovo browser Edge), in questo modo gli svi­lup­pa­to­ri possono ri­spar­miar­si di ag­giun­ge­re molto codice, in realtà oramai inutile.

Con il termine del supporto per Internet Explorer, i progetti in Bootstrap diventano più piccoli. Il motivo è che il browser Microsoft, ormai obsoleto, non essendo in grado di gestire i nuovi metodi Ja­va­Script, ha sempre richiesto materiale sup­ple­men­ta­re, il che si traduceva in file di di­men­sio­ni maggiori. In questo modo si è ottenuta una riduzione sia della di­men­sio­ne dei file che dei tempi di lavoro.

Per sem­pli­fi­ca­re il lavoro con Ja­va­Script, molti web designer e svi­lup­pa­to­ri uti­liz­za­no la libreria gratuita jQuery, che è stata inclusa per anni in Bootstrap. Ma con la nuova versione, gli svi­lup­pa­to­ri hanno deciso di terminare questa in­te­gra­zio­ne, in quanto si presume che agli utenti di Bootstrap 5 non servirà più. Ora infatti gli stessi effetti possono essere generati ra­pi­da­men­te e fa­cil­men­te anche senza jQuery grazie a un codice Ja­va­Script più avanzato o tramite HTML e CSS.

Grazie a questi cam­bia­men­ti, i progetti rea­liz­za­ti con la nuova versione di Bootstrap sono diventati no­te­vol­men­te più snelli. Le di­men­sio­ni dei file e quindi i tempi di ca­ri­ca­men­to si riducono, il che si traduce in una migliore espe­rien­za utente.

Poiché Internet Explorer non è più sup­por­ta­to, Bootstrap 5 può ora con­cen­trar­si ancora di più sulle moderne tecniche di web design. Questo include le CSS Custom Pro­per­ties: co­no­sciu­te già da tempo in Sass e Less, ul­ti­ma­men­te stanno gua­da­gnan­do una certa fama anche in ambito di CSS classico. Le proprietà (spesso chiamate variabili) rendono la pro­get­ta­zio­ne con CSS molto più semplice, oltre a con­sen­ti­re la rea­liz­za­zio­ne di layout moderni e ac­cat­ti­van­ti.

Già nella versione 4 del framework front end era possibile creare i layout uti­liz­zan­do le griglie CSS. In Bootstrap 5 la funzione rimane invariata, ma vi sono state aggiunte delle esten­sio­ni. Con xxl il team ha in­tro­dot­to una di­men­sio­ne sup­ple­men­ta­re. Inoltre, sono state aggiunte nuove classi per il vertical spacing.

Finora Bootstrap era stret­ta­men­te legato al ge­ne­ra­to­re di siti statici Jekyll. Questo strumento ha però uno svan­tag­gio: richiede l’in­stal­la­zio­ne di Ruby. Per questo il team di svi­lup­pa­to­ri ha deciso di passare a Hugo, che invece è scritto con il moderno lin­guag­gio Go e non necessita di alcun altro software in back­ground. Inoltre Hugo promette di essere molto più veloce dei suoi con­cor­ren­ti.

Al fine di aumentare la fles­si­bi­li­tà e di spingere ul­te­rior­men­te lo sviluppo di Bootstrap, Bootstrap 5 offre un nuovo modo per includere librerie e toolkit propri. Mentre prima era possibile integrare librerie e strumenti esterni in un progetto solo tramite classi, ora con Sass è stata svi­lup­pa­ta una nuova in­ter­fac­cia. È possibile uti­liz­zar­lo per includere le proprie utilità e per rimuovere quelle fornite da Bootstrap, se non si desidera uti­liz­zar­le per il proprio progetto.

Il progetto di Bootstrap, che nel frattempo è cresciuto enor­me­men­te, richiede anche un’adeguata do­cu­men­ta­zio­ne. Questo è l’unico modo di acquisire piena fa­mi­lia­ri­tà con il framework, non solo per i nuovi utenti ma anche per i web designer più esperti. A questo scopo il team ha deciso di mettere ordine anche nella do­cu­men­ta­zio­ne. Una nuova aggiunta è la sezione di per­so­na­liz­za­zio­ne, che spiega come estendere Bootstrap in modo in­di­pen­den­te. È stata inoltre aggiunta una nuova tavolozza di colori che offre ancora più pos­si­bi­li­tà di design di­ret­ta­men­te all’interno del codice.

Anche l’area dei moduli è stata rivista. Ora è possibile trovare in­for­ma­zio­ni sulla creazione di moduli molto più ve­lo­ce­men­te. So­prat­tut­to in questo contesto, la nuova versione di Bootstrap 5 offre molta più fles­si­bi­li­tà nella pro­get­ta­zio­ne degli elementi di controllo (pulsanti, box, pulsanti radio...).

Non tutte le modifiche previste sono già incluse nella prima versione alfa. Tuttavia, gli svi­lup­pa­to­ri hanno già an­nun­cia­to alcuni sviluppi cruciali che saranno inclusi nelle prossime release:

• Right-to-left (RTL): le lingue che vengono lette da destra a sinistra saranno meglio sup­por­ta­te in futuro.
• Menu offcanvas: con offcanvas ci do­vreb­be­ro essere ancora più pos­si­bi­li­tà per la pro­get­ta­zio­ne di menu.
• SVG in HTML: at­tual­men­te, i file SVG sono integrati tramite CSS, ma c’è chi per farlo pre­fe­ri­sce uti­liz­za­re il codice HTML.