Come diventare sviluppatore web

L’esplosione del web degli ultimi anni ha visto incrementare considerevolmente la richiesta di software e servizi fruibili su internet. Saper sviluppare per il web, quindi, offre non pochi vantaggi: il primo, il più ovvio di tutti, è la possibilità di trovare lavoro come web developer, data l’enorme richiesta di programmatori esperti del settore; un altro vantaggio, un po’ meno scontato, è quello di riuscire a capirci qualcosa di quell’immenso ginepraio di siti internet, social network, software gestionali, giochi on line e applicazioni di ogni tipo (dal calendario appuntamenti al tuo client e-mail, ad esempio), che fanno ormai parte integrante della nostra vita quotidiana dal momento in cui accendiamo il pc o premiamo il tasto on dello smartphone, al momento in cui li spegniamo (o quando la batteria ci abbandona). Infine, come dico sempre per la programmazione in generale, lo sviluppo web è divertente e, come appassionato, hobbista o cultore della materia, potresti trovare molto interessante smontare e rimontare tutta l’architettura che sta dietro il rendering del contenuto mostrato dalla scheda attualmente attiva sul tuo browser e magari diventare sviluppatore web.

In questo articolo spiego quali sono secondo me le conoscenze indispensabili per intraprendere il percorso della programmazione web partendo da zero e quali sono i possibili sbocchi professionali. Che tu sia un assoluto principiante, un appassionato che vuole costruirsi il proprio sito web o il proprio software, o che tu sia un diplomando/laureando che tra un esame e l’altro getta uno sguardo nel mondo del lavoro informatico, in questo articolo troverai parecchie informazioni utili attinte dalla mia personale esperienza.

Imparare a programmare

