Quello che tutti vorremmo, il problema!

Sviluppare un sito web è ogni giorno più complesso. Spesso potrebbe sembrare il contrario grazie a strumenti quali wordpress, visual composer, temi già realizzati e varie piattaforme per la realizzazione di siti in pochi click. Un sito realizzato con cura e completamente customizzato è invece sempre più una questione di bilanciare decine di fattori.

Vogliamo sempre più animazioni, video e immagini  ma ognuno di essi ha un peso in MB spesso non indifferente. Vogliamo utilizzare nuove features e nuovi linguaggi ma spesso i vecchi browser non li supportano e anche quelli moderni faticano a stare al passo.

Gli strumenti, la chiave per la soluzione!

Sorge quindi la necessità di utilizzare tool che comprimano immagini, convertano i sass in css, convertano codice scritto con gli standard delle ultime versioni di javascript in codice adatto a qualsiasi browser; CMS che aiutino il cliente a poter modificare il proprio sito e a volte framework che semplifichino il lavoro. Il tutto senza sacrificare troppo la produttività.

Alcuni di questi strumenti per noi sono una scelta ormai consolidata da tempo. Worpdress e Prestashop ci accompagnano da alcuni anni e vengono sostituiti solo in caso di necessità specifiche da prodotti più adeguati al singolo progetto, quali React, Laravel, jekyll e Python (scusate se lo mescolo a dei framework ma è l’unico linguaggio che ci capiti spesso di usare).

Le novità!

Nel 2017 però abbiamo cambiato parecchie cose. La più notevole a mio avviso è stata passare da Foundation a Bootstrap 4, dopo svariati anni passati ad inseguire, bootstrap è finalmente maturo, flessibile e completo. Ci offre, oltre alla qualità e versatilità alla quale eravamo abituati da anni, anche la modularità del sistema forse più diffuso al mondo. Vogliamo aggiungere un plugin wordpress? Quasi sicuramente esisterà una versione che utilizzi le classi di bootstrap! Questo non significa un lavoro meno curato, significa al contrario meno modifiche necessarie per adattare plugin di vario tipo ai nostri css, garantendo quindi una maggiore compatibilità nel corso del tempo e dei futuri aggiornamenti ed un risultato impeccabile.

Una soluzione attesa da tempo

Un altro nuovo strumento che ci ha sorpreso notevolmente è Local by Flywheels. Da circa un anno lo utilizziamo per poter sviluppare progetti in locale (con tutti i vantaggi del caso) potendo però fornire rapidamente un link per visionare il sito da remoto. Il prodotto si basa su macchine virtuali con tutti i requisiti necessari per un’installazione di WordPress o con due veloci modifiche per un sito basato su html.

Tempo risparmiato nel creare la macchina virtuale, tempo risparmiato nell’installare e configurare wordpress. Ma soprattutto la flessibilità di poter sviluppare in locale ma di poter offrire l’accesso dall’esterno. Per tanti anni questo aspetto è stato un problema costante tra IP dinamici, NAT, Firewall e simili. Permettendoci quindi di lavorare praticamente ovunque. Il prodotto offre anche la possibilità di trasferire il sito con un click sulla loro piattaforma di hosting, ma al momento non è sufficientemente interessante per prenderla in considerazione, è soltanto ben integrata.

L’aver finalmente risolto il problema dell’accesso remoto mi ha finalmente permesso di lavorare su più di un PC. Ho così la possibilità di lavorare con il mio fido MacBook Pro quando sono in mobilità e con la mia workstation Windows quando sono nella tranquillità del mio ufficio. Qui dovrei dedicare un capitolo a parte alla postazione di lavoro, cambiata anch’essa negli ultimi tempi ma me lo risparmierò per un prossimo articolo.

Quello che invece è interessante è discutere della possibilità di avere un workflow praticamente ininterrotto su due macchine così diverse.

