Il primo passo per diventare uno sviluppatore è quello di scegliere ed imparare un ambiente di sviluppo detto anche IDE (Integrated Development Environment). Conoscere un IDE è molto importante perchè i suoi strumenti ci aiutano nella rapidità di scrittura del codice aumentando la nostra produttività.
Microsoft Visual Studio Code
Uno tra gli IDE più famosi nell’ambiente dello sviluppo web è Microsoft Visual Studio Code, che per semplicità chiamerò in futuro VS Code. Esistono diversi IDE degni di nota, sia gratuiti che a pagamento. Ne sono un esempio GitHub Atom e Jetbrains Webstorm che vi invito ad approfondire nei rispettivi siti web.
Le funzionalità
Una volta scaricato ed installato VS Code, aprendolo vedrete che il software è diviso in due parti. Una parte è dedicata alla barra laterale e l’altra allo sviluppo del codice. La barra laterale è composta da diversi bottoni ognuno dei quali rappresentato da un’icona. Andiamo a vederli insieme:
Visual Studio Code
- La prima icona ci mostra i files del nostro progetto. Accanto a ciascun file, se versionato troviamo le inziali che ci dicono se il file è stato aggiunto, rimosso o modificato nel progetto. Oltre alle iniziali, l’IDE ci mostra anche una differente colorazione dei files. Verde se aggiunto, rosso se eliminato, arancio se modificato.
- La seconda ci consente di fare delle ricerche sul foglio di lavoro oppure di cercare qualcosa all’interno dell’intero progetto di lavoro. Oltre alla ricerca è possibile anche effettuare la funzionalità di cerca e sostituisci.
- La terza icona ci consente di versionare il proprio progetto o nel caso in cui sia stato già fatto, di vedere lo status dei files ed eventualmente fare commit e push degli stessi.
- La quarta icona riguarda il debug. Il debug è una delle cose più importanti nella programmazione perchè grazie a questo strumento possiamo vedere se il flusso che stiamo sviluppando sta prendendo forma in maniera corretta. Nell’eventualità cosi non fosse, ci permette di prendere coscienza dei nostri errori e sistemarli. Molti programmatori frontend si occupano del debug del codice usando interamente il browser web. In VS Code è possibile tramite un file di facile configurazione fissare dei breakpoint all’interno del flusso di codice e controllare ogni interazione del browser in cui vi sono i breakpoint sull’IDE.
- L’ultima icona riguarda le estensioni. VS Code è un IDE molto flessibile. Tramite l’installazione delle opportune estensioni sarà possibile ad esempio applicare un beautify per i file minifizzati, di compilare codice sass e/o less, di fare apprendere all’IDE un altro linguaggio di programmazione e di aggiungere anche l’autocompletamento delle librerie e molto altro ancora. Per scoprire di più sulle estensioni di VS Code ti invito a fare una ricerca su Google per scoprirne tutte le potenzialità.
Must have
Ormai faccio lo sviluppatore frontend da diversi anni, e se vuoi fare questo mestiere ci sono alcune estensioni che secondo me dovresti sicuramente conoscere, installare ed utilizzare:
- Beautify: tramite questa estensione è possibile mostrare a schermo del codice renderizzato correttamente che per motivi di ottimizzazione dei dati si trova nel vostro progetto in maniera minifizzata
- Live server: questa estensione ci permette di lavorare in locale, vedendo praticamente in tempo reale il risultato sul browser di ciò che stiamo realizzando
- Rest API server: trae ispirazione da Json-server di npm, in pratica ci permette di scrivere un fake json di risposta server, consentendoci quindi di continuare l’implementazione della parte frontend. Ovviamente questo json va concordato con chi andrà a sviluppare la risposta lato server in modo da non discostare troppo gli sviluppi una volta implementata la risposta lato server.
- Bookmarks: ultima ma non per questo meno importante è l’utilizzo dell’estensione riguardante i bookmarks. Ti capiterà spesso di fare su e giù nel codice. Tramite i bookmarks, che puoi aggiungere e/o rimuovere facendo click con il tasto destro del mouse, eviterai ulteriori scroll e potrai saltare da un bookmark all’altro con molta facilità. Questa estensione ottimizza molto il tuo tempo consentendoti di dedicarlo alla risoluzione dei bug e l’implementazione di nuove funzionalità.
Conclusioni
Ti ho illustrato in linea generale le funzionalità di un IDE e le estensioni più importanti che secondo me dovresti installare su VS Code nel caso in cui tu voglia imparare lo sviluppo frontend. Ovviamente tante cose le capirai solamente sbattendoci la testa ed imparando dai tuoi errori, quindi devi essere molto determinato se vuoi fare questo mestiere. Spero di esserti stato di aiuto e ti faccio un in bocca al lupo per il tuo futuro! Continua a seguirmi se ti va!