Diventare un Web Developer nel 2022
Concetti, tecnologie e strumenti che dovresti conoscere se vuoi intraprendere il percorso per diventare un Web Developer.
Questo articolo è pensato per chi vorrebbe intraprendere o ha da poco intrapreso il percorso per diventare uno sviluppatore Web ma anche per chi si deve relazionare nel proprio lavoro con un team di sviluppatori.
L’articolo fornisce una mappa mentale dei concetti e delle tecnologie che costituiscono il fulcro dell’attività dello sviluppo web moderno ed è frutto della mia esperienza di quasi 8 anni come Full Stack Web Developer.
ps: oggi ho abbandonato questa attività per dedicare la maggior parte del mio tempo alla progettazione e gestione di progetti di Trasformazione Digitale per grandi corporates. Faccio parte infatti del team Corporate Transformation di Talent Garden che con la sua community di Tech Creatives e oltre 26 campus in 19 città è oggi uno degli ecosistemi innovativi più vivace d’Europa.
Non mi resta che augurarvi buona lettura! <❤️/>
Prima di iniziare vorrei spendere alcune parole per dire che oggi esistono principalmente tre profili di Web Developer.
Front-end Developers: sono responsabili della parte visibile di un sito / applicazione web. Si occupano di svilupparne l’interfaccia garantendo la migliore esperienza d’uso per l’utente. Hanno competenze avanzate di sviluppo web (lato client) ma devono conoscere anche i fondamenti dello User Experience Design (UX).
Back-end Developers: sono responsabili di tutte le attività non strettamente visibili all’utente (lato server). Lavorano per garantire che un’applicazione web sia robusta, funzionale, affidabile e veloce.
Full Stack Developers: sono il più delle volte professionisti con esperienza da senior developer e con competenze sia di sviluppo front-end che di sviluppo back-end.
Questi profili hanno differenti responsabilità e svolgono differenti attività. Ciononostante, come è naturale che sia, esistono concetti e tecnologie che entrambi devono conoscere a prescindere dalla propria area di specializzazione.
È altamente improbabile che un Front-end Developer non conosca i fondamenti dello sviluppo lato server. Probabilmente nelle sue attività quotidiane, ad un certo punto della sua carriera, non dovrà più “mettere mano” ad un database ma è indispensabile che ne conosca i fondamenti e sappia relazionarsi adeguatamente con i profili che si occupano di quella parte di sviluppo. Viceversa il discorso vale per un Back-end Developer.
Ecco quindi quei concetti, strumenti, tecnologie che tutti i Web Developer dovrebbero conoscere, con gradi differenti di profondità.
1 — Preparare il terreno
Fondamenti del Web
Può sembrare scontato ma conoscere i fondamenti del web è il modo più efficace per poter comprendere meglio concetti e tecnologie che più avanti si incontreranno lungo il percorso per diventare un Web Developer.
Da dove partire? Il mio suggerimento è dai fondamenti di un’architettura di rete client/server e dei relativi principali protocolli come il protocollo HTTP/HTTPS e il protocollo FTP.
Command-line interface (CLI)
Spesso ignorata o trascurata soprattuto da chi è agli inizi, si tratta in realtà di uno strumento che nel tempo si rivelerà molto utile.
Il mio suggerimento è di iniziare quanto prima a prenderne dimestichezza.
Ti permetterà in futuro di risparmiare tempo ed energie ottimizzando molto lo sviluppo delle tue applicazioni web.
Code Editor
È lo strumento principale utilizzato per scrivere codice e sviluppare applicazioni. Ne esistono molteplici (Atom, Sublime Text, Brackets solo per citarne alcuni). Personalmente suggerisco Visual Studio Code. Inizialmente non ne comprenderai tutto il potenziale ma con il tempo, grazie ai moltissimi plugin e livelli di personalizzazione, diventerà il tuo fido compagno a cui non potrai rinunciare.
🎓 Visual Studio Code Crash Course
tip: all’inizio del percorso è possibile eliminare complessità utilizzando un text editor molto semplice ed intuitivo come Notepad. Il consiglio però è di passare quanto prima ad un code editor più strutturato come VSCode.
APIs
Nello sviluppo moderno di applicazioni web è fondamentale conoscere i principi e il funzionamento delle API (Application Programming Interface).
Semplificando possiamo dire che le API permettono a due applicazioni (servizi) di scambiarsi informazioni grazie a dei protocolli standard.
🎓 Introduction to web APIs
🎓 Understanding APIs and RESTful APIs Crash Course
2 — Tecnologie Front-End
HTML
HTML (HyperText Markup Language) costituisce le fondamenta del web. Non è un linguaggio di programmazione ma viene definito un linguaggio di markup. Attraverso l’utilizzo di tag (“marcatori”) vengono impaginati i documenti presenti sul web. È quindi il primo linguaggio da conoscere se si vogliono costruire siti ed applicazioni web.
CSS
CSS (Cascading Style Sheets) è il linguaggio con cui sono formattati i documenti HTML. Attraverso questo linguaggio è possibile dare forma alle pagine di un sito web decidendo l’aspetto di ogni singolo elemento come font, colori, spazi ecc.
Con il tempo — anche — questa tecnologia si è evoluta ed “arricchita” di nuove funzionalità come variabili, operatori, interpolazioni e mixin. Questo grazie ai pre-processori CSS di cui i più diffusi sono SASS e LESS. Questi strumenti di scripting hanno di fatto potenziato i CSS permettendo la stesura di codice maggiormente pulito e semplificando la gestione di fogli di stile di grandi dimensioni e alta complessità.
🎓 Getting started with CSS
🎓 Sass Basics
Javascript
Javascript è un linguaggio di programmazione che permette di aggiungere interattività ad un sito / applicazione web.
Ipotizziamo ad esempio che tramite HTML abbiamo inserito all’interno del nostro documento un bottone. Con i fogli di stile (CSS) abbiamo deciso che quel bottone deve apparire di colore arancione e deve avere i bordi arrotondati. Con Javascript possiamo decidere quale azione attivare quando l’utente clicca su quel bottone (es. cambiare lo sfondo di tutto il sito, aprire un pop-up, aggiungere un paragrafo ecc.).
Javascript secondo il 2020 Developer Survey è la tecnologia più diffusa tra i programmatori. Questo perché se fino a qualche anno fa esso veniva utilizzato principalmente per aggiungere interattività ad un sito ed eseguire azioni nel browser (lato client), oggi grazie alla creazione della piattaforma NodeJS viene utilizzato per moltissime attività anche lato server. È possibile ad esempio utilizzare Javascript per interrogare un database e costruire applicazioni web dinamiche. Possiamo quindi dire che Javascript oggi non è più relegato al dominio del “Front-end” ma che viene sempre più utilizzato anche nel dominio del “Back-end” diventando quindi un’arma potentissima per chi vuole diventare un Full Stack Developer.
3 — Tecnologie Back-end
Le tecnologie fin qui incontrate costituiscono lo stack base per costruire pagine web statiche. Se vogliamo costruire applicazioni web dinamiche è indispensabile comprendere la logica della programmazione server-side.
In questo capitolo approfondiremo quindi tecnologie e strumenti propri della programmazione server-side, ovvero dello sviluppo back-end.
🎓 Server-side website programming
PHP
PHP è un linguaggio di programmazione tra i più diffusi per sviluppare applicazioni web dinamiche.
PHP e Javascript ci permettono di introdurre due temi molto importanti quando parliamo di programmazione: il paradigma Object Oriented Programming (OOP) e l’architettura Model-View-Controller (MVC Pattern). Sono due concetti inizialmente non di facile comprensione ma che consiglio di approfondire quanto prima.
🎓 Getting started with PHP
Databases
Fondamentale nello sviluppo Back-end è infine l’utilizzo di un database per lo storage dei dati. Esistono molti tipi diversi di database. Una delle classificazioni principali è data da database relazionali (SQL) e database non relazionali (NoSQL).
MySQL è forse uno dei più conosciuti database relazionali. Viene utilizzato nello sviluppo di applicazioni web dinamiche — molto spesso insieme a PHP.
MongoDB è invece uno dei più conosciuti database non relazioni reso “famoso” dal diffondersi di NodeJS.
Riprendendo il nostro esempio del bottone possiamo ipotizzare che quando l’utente ci clicca sopra viene eseguita una funzione PHP che lancia un’interrogazione (“query”) per recuperare uno specifico dato (record) all’interno del nostro database MySQL (es. la giacenza di magazzino di un determinato prodotto).
Bene! Abbiamo introdotto alcuni dei concetti e delle tecnologie fondamentali per muovere i primi passi nel percorso per diventare un Web Developer.
Definiti questi concetti è arrivato il momento di fare un ulteriore passo in avanti.
Come anticipato all’inizio dell’articolo sviluppare siti e applicazioni web può essere un’attività estremamente complessa. Nel tempo sono nate tecnologie e strumenti che cercano di ridurre questa complessità agevolando e velocizzando lo sviluppo di nuove applicazioni.
4 — Framework
«[…] nello sviluppo software, [un framework] è un’architettura logica di supporto […] sul quale un software può essere progettato e realizzato, spesso facilitandone lo sviluppo da parte del programmatore.»
Se pensiamo ad un’applicazione web possiamo dire con un alto grado di certezza che alcune delle funzionalità base che la caratterizzano possono facilmente essere ritrovate in altre applicazioni. Pensiamo ad esempio alla funzione di login.
Con questo semplice esempio in testa possiamo dire che un framework è uno strumento che permette al Web Developer di ottimizzare e velocizzare il processo di sviluppo di un’applicazione web evitando che alcune delle funzionalità base che la caratterizzano vengano ogni volta scritte da zero.
🎓 Introduction to client-side frameworks
🎓 Server-side web frameworks
Esistono numerosi framework sia Front-end che Back-End.
Ecco un elenco di quelli oggi più diffusi:
Bootstrap
Non è un vero e proprio framework ma è uno degli strumenti Front-end per lo sviluppo di layout più conosciuti. Permette la rapida implementazioni di interfacce web grazie ad una moltitudine di elementi pre-costituiti (bottoni, modali, menu di navigazione, ecc.).
Vue.js
È uno dei framework Front-end per lo sviluppo di interfacce utente e applicazioni single-page che più si sta diffondendo negli ultimi anni. Nonostante non sia ancora la prima scelta quando si parla di framework Front-end è sicuramente un’opzione interessante soprattutto per la sua curva di apprendimento molto bassa.
Gli altri due framework Front-end, anche questi basati su Javascript, che dominano il mercato sono Angular e React.
Express.js
Abbiamo accennato qualche paragrafo sopra che Javascript è oggi il linguaggio di programmazione web più diffuso perché permette di sviluppare codice sia lato client che lato server. Questo grazie all’invenzione e costruzione della piattaforma NodeJS che di fatto “ha fatto uscire Javascript dal browser ”. Express.js è il re dei framework basati su NodeJS per lo sviluppo di applicazioni web lato server.
Laravel
Restando nel dominio dello sviluppo di applicazioni web lato server uno dei framework più conosciuti è sicuramente Laravel, scritto in PHP. Possiamo trovare anche “una versione lite” di Laravel che si chiama Lumen.
Esistono numerosissimi altri framework non solo basati sui linguaggi di programmazione Javascript e PHP.
Vale la pena citare:
- Ember.js (Javascript);
- ASP.NET (linguaggi di alto livello come Visual Basic);
- Spring (Java);
- Django (Python);
- Symfony (PHP).
Prima di chiudere con il tema framework è utile sapere che lo sviluppo di applicazioni web si è evoluto nel tempo anche sotto l’aspetto della progettazione. Esistono oggi principalmente due design pattern per lo sviluppo di web apps: multi-page application (MPA) e single-page application (SPA). Anche questo è un tema che certamente troverete lungo il vostro percorso.
5 — Gestione del codice
Package Managers
Abbiamo detto che i framework aiutano molto i Web Developer perché permettono di semplificare e velocizzare l’attività di sviluppo di nuove applicazioni web. Oltre ai framework esistono centinaia di altre librerie di codice in grado di supportare il programmatore nello sviluppo dei propri progetti.
È bene sapere che l’utilizzo di queste librerie software se da un lato agevola la vita del Web Developer perché gli permette di sfruttare codice già esistente per espletare una serie di attività, dall’altro lato gliela può complicare perché queste librerie devono essere gestite, aggiornate e molto spesso sono interdipendenti l’una dall’altra.
Ecco quindi che negli anni sono nati dei programmi, i Package Managers, che permettono allo sviluppatore di ottimizzare l’installazione, l’aggiornamento, la rimozione e la gestione delle interdipendenze di queste librerie all’interno dei propri progetti.
Vale qui la pena citare due Package Managers: npm per la gestione di pacchetti software scritti in Javascript e Composer per la gestione di pacchetti software scritti in PHP.
Version Control
Lavorare su applicazioni web complesse significa molto spesso collaborare con altri sviluppatori. Per gestire al meglio la collaborazione — ma anche e più in generale il progetto — è fondamentale saper utilizzare i moderni sistemi di version control ossia quegli strumenti come Git che permettono il salvataggio e la gestione di diverse versioni dell’applicazione.
6 — Conclusioni
Spero che i concetti e le tecnologie elencate in questo articolo possano aiutarvi e supportarvi nel vostro percorso per diventare un Web Developer.
Riassumendo:
- Abbiamo detto che per iniziare è indispensabile conoscere i fondamenti del web ed in particolare dell’architettura di rete client/server.
- È utile conoscere e prendere fin da subito confidenza con l’interfaccia a riga di comando.
- Che lo stack tecnologico di base per un Front-end Developer è composto da HTML, CSS e Javascript.
- Che lo stack tecnologico di base per un Back-end Developer è composto da un linguaggio di programmazione (PHP o Javascript) e un database (MySQL o MondoDB).
- Che Javascript è oggi uno dei linguaggi di programmazione più diffusi perché non è più relegato al dominio “client” ma grazie a tecnologie come NodeJS può essere usato per sviluppare anche applicazioni lato server.
- Che esistono numerosi framework in grado di supportare il Web Developer nello sviluppo di nuove applicazioni web dinamiche.
- Infine che grazie a strumenti come i package managers e i sistemi di version control possiamo gestire al meglio lo sviluppo di applicazioni complesse.
Se avete trovato interessante l’articolo vi invito a lasciare un like.
Infine se avete piacere ad approfondire qualche argomento mi potete trovare su linkedin.
Ciao 👋🏼
