I migliori 5 JavaScript editor online

Ad ogni developer che si rispetti piace avere il proprio ambiente di sviluppo bello e configurato sulla propria macchina. Questo è un dato di fatto.
Quando però si tratta di lavorare in team oppure si vuole condividere qualcosa con qualcuno, le cose cambiano.
Far configurare lo stesso ambiente di lavoro a tutti e soprattutto magari a qualche cliente, diventa un’operazione abbastanza complessa.
Ecco perchè in questo caso ci possono aiutare dei veri e propri editor online in cui è possibile, fra le tante cose, condividere i sorgenti e vedere l’applicazione in anteprima direttamente online.
Oltre a questo, sono molto utili anche per provare velocemente piccoli pezzi di codice che ci possono servire nell’applicazione che stiamo sviluppando.
Anche in questo caso velocizziamo di molto le operazioni di configurazione di un progetto nuovo o di un ambiente nuovo e sappiamo tutti quanto è importante il tempo per uno sviluppatore.

In questo articolo ho raccolto una lista dei migliori playground JavaScript che ci sono al momento in giro sulla rete.

CodeSandbox

Uno degli editor che nell’ultimo periodo va molto di moda, soprattutto per la possibilità di poter importare i settings di Visual Studio Code.
E’ ancora una feature sperimentale, ma al momento pare funzionare bene.

Con questo tool potete realizzare velocemente progetti di frontend, ma che allo stesso tempo hanno anche una parte “server” realizzata con i più famosi framework del momento come React, Vue o Angular.
E’ possibile inoltre connettersi con l’account di Github e creare direttamente repository, fare pull request e tanto altro, direttamente da dentro CodeSandox.
Funziona pure come hosting di file perchè potete importare nel vostro progetto anche file statici come immagini o altri file. Vi sembrerà quindi di lavorare veramente come sulla propria macchina in locale.
Una funzionalità molto carina è quella di poter condividere il progetto su cui state lavorando attraverso un link e quindi poter invitare i vostri colleghi a lavorare con voi in real-time.
Nel caso invece facciate corsi, potete impostare la modalità Classroom che vi mette a disposizione una serie di strumenti adatti a chi tiene lezioni.
Essendo una PWA, potete installarla come una normale applicazione su Windows, in modo che ci possiate lavorare in un finestra serparata invece che dentro al browser.

StackBlitz

Appena ci si collega a questo editor online, si capisce subito le intenzioni che vuole avere: replicare le feature di Visual Studio, ma online.
Anche questo è realizzato come PWA, quindi installabile sulla macchina.
Oltre a usarla al di fuori del browser, StackBlitz ha un server che può essere utilizzato anche offline.

Uno dei vantaggi di questo strumento rispetto ad altri è, se siete abituati a lavorare con Visual Studio Code, proprio la continuità con cui è possibile lavorarci rispetto all’esperienza utente di VS Code.
Aiutano pure molto i template da cui è possibile iniziare un nuovo progetto, da React ad Angular, con il supporto completo e l’autocompletamento di TypeScript.

Sicuramente il mio preferito della lista, soprattutto per la somiglianza a Visual Studio Code.

CodePen

Uno dei primi siti di questo genere a uscire fuori qualche anno fa. E si vede.
Forse il più completo come feature disponibili e si apprezza pure molto la parte “social” che si può vedere fino dalla homepage.
Quando create degli snippet di codice pubblici, possono essere selezionati per la homepage, dopo essere stati votati dagli altri utenti.

Per questo editor sono disponibili diverse feature a pagamento che potrete trovare a questa pagina.
Per esempio la possibilità di creare repository privati è solo disponibile nella versione Pro.

Nonostante questo rimane uno dei migliori editor disponibili online, dato dal fatto della propria longevità e stabilità.

JS Fiddle

Graficamente il più spartano, forse il più veloce da usare se dobbiamo provare degli snippet molto semplici da realizzare.
Si apre con dei grandi pannelli in cui potete iniziare a scrivere codice HTML, CSS e Javascript e vedere subito l’anteprima del vostro risulato in basso a destra.
Se invece si vuole fare qualcosa di più complesso, anche in questo caso, sono stati aggiunti dei template di progetto da cui partire.

Uno dei punti di forza di questo editor rispetto ad altri, è stata l’introduzione abbastanza recente di TogetherJS che permette la condivisione e la collaborazione con altri utenti a cui dovete passare semplicemente un link per iniziare a lavorare insieme.

JS BIN

Molto simile a JS Fiddle per quanto riguarda l’interfaccia e funzionalità.
Uno dei punti di forza è la semplicità con cui è possibile interagire fin dai primi momenti con l’interfaccia anche se non presenta un editor completo a tutti gli effetti.
Anche questo presenta un piano Pro con cui è possibile, per esempio, salvare il proprio codice su Dropbox, rendere privati i propri snippet e avere la possibilità di salvare file statici sui loro server.

Anche JS BIN ha il supporto rapido per la condivisione e la collaborazione con altre persone e forse è quello che maggiormente si presta a questa funzionalità, sia per la semplicità con cui è possibile farlo, sia per la stabilità di questa feature.
Una cosa che apprezzo molto è la possibilità di crearsi template personalizzati e salvare gli snippets direttamente su gist.

Conclusioni

Non esiste un editor migliore degli altri di questa lista che vi ho presentato. Dipende, come sempre, da quello che dovete fare e come siete abituati a lavorare.
Un editor deve essere uno strumento di produttività e non una sfida continua nel trovare menu nascosti o a cui non siete abituati.

Buon frontend coding!