Roadmap per diventare sviluppatore Front-end nel 2022

Roadmap per diventare sviluppatore Front-end nel 2022

Giuseppe Speranza Di Giuseppe Speranza


developer frontend roadmap

Nel nostro Blog abbiamo parlato dello sviluppatore front-end in generale nei seguenti articoli "Programmatore frontend vs backend" e "Di cosa si occupa lo sviluppatore front-end".

                     


Lo sviluppo front-end

Lo sviluppo front-end, chiamato anche sviluppo lato client, racchiude un sacco di principi e concetti al suo interno. Molti sono portati a pensare che lo sviluppatore front-end si occupi esclusivamente della creazione di interfacce per le applicazioni web ma questa è solo una delle skills che un buon sviluppatore deve avere. 

In quest’articolo elencherò nel dettaglio una serie di concetti che come sviluppatore front-end sono essenziali, in modo da dare uno sprint decisivo alle tue competenze professionali per questo nuovo anno che sta arrivando!

Le competenze dello sviluppatore front-end

Come sviluppatore front-end le competenze generali su cui dovrai impegnarti sono le seguenti:

  • Ideare e saper realizzare ottime interfacce visive;
  • Conoscere e saper utilizzare al meglio le regole CSS;
  • Essere in grado di lavorare e gestire dati asincroni;
  • Utilizzare uno State Management.

Ora procediamo per step e vediamole singolarmente.

1. Conoscere L’HTML

L'HTML o HyperText Markup Language è la competenza base per ogni sviluppatore front-end. Non preoccuparti, non è necessario conoscere tutti gli elementi a memoria, bisogna focalizzarsi sul loro corretto utilizzo a seconda del tipo di dato che si vuole impaginare. 

Qui entra in gioco il concetto dell’HTML semantico, un insieme di regole e buone pratiche nella scelta del corretto tag HTML che migliorano anche la SEO

Alcuni punti chiave su cui ci si dovrebbe focalizzare sono:

  • i principi base della costruzione di una pagina in HTML, conoscere le differenze tra head e body, il corretto utilizzo dei metatag etc...;
  • aggiungere e formattare i testi correttamente;
  • creare liste e form sfruttando gli elementi "parlanti";
  • inserire correttamente immagini e video nella pagina.

Una delle fonti che consiglio per approfondire questo argomento è il sito html.com.

2. Imparare il CSS

Il passo successivo, dopo l’apprendimento di html, è riuscire a dargli una forma, uno stile; qui entra in gioco il CSS o Cascading Style Sheets, con una serie di concetti molto importanti come ad esempio:

  • selettori CSS (essenziali se si vuole padroneggiare anche JavaScript);
  • il posizionamento CSS (static, absolute, relative, fixed, sticky);
  • il sistema di misurazione e le loro differenze (pixel, percentuali, em, rem, vh, vw);
  • gli elementi del BOX MODEL;
  • i principi CSS FLEXBOX;
  • i principi del CSS GRID.

Nello sviluppo web moderno difficilmente si parte da zero nella creazione di un progetto e del relativo tema CSS. Esistono una moltitudine di framework CSS da poter sfruttare per velocizzare la creazione di uno stile e usare codice ben consolidato e testato, sfruttando componenti e classi senza dover reinventare la ruota.

Alcuni dei framework CSS più popolari sono:

3. Imparare JavaScript

Ora che hai imparato a creare interfacce e dare uno stile con l’HTML e il CSS, bisogna renderle intelligenti, ossia inserire della logica funzionale al nostro obiettivo. Ad esempio gestire in modo dinamico un form, inviando alcuni dati solo a seguito di specifici eventi. In fin dei conti proprio dalla logica di validazione dei form è nato JavaScript negli anni ‘90.

JavaScript (da non confondere assolutamente con Java), è un linguaggio di scripting lato Client, creato per rendere dinamiche le pagine web e manipolare gli elementi HTML. Inoltre negli ultimi anni, grazie alla creazione di Node.js, JavaScript è utilizzato anche lato back-end. Sostanzialmente conoscendo questo linguaggio è possibile essere full-stack in un intero applicativo! Per questo motivo ultimamente è cresciuto così tanto di popolarità.

