Amici sviluppatori web, questo post è per voi.
In poco tempo il mondo del web è diventato accessibile ad una marea di nuovi dispositivi: se fino a pochi anni fa chi sviluppava applicazioni web doveva preoccuparsi soltanto dei client “desktop”, ora si trova a dover far fronte a varie categorie di dispositivi, ad ognuna delle quali corrispondono varie risoluzioni, capacità di calcolo, standard supportati eccetera.
Tutto ciò ha complicato molto le cose, ma soprattutto ha allungato notevolmente i tempi di test e debug: se si vuole fare un lavoro serio anche il più semplice sito web ad oggi va testato su tanti dispositivi e browser diversi. A questo proposito oggi vi voglio parlare di Browsersync.
Dimenticatevi il reload del browser!
Innanzitutto: cos’è? Browsersync è un ottimo tool che ci permette di ridurre sensibilmente i tempi di sviluppo e test sul web. Come? Tramite Browsersync possiamo:
- Visualizzare la pagina web su cui stiamo lavorando su tanti dispositivi diversi contemporaneamente, senza cavi o simili: basta la rete Wi-Fi.
- E’ possibile eseguire il “mirroring” delle nostre azioni: ogni click, scroll o gesture in generale eseguito su un singolo dispositivo collegato a Browsersync viene eseguito anche su tutti gli altri!
- Live reload, ovvero, basta ricaricare le pagine web ad ogni modifica! Possiamo definire dei file che Browsersync terrà monitorati e ad ogni modifica Browsersync aggiornerà in automatico le pagine web che stavamo visualizzando. Killer feature!
Come funziona
Utilizzare Browsersync è semplicissimo. Innanzitutto va installato globalmente sulla nostra macchina usando npm:
npm install -g browser-sync
Modalità 1: server mode
Se il nostro progetto utilizza solo file html possiamo usare la server mode:
browser-sync start --server --files "css/*.css"
con questo comando Browsersync creerà un mini server nella directory corrente. Abbiamo specificato inoltre che dovrà tenere monitorati tutti i file css presenti nella cartella css, ed aggiornare le pagine in real-time ad ogni modifica.
Modalità 2: proxy mode
Se il nostro progetto invece usa già un server locale (scenario tipico se abbiamo ad esempio uno stack Apache/MySql/PHP) dobbiamo utilizzare la modalità proxy:
browser-sync start --proxy "http://www.local.dev" --files "css/*.css"
Una volta lanciati i comandi Browsersync ci fornirà l’URL da utilizzare sia sulla macchina locale che per gli altri dispositivi che vorremo collegare. Avremo anche a disposizione un URL per accedere ad una interfaccia web di configurazione di Browsersync!
Integrazione con Gulp
Una feature molto interessante è anche la possibilità di integrare Browsersync nel nostro flusso di build del progetto, che nel nostro caso viene effettuato tramite gulp. Non è nemmeno necessario installare una dipendenza extra: è sufficiente fare require di Browsersync ed avremo accesso dai nostri task a tutte le funzionalità di Browsersync.
var browserSync = require('browser-sync').create();
Considerazioni finali
Se siete dei front-end developer non posso far altro che consigliarvi di provare questo tool, si adatta bene ad ogni situazione preesistente e con un paio di comandi è pronto all’uso. Meglio di così!