Per raggiungere questo risultato ho scelto di utilizzare Visual Studio Code come editor. Ce ne sarebbero state decine di altri completamente cross platform ma la sua perfetta integrazione con GIT e con BASH mi permettono di eliminare un ulteriore livello di differenze. È inoltre un ottimo editor, con una grafica pulita ed accattivante. In pochi mesi ha guadagnato funzioni e plugin utilissimi. Su windows ho quindi installato il pacchetto del subsystem ubuntu offerto agli sviluppatori e magicamente ho esattamente lo stesso terminale, la stessa interfaccia e gli stessi tool su entrambe le macchine.

Per concludere questa integrazione ho utilizzato dropbox. In questo modo che i miei progetti siano sempre sincronizzati su entrambe le macchine in pochi secondi. Ora mi restano soltanto un paio di piccoli sfizi da togliermi. Il primo sarebbe uno script che esporti ed importi il database rapidamente (con mysql workbench ci metto poco ed è la stessa applicazione per tutte e due le piattaforme, ma perchè non ridurre ulteriormente i passaggi?). Il secondo invece è un mouse che trovo molto interessante, il Logitech MX Master 2s. Permette di utilizzare più macchine in contemporanea e perfino di copincollare da una all’altra come se fosse la stessa; magari lo comperò e ne parlerò nell’articolo sulla mia postazione.

Un fido compagno è restato al nostro fianco.

Dal punto di vista dei tool più strettamente legati allo sviluppo abbiamo una vecchia conoscenza, Gulp. In passato abbiamo utilizzato Grunt ma siamo passati a Gulp per la maggior diffusione. Ora sulla cresta dell’onda c’è Webpack, ma, sinceramente, non mi ha colpito particolarmente. Abbiamo provato ad utilizzato per un paio di progetti e i vantaggi offerti non mi sono bastati per scartare il mio caro Gulp. Nell’ambiente dello sviluppo questi tool cambiano come le mode e quasi mai vale la pena inseguirle immediatamente.

Gulp affiancato da una serie di moduli ci permette di eseguire i task più noiosi. Quali ridurre le immagini, compilare css e javascript e minificarli pur mantenendo delle mappe che ci permettano di ispezionare il codice. Inoltre ci permette di aggiornare in tempo reale il browser con le ultime modifiche effettuate e di copiare eventuali file non gestiti tramite altri tipi di importazioni. Su questo fronte quindi soltanto conferme e poche modifiche quest’anno.

Ma altri sono cambiati

Dove invece è cambiato qualcosa è la gestione dei moduli, intesi quali plugin e componenti javascript e css. In passato ci affidavamo a Bower, ottimo strumento che non ci ha mai dato particolari problemi.

La novità qui è di aver semplicemente rimosso uno strumento quasi inutile. Già da tempo gestivamo i moduli di Gulp con NPM e già lo utilizzavamo per installare bower e simili. Ci siamo quindi spostati definitivamente nella sua direzione utilizzandolo ora anche per gestire tutti i componenti javascript e css, le sue funzionalità sono complete e, in coppia con GULP, permettono di gestire perfettamente il processo.

Per finire abbiamo fatto un cambio del nostro fornitore di scelta, siamo passati da Linode a Digital Ocean. Questo non comporta grandi differenze, tutti e due offrono servizi di VPS di prim ordine, ma trovo l’interfaccia più gradevole e ci ha permesso di semplificare ulteriormente alcuni aspetti quali la gestione delle chiavi private e delle immagini master da cui partire per la configurazione di un server.

Non tutte le ciambelle escono col buco!

Ovviamente per arrivare a tutto questo abbiamo dovuto affrontato decine di prove e abbiamo spesso fatto retromarcia. Altrettanto spesso abbiamo fatto altre piccole scelte tra un modulo o un plugin piuttosto di un altro ma ne dovremmo parlare per giorni e di molti dettagli non abbiamo nemmeno ricordo. Speriamo comunque che i cambiamenti affrontati da Studio Up, vi siano parsi interessanti e siano per voi spunto di indagine.