WordPress VS Bootstrap. Ci può essere un vincitore?

Quest’oggi non voglio parlare di qualche nuova tecnica di sviluppo WordPress che ti permetterà di velocizzare o migliorare il tuo lavoro con questa piattaforma, oggi voglio togliermi un sassolino dalla scarpa che mi porto dietro da fin troppo tempo. Oggi è guerra!

Ti puoi immaginare che il contenuto che troverai in questo articolo non è tanto la descrizione di una guerra avvenuta nel mondo reale né tantomento si parla di una guerra in senso lato. Piuttostro troverai un onesto e personale confronto su due potenti framework che stanno spopolando sul web.

Se hai pensato “Ma che caxx dici? WordPress non è un framework!“, tranquillo anche io so che questa piattaforma è molto di più 😉

Ti dico subito che all’interno di questo articolo troverai molti confronti tecnici che verranno analizzati da un punto di vista obiettivo il cui unico scopo sarà quello di permetterti di sviluppare una tua personale opinione, non sto scrivendo questo articolo per convincerti che una soluzione è migliore di un altra, lo sto facendo per aiutarti a far crescere la tua opinione personale.

Se vuoi conoscere subito la mia scelta ti dico che vince a mani basse WordPress. Adesso che la conosci puoi anche chiudere la finestra e tornare a fare le tue cose, purtroppo, se sei curioso di conoscerne i motivi non ti resta altro che continuare a leggere…

Che Cos’è Bootstrap?

Tanto sei immerso nello sviluppo WordPress che non hai neanche avuto il tempo di indagare sulla provenienza di questo termine? Nessun problema, ci sono qua io che ho avuto qualche ritaglio di tempo per documentarmi per bene.

Bootstrap è un frontend framework (torneremo presto sulla sua definizione), che permette di velocizzare incredibilmente lo sviluppo di una applicazione web. Ho avuto tempo di sperimentare le sue funzionalità e scoprire da vicino la sua potenza. In tutta onestà inizialmente ero anche molto curioso di implementarlo all’interno di WordPress, infatti, mi sono messo a parlare con Mattia Migliorini, Eugenio Petullà ed Enea Overclokk per comprendere quali siano i passaggi necessari per procedere con questa unione.

Quest’ultimo ha addirittura rilasciato uno starter theme che include Bootstrap, Schema.org e altre migliorie che vengono racchiuse nel nome ItalyStrap, dacci un’occhiata se desideri avere un grande prodotto italiano disponibile gratuitamente!

Forse sto correndo troppo, ho già iniziato a unire il mondo WordPress con il mondo Bootstrap, però sono sicuro che non hai ancora una risposta alla seguente domanda: cosa fa Bootstrap?

Domanda più che legittima, mi sono perso ad analizzare l’interesse che questo framework ha scatenato negli sviluppatori senza spiegarti propriamente quali sono le caratteristiche più interessanti. Che distratto!

Velocemente, dato che nel dettaglio verrà affrontato più avanti, Bootstrap ti permette di avere una immensa collezione di stili CSS ed effetti JavaScript che possono essere facilmente implementati all’interno del progetto web sul quale stai lavorando!

Il più delle volte, ti basterà rispettare la struttura HTML presente negli esempi proposti dallo stesso Boostrap per buttare le basi del tuo nuovo progetto in una manciata di minuti e, come se questo non bastasse, ci sono già presenti diversi template che ti permettono di avere dei layout pronti all’uso con un semplice copia/incolla.

In tutta questa bellezza possiamo trovare un piccolo tallone d’Achille: Bootstrap, essendo un frontend framework, lavora incredibilmente bene con siti statici o con le SPA, ovvero le Single Page Application. Questo è dovuto al fatto che richiede la possibilità di modificare direttamente il codice HTML di cui è composta la pagina e se hai esperienza nello sviluppo di temi WordPress (o anche plugin) dovresti sapere che questo CMS utilizza una specifica sintassi per determinati componenti, cosa che non rende assolutamente facile la sua implementazione.

Adesso dovresti avere un’opinione più chiara rispetto a cosa è e cosa fa questo Bootstrap ma prima di passare all’analisi vera e propria, mi resta soltanto di rispondere alla domanda principale di questo articolo.

WordPress è un Framework?!?

