Ente accreditato Regione Veneto n.4271

É arrivato Bootstrap 4

Scopriamo le principali novità

Pubblicato da Gianni // 18 ottobre 2017 // 1.231 visualizzazioni

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.

 

Pagina iniziale di Bootstrap 4

 

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.

Topic: , , , , ,

Send this to a friend