Rieccoci con un’altra (semi) tautologia: per imparare a programmare per il web devi imparare a programmare. Ma ti do subito un’ottima notizia: a differenza di quel che si crede comunemente, le due cose possono essere portate avanti di pari passo. Le basi imprescindibili della programmazione, quelle di cui proprio non si può fare a meno (variabili, tipi di dato, operatori, controllo del flusso di esecuzione, funzioni, classi ecc. ma anche linguaggi, compilatori e interpreti, sistemi di numerazione, codifica delle informazioni) non occorre acquisirle partendo da linguaggi di basso livello come i classici C e C++, né occorre iniziare obbligatoriamente dalle tipiche applicazioni console (per quanto siano un’ottima palestra, anche con lo scripting di sistema); quasi tutti i linguaggi di programmazione generale purpose (tra i più diffusi C#, Python e Java), infatti, mettono a disposizione dello sviluppatore strumenti per la programmazione di pagine web che con un paio di comandi ti permettono subito di sporcarti le mani col codice e di testare sul browser la tua opera dell’ingegno.

I protocolli di comunicazione web

Le applicazioni web viaggiano attraverso HTTP (acronimo di Hypertext Transfer Protocol); per capire il tuo primo “Hello World!” stampato su una scheda del tuo browser, devi avere contezza di ciò che avviene dietro le quinte, almeno a grandi linee, altrimenti non sarai in grado di capire tutta la parte più divertente che verrà dopo (ad es. tutte quelle belle chiamate asincrone che aggiornano menu, etichette, immagini e altro di una pagina, senza che sia necessario ricaricarla). Cos’è quel http://localhost:8000 sulla barra degli indirizzi del browser quando lanci pedissequamente come da tutorial il comando:

php -S localhost:8000 ?

Cos’è una richiesta GET? E una richiesta POST? Cosa vuol dire che HTTP è un protocollo stateless e quali conseguenze ha questa “mancanza di stato”? Quando e come avviene l’elaborazione del contenuto della pagina prima che venga mostrata dal browser? Per riprendere l’esempio di codice appena mostrato, php è il comando dell’interprete di un altro famoso linguaggio del web (acronimo che sta per “Hypertext Preprocessor”, originariamente “Personal Home Page”), -S è un parametro che indica all’interprete di far partire un serverino http di sviluppo sul pc in cui il comando viene eseguito – localhost appunto (ovvero 127.0.0.1, indirizzo ip locale del server); 8000 è la porta (il tuo browser usa già la porta 80). A proposito, cos’è una porta? E un indirizzo ip? E un server?

Senza tutte queste nozioni non riuscirai nemmeno a pubblicare la tua applicazione web, dato che deve essere ospitata da un server http che dia supporto al linguaggio con cui l’hai sviluppata.

Sto creando un corso e-learning on line per assoluti principianti, dove troverai questo e molto altro per imparare la programmazione web. Iscriviti alla newsletter se vuoi sapere quando sarà pronto per la pubblicazione.

Il linguaggio HTML

Hai mai provato a cliccare con il tasto destro del mouse su un punto qualunque di una pagina del tuo sito internet preferito o a premere il tasto F12? Se sì, vedrai il testo racchiuso da moltissimi “tag” come questo (ho appena fatto F12 sul testo che sto scrivendo in questo momento):

<p class="block-editor-rich-text__editable block-editor-block-list__block wp-block is-selected rich-text">
Hai mai provato a cliccare con il tasto destro del mouse su un punto qualunque di una pagina del tuo sito internet preferito o a premere il tasto F12? Se sì vedrai il testo racchiuso da moltissimi "tag" come questo (ho appena fatto F12 sul testo che sto scrivendo in questo momento:
</p>

Quello che vedi si chiama HyperText Markup Language, linguaggio di marcatura per gli ipertesti; in questo caso l’ipertesto è la pagina di questo articolo e quella copincollata sopra ne è una porzione marcata, appunto, dai tag <p> all’inizio e </p> alla fine, a indicare al browser che si tratta di un paragrafo. Tasti, caselle di testo, menu, immagini, video ecc. che inserirai nei tuoi software web dovranno essere scritti in HTML. Come tutti i linguaggi di marcatura (un altro esempio famoso è il linguaggio XML), è molto facile da apprendere e in poche ore sarai in grado di creare le tue pagine html statiche (dette così perché non subiscono un’elaborazione lato server, in quel caso si direbbero allora dinamiche).

P.S. Non dire mai a uno sviluppatore senior che sai “programmare” in html!

I fogli di stile (CSS)

I fogli di stile (secondo l’acronimo, Cascading Style Sheet, fogli di stie a cascata), sono ciò che renderà la tua applicazione gradevole all’utente. Ma ti permetteranno anche di impostare il layout del tuo sito internet o del tuo software web (a piena larghezza, a più colonne, a due colonne con sidebar ecc.), oltre che renderlo compatibile con tablet e cellulari (in gergo: responsiveness). Anche in questo caso, le basi dei fogli di stile si imparano in poco tempo, ma, trattandosi di uno strumento molto potente, possono raggiungere un grado di complessità ragguardevole. Non a caso c’è chi si specializza nel campo e lavora come web designer. Tornando all’esempio di codice html sopra, avrai notato che a un certo punto, all’interno del tag <p> c’è una strana assegnazione:

class="block-editor-rich-text__editable block-editor-block-list__block wp-block is-selected rich-text"

Si sta indicando al browser di applicare a quel paragrafo alcune classi css, che definiscono lo stile che il paragrafo deve assumere. Vediamone il codice tramite il tasto F12:

.block-editor-block-list__layout .block-editor-block-list__block {
    position: relative;
    overflow-wrap: break-word;
}

Tutti gli elementi che hanno le classi .block-editor-block-list__layout e .block-editor-block-list__block vengono posizionati in modo relativo, cioè senza avere effetti sugli altri elementi del layout, e, inoltre, mandano a capo le parole quando raggiungono il fine riga. Questo è solo un assaggio di uno strumento così versatile, da essere utilizzato anche per creare applicazioni desktop (questo è un plus di diventare programmatore web: in un colpo solo diventi potenziale sviluppatore cross platform, dato che ormai esistono strumenti che ti permettono di compilare il tuo software per diversi sistemi, sia desktop che mobile). Ma anche librerie grafiche non web famose come le Qt hanno adottato un sistema di stilizzazione dell’interfaccia utente molto simile.

Programmazione web lato client

Ti sei mai chiesto come fanno ad apparire tutte quelle pubblicità nelle pagine web o come appaiono le notifiche del tuo social preferito? o ancora come fanno alcuni elementi del documento html a cambiare senza eseguire un refresh del browser? Grazie a un linguaggio che fino a qualche anno fa sembrava in declino e, forse, diventerà la tua principale opportunità lavorativa: il Javascript. Da non confondere con Java, Javascript è utilizzato per gestire tutte le interazioni del browser con l’utente (per intenderci, il client è il tuo pc). Dato che le applicazioni web hanno dovuto soddisfare una richiesta di complessità cresciuta a ritmi vertiginosi, si sono diffusi alcuni framework (un set di strumenti e librerie) basati su Javascript, che permettono di fare cose fino a poco tempo fa impensabili per una web app. Alcuni dei framework più famosi sono Angular e React; Vue.js sta emergendo ultimamente per la modularità e la curva di apprendimento meno ripida.

Per imparare il Javascript ti serve davvero poco: se premi il tasto F12 sul tuo browser e clicchi sul tab Console, puoi subito utilizzare il terminale per testare il tuo codice con l’interprete. Digita subito:

alert("Hello World!");

Per vedere apparire un pop-up che rappresenta il tuo primo passo nella programmazione client-side. Per qualcosa di più complesso puoi salvare uno script col tuo editor di testo preferito in un file con estensione .js ed aprirlo col browser. Anche in questo caso si tratta di un mattone fondamentale specie per diventare sviluppatore frontend.

Programmazione lato server

Abbiamo parlato più sopra del protocollo HTTP e delle pagine dinamiche. Per creare pagine dinamiche, ma anche per restituire dati alle richieste asincrone eseguite con un framework Javascript, è necessario programmare dei servizi sul server che riceve queste richieste. Ho già accennato a Python, C#, Java, PhP (ma in realtà puoi programmare lato server anche in Javascript con Node.js); con tutti questi linguaggi potrai elaborare richieste HTTP, validare i dati di una form, accedere a un database, restituire documenti html ma anche una response di tipo json o xml. Le possibilità sono infinite, anche perché anche in questo campo i framework si sono evoluti parecchio. Difficilmente farai tutto “from scratch” col solo linguaggio; è più probabile che lavorerai su Laravel o Symfony (per Php), o con Asp .net core (C#), con Django o Flask (Python); c’è da confondersi e ti spiegherò in un altro articolo come scegliere un framework; tuttavia non riuscirai mai a usarlo se prima non padroneggi un minimo il linguaggio su cui il framework è stato costruito. Inoltre, i framework spesso offrono strumenti per creare uno scheletro di progetto seguendo alcuni pattern. Il più diffuso è il pattern MVC, con la sua variante MVVM (che viene utilizzata anche nei framework javascript); ma molto spesso potrai creare automaticamente anche un boiler plate per api rest o eseguire lo scaffolding di un intero database; per cui prima cominci a familiarizzare con questa terminologia, meglio è, anche perché, superati questi primi scogli, sarai molto più produttivo (nell’immagine in evidenza, uno scheletro di progetto creato automaticamente con pochi click in asp .net core mvc, in esecuzione tramite il server di sviluppo iis express in localhost sulla porta 44329).

Diventare programmatore front end, back end o full stack?

Dato che la programmazione web ha visto una progressiva divisione degli ambiti di progettazione tra lo sviluppo front end e il back end, sorge la domanda su quale aspetto privilegiare. Effettivamente, un team di sviluppo molto ben organizzato, dedica un sotto gruppo di sviluppatori a curare la programmazione lato client (il front end appunto) e un altro la programmazione back end (lato server). In pratica, un team lavora ad esempio a tutta l’interfaccia grafica utente, alla logica e all’esperienza utente, un altro progetta invece tutti i servizi web che verranno fruiti dal front end. Quando invece uno sviluppatore si occupa di entrambi gli aspetti, partendo anche dalla progettazione della base di dati dell’applicazione, si definisce in gergo full stack.

Su cosa dovresti impegnarti di più dunque? Il mio consiglio è quello di partire da full stack, specie se sei in fase di formazione e, man mano che acquisisci esperienza, cercare di capire in quale specializzazione ti senti più abile e credi che potresti dare il meglio. Una volta specializzatoti, tenendo sempre un legame con le origini, riuscirai a mantenere una visione d’insieme del progetto su cui di volta in volta svilupperai, con un occhio di riguardo nei confronti delle esigenze dei colleghi del team opposto. Come avviene per tutte le altre scienze in un’epoca di estrema specializzazione e parcellizzazione dei saperi, anche nel campo della programmazione si corre il rischio di chiudersi a riccio nel proprio orticello; questo può provocare delle incomprensioni o degli attriti tra collaboratori.

Ovviamente tutto ciò difficilmente si applica all’appassionato cultore della programmazione; a meno che non sia riuscito a mettere insieme una squadra di altri hobbisti, per forza di cose dovrà essere uno sviluppatore full stack. Ma, parere di parte, il divertimento è assicurato.

Conclusione

Ho illustrato quelli che secondo me sono gli step necessari e le conoscenze base per iniziare a programmare per il web, senza dare nulla per scontato riguardo al livello di preparazione del lettore di questo articolo. Che sia principiante o meno dovrà salire uno per uno i gradini della scala che porta a diventare web developer, per poi gettarla via una volta capito in quale ramo tra programmazione lato client e lato server specializzarsi, a meno che non voglia rimanere a metà strada come programmatore full stack.

E tu, a quale gradino ti trovi attualmente?