È da chiarire in effetti che WordPress è un framework a tutti gli effetti, anzi, è un potente CMS che funziona dannatamente bene già out of the box. Seguendo la sua semplice installazione si può avere in pochi secondi uno tra i più potenti sistemi di blog presenti in circolazione.

Adesso non voglio scatenare una guerra all’insegna del blog o non blog che ha caratterizzato le opinioni di migliaia di persone nel corso degli ultimi anni, quello che mi interessa farti capire è perché ritengo WordPress anche un framework. Il fatto che questa piattaforma sia molto di più di un semplice framework è indiscutibile, ma niente ci vieta di poterlo utilizzare come framework.

Non ci credi? Andiamo un attimo su wikipedia a leggere che cosa sia un framework:

Ora, se ti fermi un attimo a pensare a quante funzioni WordPress hai conosciuto durante lo sviluppo di un tema, non puoi certo dire che questa piattaforma non rispetti queste caratteristiche. WordPress ti offre moltissime soluzioni che permettono di personalizzare la sua struttura e che allo stesso tempo ti facilitano e velocizzano il lavoro, mi sembra quindi chiaro perché ritengo WordPress anche un framework.

Ecco perché non troppo tempo fa con Eugenio e Daniele abbiamo deciso di accendere le telecamere e avviare un webinar in cui abbiamo discusso perché crediamo fermamente che WordPress possa essere utilizzato come un framework. Se ti va di imparare qualcosa di nuovo puoi sempre guardare la registrazione.

Adesso che ti ho chiarito il motivo che mi permette di dire che WordPress è un framework non credi che sia il momento di dare il via a questa battaglia andando a confrontare che cosa viene offerto.

Cosa Offre Bootstrap

Ti ho già detto precedentemente che questo framework porta con se un gran numero di codice CSS e JavaScript e dato che WordPress non si occupa di CSS (se non consideri gli spunti che potresti prendere dai temi che vengono preinstallati), posso dire tranquillamente che la battaglia del CSS è stata vinta da Bootstrap, senza neanche troppo sforzo.

Vedremo comunque più avanti perché ti consiglio di non usare questo framework con WordPress, adesso è il momento di vedere quali sono gli effetti JavaScript che vengono inclusi:

• Transition – se non conosci ancora le transizioni CSS3 sappi che sono un’ottima soluzione per creare delle piccole animazioni in risposta agli eventi che succedono nella tua pagina. Quello che forse non sai è che grazie al file transition.js puoi facilmente creare questo tipo di animazioni e renderle compatibili anche con i browser più datati;
• Modal – le finestre modali sono una cosa veramente molto utile, sopratutto quando vogliamo mostrare qualcosa nel momento in cui il nostro visitatore preme su un determinato bottone o CTA. Grazie a modals.js questo sarà un gioco da ragazzi e per farlo funzionare non dovrai fare altro che seguire le istruzioni presenti sul sito;
• Dropdown – altra libreria, quella presente in dropdown.js, che ti permetterà di creare facilmente i menu dropdown che fanno salvare molto spazio all’interno di qualsiasi menu raccogliendo delle voci all’interno di una principale;
• Scrollspy – hai mai desiderato avere un menu che aggiorna il suo stato a seconda della posizione che il visitatore ha raggiunto scollando la tua pagina? Ecco che con la libreria scrollspy.js ti sarà veramente utile e ti permetterà di farlo con l’aggiunta di qualche classe e di un semplice attributo `data-target`;
• Tab – separare il proprio contenuto in diverse tab è una cosa veramente molto utile, sopratutto se vogliamo creare determinati aspetti grafici, tutto grazie a tab.js;
• Tooltip – una delle migliori soluzioni JavaScript che Bootstrap offre è sicuramente la libreria tooltip.js che con poche righe di codice e qualche attributo HTML ti permette di creare queste utilissime nuvolette che ti permettono di fornire nuove informazioni al lettore di turno. Se poi andiamo a vedere le caratteristiche offerte dai Popover puoi scoprire un’altra collezione di nuvolette che hanno addirittura un aspetto grafico più accattivante!
• Collapse – ti ricordi il classico accordion che permette di creare una lista che apre i vari elementi soltanto al click o sul hover di uno dei titoli? Anche in questo caso Bootstrap ci dà una mano con la libreria `collapse.js` che permette di realizzarli utilizzando semplicemente una struttura HTML, nient’altro.
• Carousel – Interessante slider di immagini che può essere personalizzato come meglio credi, davvero un ottimo prodotto!