La conoscenza di JavaScript può esser divisa in concetti Base e Avanzati.

Concetti Base:

  • Conoscere l’oggetto in JavaScript e a cosa si riferisce il “THIS”;
  • Variabili, Loop e le funzioni;
  • Cos’è il DOM (document object model);
  • Metodi per ciclare sugli array: Foreach, map, filter, reduce etc...

Dopo aver appreso la base, bisogna fare il salto di livello proseguendo con concetti avanzati la cui conoscenza può facilitarti durante i colloqui come front-end developer.

Concetti Avanzati:

  • Approfondire lo standard ES6 e le sue funzionalità più importanti come le arrow function e le differenze fra var let e const;
  • Cosa sono le Callback e le Promises;
  • Programmazione Asincrona con async e await.

Nel nostro blog puoi leggere articoli che approfondiscono concetti base e avanzati del mondo JavaScript, entrando nel dettaglio di molti particolari interessanti. Puoi trovare gli articoli ai seguenti link:

4. Imparare un Framework JavaScript

Conoscere bene il linguaggio consente poi di saperlo usare a livello professionale con cognizione di causa. Per questo motivo penso che l'apprendimento di un framework deve obbligatoriamente essere successivo allo studio del linguaggio su cui è basato il framework stesso.

I frameworks semplificano la vita degli sviluppatori, offrendo soluzioni standard, testate e stabili. Al momento i più popolati sono Vue.js, React e Angular

La strada corretta da seguire nello studio di questi strumenti è quella di focalizzarsi su uno per volta, magari puntando a quelli più richiesti sul mercato che attualmente sono Vue.js e React, i quali hanno una curva d’apprendimento simile. 

Su questo topic potete trovare un articolo nel nostro blog al seguente link: 3 motivi per cui amerai Vue.js.

5. Imparare l’utilizzo di GIT

Git è ormai è il sistema di versionamento più popolare e utilizzato al mondo, conoscerlo, e quindi saper versionare il proprio codice, è la chiave per poter lavorare in qualsiasi team in modo coeso e senza problemi. 

Potresti far pratica lavorando su qualche progetto open source reperibile su github, in cui qualsiasi sviluppatore è libero di archiviare il proprio progetto e consentire a chiunque di poter contribuire. 

Dopo questi primi 5 Step sei pronto a candidarti in maniera professionale per qualsiasi lavoro nel front-end! 

Se desideri approfondire maggiormente in modo da crearti un profilo che risalti ancor di più sulla concorrenza e sui recruiter, potresti dare un'occhiata ad alcuni di questi altri concetti:

6. State Management

Lo State management, o gestione dello stato, comprende tutte quelle pratiche atte a centralizzare, condividere e gestire in un’unica fonte i dati di un’applicazione, in modo da lggerli e modificarli in qualsiasi punto del nostro applicativo. 

Per fare questo vengono in nostro aiuto alcune librerie molto popolari. Ogni framework ha dei propri bridge qui di seguito elencati:

  • Vue.js   → Vuex
  • React    → Redux, Context API, MobX
  • Angular → NgRx, Shared Services

7. SSR o Server side rendering

L’SSR o server side rendering consiste nel renderizzare lato Server delle applicazioni JavaScript, piuttosto che farlo esclusivamente sul Client dell'utente, migliorando la SEO e indicizzandosi al meglio sui motori di ricerca. Anche qui bisogna fare un distinguo fra i vari framework:

  • Vue.js   → Nuxt.js
  • React    → Next.js
  • Angular → Angular Universal

8. Imparare Typescript

Typescript è un linguaggio di programmazione sviluppato da Microsoft e reso open source. Nello specifico Typescript è un superset di JavaScript, ossia aggiunge alcune funzionalità come le classi, i tipi, le interfacce e i moduli opzionali al JavaScript classico, rendendo di fatto lo sviluppo in JavaScript alla portata da chi ha un background da classico backendista. Qualsiasi applicazione JavaScript può essere convertita agevolmente in Typescript ma non viceversa.

Se sei giunto fino a questo punto, congratulazioni, ora sei un front-end developer!

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo