Blog

Nel nostro Blog abbiamo parlato del front end developer in maniera generica nei seguenti articoli “Programmatore frontend vs backend” e “Di cosa si occupa lo sviluppatore front-end“.
Oggi, però, vogliamo approfondire la questitone, entrando nell’universo di questa figura lavorativa e spiegandoti come diventare un programmatore 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 web deve avere.

In quest’articolo elencheremo 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 web front-end le competenze generali che dovrai acquisire sono le seguenti:

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

Ora procediamo per step e vediamole singolarmente.

1. Conoscere il linguaggio HTML

Il linguaggio html , acronimo di HyperText Markup Language, è la competenza base per ogni programmatore informatico. 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 semplice 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.

2. Imparare il linguaggio CSS

Il passo successivo, dopo l’apprendimento di html, è riuscire a dargli una forma, uno stile; qui entra in gioco il linguaggio 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, come bootstrap framework, da poter sfruttare per velocizzare l’ atto del creare un sito web con uno stile usando codice ben consolidato e testato, sfruttando componenti e classi senza dover reinventare la ruota.

Alcuni dei framework CSS più popolari sono:

• Tailwind CSS
• Bootstrap
• Materialize
• Bulma

3. Imparare il linguaggio 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 il linguaggio 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 dai back-end developer. Sostanzialmente, conoscendo questo linguaggio di programmazione, è possibile essere full-stack web developer in un intero applicativo! Per questo motivo ultimamente è cresciuto così tanto in termini di popolarità.

La conoscenza della programmazione 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: javascript array Foreach, map, filter, reduce etc…

Dopo aver appreso la base, bisogna fare un salto di livello proseguendo con concetti avanzati la cui conoscenza può sicuramente renderti la vita più semplice circa come affrontare un colloquio di lavoro 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:

• I controlli di Flusso in JavaScript
• Differenze fra Var, Let e const
• Map, Filter e reduce per ciclare su Array

4. Imparare un Framework JavaScript

Conoscere bene il linguaggio consente, poi, di saperlo usare a livello professionale con cognizione di causa. Per questo motivo 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 puoi 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!

Questa la roadmap da seguire per diventare programmatore front-end, ma se vuoi una panoramica dall’alto e approfondita, non perderti la nostra guida su come trovare lavoro nell’ambito della programmazione informatica!