Dopo quasi 2 anni di sviluppo, 67000 righe di codice aggiunte e 82000 righe cancellate, finalmente Bootstrap arriva alla versione 4! Qui trovate il link alla pagina ufficiale.
Per chi non lo conoscesse, Bootstrap è un framework HTML/CSS/JS (gratuito), il cui compito è quello di semplificare lo sviluppo front-end dei siti. Molto apprezzato nello sviluppo dell’interfaccia di Web app, è usato soprattutto per il suo grid-system, che facilita di molto la gestione Responsive delle pagine web. Se volete approfondire, vi rimando all’articolo del buon Simone.
Nelle seguenti righe voglio elencarvi le principali novità apportate e fare con voi una piccola considerazione finale sull’uso o meno di questa nuova release.
Le novità di Bootstrap 4
Ma passiamo subito a vedere cosa cambia in questa nuova versione che, come successo dal passaggio dalla versione 2 alla 3, segna un netto cambiamento (Non è quindi da considerarsi come un semplice aggiornamento d’apportare ai nostri progetti correnti).
Nessun supporto ai browser vecchi
Dite addio a IE8, IE9 e persino al browser di iOS6. Questa nuova release ha deciso di dare un taglio netto con il passato, non supportando più i browser datati. La scelta non è una mera presa di posizione ma semplicemente è dovuta all’introduzione di Flexbox, caratteristica CSS non supportata sui browser obsoleti.
Benvenuto Flexbox
Come accennato poco fa, per la gestione del grid-system ora Bootstrap fa uso di Flexbox. Proprietà potentissima che permette di gestire con maggiore accuratezza l’incolonnamento (e ordinamento) degli elementi. Il risvolto della medaglia nell’uso di questa proprietà è l’esclusione dei browser che non la supportano.
Si passa da LESS a SASS
Bootstrap 3 era scritto in LESS. In questa nuova versione si usa come precompilatore CSS, SASS. La scelta è stata fatta per avere a disposizione uno strumento sulla carta più veloce e con qualche features in più. Ma nessuna paura, se intendete scaricare il pacchetto già compilato, non noterete alcuna differenza nell’includere il framework nei vostri progetti.
Aumentano i Breakpoint
Su bootstrap 3 esistevano 4 Breakpoint per gestire il responsive su diversi dispositivi: XS (Mobile), SM (Tablet verticali), MD (Schermi piccoli e tablet orizzontali) e LG (Desktop). Ora abbiamo un altro breakpoint a disposizione: XL. Non fatevi ingannare però, non è stato aggiunto un Breakpoint per schermi grandi, ma semplicemente sono stati spostati i breakpoint per poter usare XS e SM per la gestione mobile rispettivamente in modalità verticale (XS) e orizzontale (SM).
Addio normalize.css, benvenuto reboot.css
Per resettare le diverse impostazioni di default dei browser ora si usa “reboot.css” un foglio di stile che incorpora e migliora le funzionalità che prima erano demandate a “normalize.css”
Unità di misura: da PX a REM
Altra grossa novità è il passaggio da un’unità di misura assoluta come PX a una relativa, come REM. La scelta è stata fatta per avere una maggiore gestione ed elasticità, soprattutto in ambito responsive. Per chi non la conoscesse, l’unità REM, a differenza di EM, fa riferimento alla dimensione del carattere definito sull’elemento <html>.
Javascript: ES6
Tutti i plugin Javascript sono stati riscritti per essere compatibili con le funzionalità della versione ES6, così da sfruttare i suoi miglioramenti ed avere un codice JS più prestante e leggero.
Nuovi componenti
Sono stati aggiunti nuovi componenti CSS, più moderni dei precedenti, come ad esempio le Cards. Queste vanno a sostituire le precedenti Wells, Thumbnails e Panel. Gli altri elementi sono stati invece migliorati e modernizzati.
Addio Glyphicons
Boostrap 4 elimina il supporto nativo alle Glyphicons, dando piena libertà di includere il set di font/icone che più desideriamo. Lo stesso Bootstrap ci suggerisce l’integrazione di strumenti come Font Awesome, Octicons o la versione aggiornata di Glyphicons.
Conviene utilizzare Bootstrap 4?
Facciamo qualche considerazione sul passaggio o meno alla versione 4 di Bootsrap.
La versione attuale è in Beta, questo vuol dire che le funzionalità sono state confermate e ora inizia una fase di bugfixing che porterà alla versione definitiva. Quindi non rischiate di imparare un framework che cambierà nella sua struttura, ma sappiate che qualche bug è da mettere in conto.
Di sicuro questa nuova versione è migliore su moltissimi aspetti: è più leggera, è più prestante e in qualche aspetto anche più facile da usare. Rimane il fatto che è ancora una versione Beta, ma soprattutto viene abbandonata la compatibilità con i vecchi browser. Analizzando però i dati forniti dal W3C si evince come questi browser rappresentino ad oggi lo 0,1% del mercato. Un valore assai basso per essere considerato.
Esiste un ulteriore problema da considerare: ci toccherà imparare un nuovo framework. Passare dalla versione 3 alla 4 non è assolutamente un passaggio indolore e richiederà un minimo di studio della documentazione. Quindi prendetevi un po’ di tempo prima di decidere di utilizzarlo. C’è da dire però che Bootstrap è sempre stato un framework semplice da studiare e con questa nuova versione si ripromette di esserlo ancora di più, grazie soprattutto alla sua rinnovata documentazione.
Concludendo, Bootstrap 4 è il futuro, principalmente perché integra funzionalità del futuro (Flexbox, REM, ES6, ecc.). La versione 3 iniziava ad essere vecchia e non più al passo con i cambiamenti repentini del web. Considerate anche che la versione precedente di Bootstrap non sarà più mantenuta e il team si focalizzerà unicamente sulla versione 4. Solo questo dovrebbe farvi capire che se utilizzate Bootstrap è bene iniziare a valutare il passaggio. Ovviamente non per i progetti già creati, ma per i vostri futuri lavori.
Spero che questo articolo vi sia stato d’aiuto. Se avete altre domande non esitate a scriverle nei commenti.
Ancora nessun commento