Ambiente di sviluppo

Introduzione
Ogni programmatore ha bisogno di tre cose per fare un ottimo lavoro: conoscenze, logica e un ambiente adeguato. Questo non significa che dovete andare a programmare in un giardino zen, bensì dovete trovare un programma che vi aggrada. Pensate un po', esiste proprio una categoria per questi programmi, si chiamano IDE. IDE non è altro che l'acronimo di Integrated development environment che tradotto significa ambiente di sviluppo integrato.

Principalmente ci sono due tipi di programmi per sviluppare. Gli IDE che presentano un ambiente di sviluppo, simile a photoshop. In questo leggiamo sentiamo spesso l'acronimo WYSIWYG (What you see is what you get), che significa che quello che si vede è il risultato finale, per capire il funzionamento, potete paragonarlo ad un "word". Mentre l'altro tipo di programma per lo sviluppo sono gli Editor, che ci mostrano solo il codice sorgente e ci aiutano con un sacco di funzioni (quella più famosa: syntax highlight).

In questo articolo mi concentrerò più sugli editor e principalmente quelli che usiamo noi sviluppatori del pixel.

What you see is what you get

WebDesigner (google):
WebDesigner di Google è un IDE WYSIWYG abbastanza difficile da usare, ma garantisce un'ottima astrazione dal mondo del coding manuale, molti componenti sono inseribili come moduli (pre esempio basta trascinare un photo gallery dove si vuole e JS, CSS e HTML vengono aggiunti in automatico), ho provato a lavorarci più volte e devo dire che non mi sono trovato a mio agio, è molto difficile fare lavori di precisione, ma per creare delle bozze è ideale.
Il programma garantisce la possibilità di passare dalla modalità WYSIWYG alla modalità Code View, dove è possibile modificare manualmente HTML e CSS, per poi poter tornare alla modifica grafica con il nostro elemento inserito, personalizzabile tramite l'apposito toolbox e alla potenza del mouse.

Dreamweaver (adobe):
Con questo programma professionale di adobe è possibile gestire anche grandi progetti con un sacco di librerie senza fare confusione. I suoi punti di forza risiedono nelle feature uniche che propone, come usare la la ViewBox per la modifica grafica come un'anteprima, cambiare ogni singola proprietà CSS con diverse impostazioni e suggerimenti grafici, ecc... Insomma, questo prodotto di valore offre sia l'opzione grafica che quella da editor con tutto il codice, così sia gli esperti che i novelli nel campo possono ottenere ottimi risultati.

Editor

Sublime Text (Jon Skinner):
Questo costoso editor è super fornito, con un'infinità di features. Supporta il multi-cursore, è leggero, ha una bellissima interfaccia grafica. Ma sopratutto è fluido. Ideale per la modifica di file singoli e ha un supporto. Le sue funzioni di base che sono anche il suo cavallo di battaglia sono Emmet (parlerò di questa funzione/plugin nel prossimo articolo) e il multi cursore, oltre ad un'autocompletamento intelligente che suggerisce i comandi in base al contesto e alle lettere digitate. Per esempio in CSS potremmo digitare "bgc" e riconoscerà che sono le lettere principali della proprietà background-color.
Una licenza costa 70$, però è possibile usare il programma anche senza una licenza in versione di prova, che presenta tutte le feature di questo editor, ma dovrete convivere con un messaggio che vi inciterà a comprare il prodotto dopo ogni TOT salvataggi del file, penso che sia un compromesso accettabile.
Sublime presenta anche un sacco di funzioni per la ricerca e la navigazione rapida, come il trova con regular expression oppure passando rapidamente ad una definizione premendo ctrl (o ⌘) + R. Un'altra funzione è lo split view che permette di tenere aperti più file contemporaneamente, comodo per creare il CSS tenendo la struttura html sott'occhio.
Brackets (adobe):
Torniamo in casa adobe che ha creato e rilasciato questo editor open source. Il team di sviluppo di questo editor tiene molto conto delle proposte degli utenti e questo lo rende un editor "creato da tutti". Brackets è perfetto per per la gestione di progetti, infatti ogni cartella viene riconosciuto come WorkSpace per il progetto, questo permette una facile gestione dei file. Brackets è stato programmato interamente in HTML, CSS e JS, un editor creato sul web per il web. Infatti incorpora CSS-Docks facilmente richiamabili con la combinazioni di tasti ctrl (o ⌘) + k mentre il cursore è sulla proprietà, inoltre è possibile modificare il CSS di un elemento, posizionandoci il cursore sopra (in un documento HTML) e premendo ctrl/⌘ + E ci verrà aperto una finestrella (che dividerà il nostro documento) con il css di quel elemento. Quick Edit funziona anche su file CSS, su elementi come: funzioni per animazioni e colori. Un'altra funzione molto interessante è l'anteprima live che è utilizzabile solo se google chrome è installato, comodo se si hanno due schermi, così su uno schermo si vede l'editor mentre sull'altro si vede google chrome e le modifiche che apportiamo al nostro progetto mentre digitiamo. Ma il punto di forza di Brackets risiede nelle Estensioni e il suo store. In una apposita schermata potremmo scegliere tra centinaia di estensioni (tra qui Emmet) che possono migliorare la nostra vita e personalizzare il nostro IDE. Le estensioni che uso io sono: PHP Smart hints, Ternific (Js Hints), Console plus (per vedere l'output della console del browser, direttamente nell'editor), Emmet, Monokai Dark Soda (tema), Paste indent (Per aggiustare la struttura del codice che si incolla), TODO (una to-do list generata dai commenti "todo" nel codice). Brackets non presenta l'opzione split view, ma penso sia un compromesso accettabile per tutte le funzioni che offre.


Preparatevi
Dopo questa breve introduzione agli IDE, spero che proviate entrambi gli IDE citati, cercate di capire con quale vi trovate meglio. Io personalmente preferisco Brackets, che permette una maggiore personalizzazione con il suo store di estensioni e ventina di temi, oltre ad offrire la possibilità di creare propri temi usando del CSS, ma quello che Sublime non ha in personalizzazione a livello grafico, lo compensa con la fluidità e la navigabilità. Nel prossimo articolo vi spiego quali sono le funzioni chiave che rendono questi editor particolari e ideali per lo sviluppo per il Web e come usare al meglio queste funzioni. Poi passeremo a qualche trick e tip riguardando il JS e il CSS