Già da questa lista, possiamo affermare che a livello JavaScript Bootstrap ha veramente un sacco di utili librerie che velocizzeranno il tuo sviluppo frontend e renderanno tuttto molto più semplice. Questa collezione è veramente utile quando si inizia a sviluppare un nuovo progetto, ma ti sei mai fermato a chiederti che cosa è incluso all’interno del nostro amato WordPress?

Cosa Nasconde WordPress Sotto al Cofano

Io non mi sono posto questa stessa domanda fino a che non ho iniziato a pensare più da vicino allo scontro tra Bootstrap e WordPress o, per meglio dire, alla loro implementazione.

Stavo riflettendo sul fatto che molte volte pensiamo a WordPress da un punto di vista esterno, sappiamo che questa piattaforma utilizza già diverse librerie JavaScript per costruire il proprio pannello di amministrazione, ma il più delle volte caschiamo nell’errore di aggiungere ulteriori librerie per fare la stessa cosa!

Importare il framework Bootstrap non inserisce molte funzionalità esclusive e, anzi, probabilmente non è in grado di far funzionare correttamente alcune funzionalità backend che WordPress riesce a gestire veramente bene. Non mi credi?

Partiamo dal fatto che, racchiuse all’interno della cartella wp-includes/js/, troverai la bellezza di 30+ librerie JavaScript che ti permetteranno di fare qualsiasi cosa desideri! Se non mi credi e pensi che stia dicendo delle stupidaggini, non perdere tempo e verifica con i tuoi occhi. Adesso che ho dato credito alle mie stesse parole, andiamo un pò a vedere quali sono queste librerie:

• jQuery – il più famoso framework JavaScript è già incluso nella tua piattaforma preferita e insieme ad esso avrai anche tutti i moduli presenti nella libreria UI che potrai attivare singolarmente gestendo nel migliore dei modi le risorse utilizzate dal tuo sito! Vogliamo vedere insieme quanti elementi di Bootstrap sono già contenuti in questa libreria?
  • Accordion che va a sostituirsi con Collapse,
  • Dialog che può competere con Modals,
  • Tooltip,
  • Tabs,
  • Effect al posto delle transition,
  • Position che permette di creare semplici ma intuitive gallerie di immagini (Carousel),
• TinyMCE – Questa è una libreria JavaScript che ti permetterà di creare un potente editor di testo, molto utile sopratutto quando, come in WordPress, è importante offrire un’esperienza di scrittura il più confortevole possibile;
• jcrop – Con questa potrai usare lo stesso sistema usato dalla libreria dei media di WordPress per ritagliare le immagini;
• MediaElement.js – un potente script che ti permette di rendere compatibile qualsiasi contenuto multimediale presente negli elementi <video> e <audio>, permettendoti di avere anche un gradevole fallback in flash per i browser più datati;
• Underscore.js – libreria che permette di gestire agevolmente operazioni complesse con array ed oggetti;
• Backbone.js – libreria che invece aiuta a sviluppare applicazioni complesse grazie al MV*.

Come puoi notare tu stesso, non ho dovuto neanche descrivere tutte le librerie presenti per dimostrare che WordPress offre, in partenza, una collezione di effetti e strutture che superano di gran lunga quelle offerte da Bootstrap. Tutto questo senza contare le librerie PHP che facilitano il compito di realizzare temi e plugin complessi.

Altra considerazione che mi piace spesso fare è quella che riguarda le prestazioni di un sito web. Implementando Bootstrap all’interno di WordPress non facciamo altro che aggiungere peso alle nostre pagine e inutili richieste HTTP. Se da una parte è vero che Bootstrap ci offre “la pappa pronta” con tutti i suoi blocchi di codice e librerie già confezionate, dall’altra dobbiamo pensare che gran parte delle risorse che troviamo non sono state ottimizzate per questa piattaforma.

Il Faccia a Faccia

Non iniziare col pensare “È ovvio che preferisci WordPress, ne parli sempre!” perché faresti un grosso errore. Prima di riflettere su questi fattori, anche io stavo cercando di capire al meglio come poter implementare Bootstrap all’interno del mio prossimo template, ma poi ho iniziato a chiedermi se valeva la pena sforzarsi così tanto per ottenere uno starter theme che permettesse di usare le funzionalità Bootstrap.

