Nella Silicon Valley é noto a tutti che l'ambiente di sviluppo piu' diffuso nelle numerose start-up ed aziende sia macOS.
Questa situazione si é venuta a creare a causa dell'ottima affidabilità del sistema operativo di Apple e dal fatto che lo stesso poggi le basi su un sistema *BSD, UNIX-like. In parole povere, con macOS gli sviluppatori hanno accesso all'intero set di strumenti e programmi disponibili in ambienti Linux, senza peró rinunciare ad un sistema operativo stabile che non richiede praticamente alcuna manutenzione.
In questi anni, Windows é rimasto in disparte, anche a causa della profonda differenza tra gli ambienti di sviluppo UN*X.
Sfortunatamente, i dispositivi Apple, quali MacBook ed iMac, sono contraddistinti dal loro prezzo elevato che molte volte risulta proibitivo per i giovani intenzionati ad affacciarsi nel mondo della programmazione web.
Windows e l'open source
Chiunque segua gli sviluppi di Microsoft, avrá letto molte notizie riguardanti il suo cambio di rotta riguardo il mondo open source. Dal rilascio del .NET Framework sotto licenza MIT (open source), il rilascio di una versione di FreeBSD per Azure e dell'SDK di Xamarin, uno strumento di sviluppo mobile multi piattaforma.
Dove ci porta tutto ció? Al rilascio di Windows Subsystem for Linux, detto anche WSL.
Questo nuovo strumento permette chiunque sia in possesso di una versione recente di Windows 10 di installare un completo ambiente Linux direttamente sopra Windows, senza bisogno di alcun tipo di emulazione.
In questo articolo vedremo come in pochi minuti é possibile configurare il proprio computer Windows in modo da supportare tutti gli strumenti e processi di sviluppo front-end del momento, senza bisogno di comprare un Mac!
Windows Subsystem for Linux (WSL)
Per prima cosa, accertatevi che il vostro Windows sia aggiornato al "Fall Creators Update", si tratta di un aggiornamento gratuito che vi permetterá successivamente di installare tutto il necessario in pochi passaggi.
Una volta aggiornato, nella barra di ricerca del menu Start, cercate ed avviate "Attivazione o disattivazione delle funzionalità Windows", dal quale dovrete spuntare la voce "Windows Subsystem for Linux" e premere OK. Questo dará il via all'installazione di WSL, che ci permetterá di sfruttare appieno tale funzionalitá.
Fatto ció, aprite il Windows Store, e cercate "Ubuntu" nelle barra di ricerca. Troverete una schermata in cui sará possibile scegliere tra alcune distribuzioni Linux, tra cui la popolare Ubuntu. Installatela come una normale applicazione.
Una volta installata, premete sul bottone "Apri" per aprire lo strumento di configurazione di Ubuntu. Vi troverete davanti ad una interfaccia a riga di comando.
A questo punto, dopo un breve caricamento, vi dovrebbe venire richiesto di indicare un account UNIX da associare ad Ubuntu. Nel mio caso l'installer é rimasto fermo alla riga "Installazione", ma premendo il tasto "Invio" una volta si é sbloccato immediatamente.
Inserito il nome utente, che puó, per semplicitá, essere lo stesso usato su Windows, e la password (anch'essa consiglio di mantenerla uguale a quella Windows), la procedura di configurazione sará terminata e possiamo chiudere la finestra di Ubuntu ed il Windows Store.
A questo punto il nostro Windows é giá in grado di eseguire tutti gli strumenti di sviluppo noti in ambiente macOS e Linux, nonché eseguire la shell Bash. Ma non é finita!
Notate che durante l'inserimento della password, i caratteri digitati non veranno visualizzati, non preoccupatevi, é una prassi di sicurezza delle interfaccie da riga di comando.
Developer Experience (DX)
Come per tutti i termini americani, anche l'esperienza sviluppatore (developer experience) ha una sigla, in questo caso DX.
Che cos'é la developer experience? Si tratta di tutti quegli strumenti dati a rendere migliore la vita di tutti i giorni di chi programma software.
Purtroppo, "out of the box", Windows non ha un'ottima fama in questo settore. Infatti gli strumenti preinstallati sono pochi e non al passo con i tempi.
Il miglior amico di ogni programmatore é l'emulatore di terminale (terminal emulator), solitamente abbreviato in "terminale". Su Windows ne troviamo due, CMD (cmd.exe) e PowerShell. Nonostante PowerShell sia anni luce avanti a CMD, entrambi risultano ugualmente molto limitanti e ostici.
Per ovviare al problema, possiamo installare Hyper, noto anche come HyperTerm. Si tratta di un emulatore di terminale scritto completamente con linguaggi web (HTML, CSS e JavaScript) noto per la sua versatilitá e configurabilità.
Per installarlo, semplicemente visitate il sito web Hyper.is e scaricate la versione per Windows.
Dopo averlo avviato, vi troverete davanti ad una schermata del genere.
Se avete esperienza con CMD, noterete subito come questo terminale supporti la selezione del testo su molteplici righe, un sistema di "tab" in stile web browser e la possibilitá di dividere in piu' aree una singola schermata in modo da far spazio a due o piu' shell di comando.
In maniera predefinita, Hyper aprirá ogni volta una shell CMD. Questa non é cosa gradita, dato che abbiamo appena installato Ubuntu e abbiamo accesso al completo potenziale di Linux grazie alla shell Bash che accompagna il sistema operativo open source.
Possiamo scrivere bash in Hyper per vedere come la shell viene sostituita da Bash. Lo potete notare dal prompt differente (la parte verde e blu ad inizio di ogni riga) e dal set di comandi disponibile (quali ls, nano, top e molti altri).
Per rendere Bash la nostra shell predefinita possiamo modificare le preferenze di Hyper cliccando sul menu "ad hamburger" in alto a sinistra, e cercando la voce "Edit > Preferences...", o premendo Ctrl + ,.
Si aprirá automaticamente Notepad, dal quale potremo cercare la voce "shell" e modificarne il valore in C:\\Windows\\System32\\bash.exe, quindi salvate le modifiche e chiudete Notepad.
Ora non ci resta che riavviare Hyper per notare come automaticamente ogni nuova finestra ci porterá dentro Bash.
Node.js e Yarn
Ora che abbiamo un terminale degno di questo nome, abbiamo bisogno degli strumenti da riga di comando utilizzati ogni giorno da milioni di sviluppatori front-end.
Il primo é un runtime Javascript costruito sul motore JavaScript V8 di Chrome. Questo strumento permette di eseguire codice JavaScript via terminale, ed é alla base di molteplici strumenti di sviluppo web.
Tra questi strumenti troviamo Yarn, un gestore di pacchetti scritto in JavaScript ed eseguito da Node.js, che ci aiuta a gestire le dipendenze dei nostri progetti installandole e aggiornandole automaticamente.
Dato che siamo giá dentro ad un terminale, possiamo subito installare Node.js eseguendo questi comandi:
# Per prima cosa...
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash
# E successivamente...
sudo apt-get install -y nodejsEcco come in due passaggi abbiamo ora disponibile Node.js nel nostro sistema. Ma cos'é appena successo esattamente?
Con il primo comando, abbiamo indicato al gestore di pacchetti di Ubuntu dove trovare il pacchetto di Node.js. Immaginate il gestore di pacchetti come un Windows Store da riga di comando, dal quale é possibile installare una moltitudine di pacchetti, ed indicargliene di nuovi.
Con il secondo comando, abbiamo installato Node.js usando il gestore di pacchetti (apt-get), che é ora disponibile con il comando node.
Se proviamo a scrivere node --version, ci verrá indicata la versione attuale di Node.js installata nel nostro sistema.
Non ci resta che installare Yarn, per fare ció useremo lo stesso metodo usato poco fa:
# Aggiungiamo una chiave di sicurezza per validare la sorgente da cui installeremo yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
# Aggiungiamo il repository (sorgente) di Yarn al nostro gestore di pacchetti di Ubuntu
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
# Aggiorniamo i pacchetti disponibili ed installiamo Yarn
sudo apt-get update && sudo apt-get install -y yarnPer verificare che tutto sia andato nel verso giusto, possiamo eseguire yarn --version e controllare che ci venga restituita la versione attuale dello strumento.
Scrivere codice
Ora che abbiamo tutti gli strumenti necessari a sviluppare per il web, non ci resta che iniziare a scrivere del codice.
Per far ció, peró, avremo bisogno di un editor di testo.
Esistono letteralmete migliaia editor di testo al mondo: Atom, Sublime Text, Notepad++. Per non parlare di quelli da riga di comando, quali Emacs, Vim, Nano e molti altri. Oggi ci concentreremo su uno in particolare, Visual Studio Code.
Per chi si intende di programmazione su Windows, questo nome gli ricorderá la celebre suite di sviluppo di Microsoft. Infatti stiamo parlando di un prodotto sviluppato da Microsoft e principalemte dedicato allo sviluppo web.
Anche in questo caso, questo software é scritto interamente con linguaggi di programmazione web (HTML, CSS e JavaScript).
Per installarlo ci basterá visitare il sito web ufficiale del prodotto code.visualstudio.com e scaricare il pacchetto di installazione. Durante l'installazione vi consiglio di spuntare tutte le opzioni, che vi permetteranno di aprire Code piu' semplicemente.
Rendete vostro il vostro ambiente di sviluppo!
Ricordatevi che la developer experience é una componente fondamentale della vita di tutti i giorni per un programmatore.
Fate in modo di sentire vostri i numerosi strumenti che userete ogni giorno. Per iniziare, potete cercare sul web dei temi per Hyper e VSCode in modo da adattarli ai vostri gusti, é molto semplice e gratificante.
Per oggi é tutto, pubblicheremo nuovi articoli in continuazione per aiutarvi a diventare dei front-end developer migliori. Alla prossima!