Per quanto riguarda gli sforzi a cui faccio riferimento, parlo nello specifico di dover apprendere una nuova serie di classi e attributi che possono essere utili soltanto se utilizzati con Bootstrap! Fin qua non abbiamo troppi problemi, quando creo la struttura HTML del mio tema mi posso anche occupare di aggiungere le classi e gli attributi necessari al corretto funzionamento di Bootstrap, ma cosa succede quando il codice viene generato automaticamente dalla nostra piattaforma?

Cosa puoi fare tutte quelle widget e menu che possono popolare il sito?

Se per le widget la situazione può essere più semplice grazie alle Widget API la cosa si fa più impegnativa per quando andiamo ad analizzare il codice generato dai nostri menu. Se sei andato a vedere il menu che Bootstrap ti permette di avere, bisogna dire che la soluzione è molto interessante.

Con gli schermi abbastanza grandi potrai vedere il menu completo in tutta la sua bellezza mentre, se le misure non sono sufficienti, verrà ridotto con del semplice codice JavaScript e salverà molti grattacapi di configurazione.

Il problema è che per raggiungere questo risultato bisogna generare un codice che non è “nativo” in WordPress. Anche se alcuni sviluppatori WordPress ci stanno aiutando nella creazione di questi menu condividendo la Walker Class necessaria alla generazione corretta bisogna dire che da parte nostra c’è ancora un po’ di lavoro da fare.

Allo stesso tempo riconosco che molti sviluppatori si sono avvicinati a Bootstrap perché, con minime conoscenze di CSS e JavaScript, permette di creare siti web completi andando ad agire su qualche blocco di codice HTML. Da questo piccolo pensiero mi sorge una domanda molto più profonda: se nel tuo lavoro utilizzi soltanto blocchi di codice HTML copiati da qualche portale, puoi veramente definirti uno sviluppatore web?

[clickToTweet tweet=”Se una persona copia blocchi di codice #HTML nelle sue giornate, può chiamarsi #sviluppatoreweb?” quote=”Se una persona copia blocchi di codice #HTML nelle sue giornate, può chiamarsi #sviluppatoreweb?”]

Non ti arrabbiare se ti senti colpito da questa mia espressione ma ritengo che per quanto Bootstrap sia un progetto buono che ha aiutato centinaia di migliaia di sviluppatori, al tempo stesso ho la paura che questi tipi di framework non facciano altro che rallentare la curva di apprendimento di uno sviluppatore perché ci impongono delle strutture preconfezionate senza farci ragionare veramente sul problema.

Utilizzando Bootstrap ti potrai dimenticare di tutti i problemi che avevamo nella creazione di griglie CSS, di come gestire i tuoi menu di navigazione o anche di come sia possibile creare una finestra modale. Per quanto questi possono essere considerati come dei vantaggi da parte di sviluppatori esperti, allo stesso tempo non mi sento di dire in tutta tranquillità che questo è un percorso che dovrebbe seguire anche uno sviluppatore Junior.

Spero che queste considerazioni ti aiutino a riflettere se ti sarà utile utilizzare Bootstrap come frontend framework per il tuo prossimo tema WordPress e sono curioso di conoscere le tue opinioni all’interno dei commenti.

Conclusioni

La sfida dell’anno è stata portata a termine e beché da una parte troviamo Bootstrap che offre moltissime soluzioni CSS e componenti pronti da utilizzare, che sicuramente velocizzano lo sviluppo frontend, non posso che ammettere che dal mio punto di vista WordPress non teme la concorrenza.

C’è da considerare inoltre il fatto che tutte le librerie e il codice che WordPress ti mette a disposizione sono ottimizzati e compatibili con la piattaforma e questo comporta sicuramente una maggior sicurezza e un numero minore di grattacapi durante lo sviluppo.

Se non mi credi prova a cercare “WordPress jQuery noConflict” su internet e poi dimmi quante persone sono cascate in questo problema. Utilizzare Bootstrap non significa avere un frontend framework completamente compatibile con WordPress, anche perché altrimenti starter theme come ItalyStrap non sarebbero nati 😉

Adesso ti passo la palla, date le tue esperienze e la lettura di questo articolo, che cosa utilizzerai nel tuo sviluppo? Userai uno degli starter theme che includono al suo interno Bootstrap o svilupperai con un tema che sfrutta maggiormente il potenziale che WordPress nasconde al suo interno?