skills front end developer

Skills front end developer. Siete interessati a conoscere le competenze necessarie per lavorare come sviluppatore front-end? Siete nel posto giusto! Qui parliamo delle competenze chiave richieste a tutti gli sviluppatori front-end professionisti.

Ma prima di entrare nel vivo, specifichiamo cosa vuole dire essere uno sviluppatore front-end: gli sviluppatori front-end sono un tipo di sviluppatore web che scrive codice per il front-end dei siti web o applicazioni web. E’ quella figura che scrive codice per quello che concerne l’interfaccia (front-end appunto) o con cui si interagisce quando si visita un sito web.

Proprio così, tutto ciò che state guardando in questo momento è stato reso possibile da uno sviluppatore web front-end – ma in parte è stato supportato da uno sviluppatore back-end o full stack. Ma in definitiva, l’aspetto e l’interazione di questo sito web sono stati resi possibili da uno sviluppatore front-end.

Se state pensando di cambiare carriera e passare allo sviluppo front-end, fareste bene a farlo. Lo sviluppo front end è un ottimo punto di partenza per chi vuole iniziare a lavorare come sviluppatori, perché la barriera all’ingresso è relativamente bassa (solitamente per iniziare non è richiesta alcuna esperienza precedente o laurea in informatica), gli stipendi annuali in Italia sono buoni (dai 18 ai 45 mila € annui secondo il sito Indeed )e la crescita della richiesta degli sviluppatori web, che include gli sviluppatori front end, è elevata (come afferma lo stesso Sole24ore).

Inoltre, si tratta di un lavoro che richiede molta creatività e capacità di problem solving e, soprattutto, una profonda e costante passione per lo studio e l’aggiornamento continuo.

Tabella dei contenuti.
Ecco l’elenco delle principali skills front end developer:

• HTML
• CSS
• JavaScript
• jQuery
• JavaScript Frameworks
• Front End Frameworks
• CSS Preprocessors
• RESTful Services/APIs
• Responsive/Mobile Design
• Cross-Browser Development
• Content Management Systems
• Web Accessibility
• Testing/Debugging
• Git/Version Control
• Problem-Solving

Per cominciare, vediamo come, di base, gli sviluppatori web front-end utilizzano solo tre linguaggi di codifica per creare tutti i siti e le applicazioni web. E questi tre linguaggi di codifica sono: HTML, CSS e JavaScript. E come si può intuire, sono le prime competenze da apprendere. Vediamole nel dettaglio.

HTML
L’HTML (Hyper Text Markup Language) è l’elemento di base del web. Come l’atomo è presente in tutte le particelle di materia, ecco come l’HTML è presente in ogni pagina web che sia mai esistita.

L’HTML ed il web sono stati letteralmente creati insieme, come un tutt’uno: nel 1989 l’informatico Tim Berners-Lee ha inventato l’HTML e allo stesso tempo ha inventato un browser web che ha permesso alle persone di leggere documenti HTML in tutto il mondo.

Quasi 40 anni dopo, quando uno sviluppatore front-end decide di codificare una pagina Web, la prima cosa che deve fare è scrivere l’HTML. Ovviamente, l’HTML ha fatto molta strada in 40 anni, cosi oggi la più recente versione stravagante dell’HTML è chiamata HTML5.

Fondamentalmente, lo scopo dell’HTML è organizzare il contenuto in modo che abbia senso per i computer, e per fare ciò bisogna “taggare” ogni pezzo di contenuto con il suo appropriato tag HTML (i paragrafi ricevono tag <p>, i titoli ottengono tag <h1>, <h2> o >h3>, le immagini ricevono tag <img> e così via).

CSS
Potremo notare che, sebbene impressionante, il primo sito web mai creato era piuttosto brutto da guardare. È qui che entra in gioco CSS (Cascading Style Sheets). CSS è uno scripting di codifica utilizzato per trasformare quel noioso HTML nei bellissimi siti web attuali, ma lo fa in un modo molto importante: senza ingombrare il proprio HTML!

Come Eric Meyer, uno dei maggiori esperti di CSS, descrisse per la prima volta nel lontano 2000:

“Ecco perché i CSS sono così importanti. Non solo abbiamo la capacità di descrivere presentazioni sofisticate, ma possiamo farlo in relazione a documenti ben strutturati e ordinati”.

Come l’HTML, anche il CSS ha fatto molta strada da quando è stato inventato per la prima volta nel 1996, e oggi giorno si utilizza il CSS3. Oltre a tutti i colori, i bellissimi caratteri e le animazioni , i CSS3 rendono la creazione di layout reattivi più semplici che mai.

Per iniziare qualsiasi percorso professionale di sviluppo web front-end, bisognerà padroneggiare la programmazione partendo proprio da HTML e CSS. La buona notizia è che ottenere una solida conoscenza pratica di uno di questi può essere fatto in poche settimane. Sono infatti il primo step per chi da neofita vuole avvicinarsi a questo mondo.

Diciamo che HTML e CSS sono in realtà “il primo tassello” di cui abbiamo bisogno tecnicamente per creare bellissimi siti web.

Ma per completare veramente il proprio profilo da sviluppatore front-end professionale, serve un altro linguaggio di programmazione da imparare. Javascript.

Javascript
JavaScript è un linguaggio di programmazione che raccoglie il proprio HTML e CSS e “fa girare tutto”!

Praticamente tutto ciò che può viene in mente come interattivo sul Web è alimentato da JavaScript: lettori video, scorrimento infinito, aggiornamento in tempo reale, selettori di date nei campi dei moduli, mappe su cui possiamo ingrandire e ridurre, giochi online, chat in-page ecc. La lista potrebbe continuare all’infinito.

JavaScript è l’unico linguaggio di programmazione utilizzato sul front-end dei siti Web, rendendolo il linguaggio di programmazione più popolare al mondo, come descrive David Flanagan nell’introduzione al suo libro JavaScript: The Definitive Guide: Master the World’s Most-Used Programming.

“JavaScript è il linguaggio di programmazione del web. La stragrande maggioranza dei siti Web utilizza JavaScript e tutti i browser Web moderni, su desktop, tablet e telefoni, includono interpreti JavaScript, rendendo JavaScript il linguaggio di programmazione più utilizzato nella storia.

jQuery
Mentre stiamo parlando di JavaScript, saremo negligenti se non menzionassimo jQuery.

JQuery è una libreria JavaScript, una raccolta di plug-in ed estensioni che rende lo sviluppo con JavaScript più rapido e semplice. In altre parole: stiamo parlando di più funzionalità con meno righe di codice.

Ad esempio, ecco il codice per nascondere un pulsante in JavaScript:

document.getElementById(“mybutton”).classList.add(“hide”);
Ecco lo stesso codice scritto in jQuery:

$(“#miopulsante”).hide();

Invece di dover codificare tutto da zero, jQuery consente a uno sviluppatore di aggiungere elementi già pronti ai progetti, quindi personalizzarli secondo necessità. E’ possibile utilizzare jQuery per eseguire funzioni JavaScript comuni come l’aggiunta o la rimozione di classi o per creare elementi dell’interfaccia utente Web comuni come timer per il conto alla rovescia, selettori di date o suggerimenti.

Framework JavaScript
I framework sono degli strumenti che aiutano lo sviluppatore nel suo lavoro. I framework JavaScript danno una struttura già pronta al proprio codice JavaScript. Esistono diversi tipi di framework basati su JavaScript per esigenze diverse, sebbene AngularJS, Backbone, Ember, Vue.js e React siano i più popolari.

I framework JavaScript sono un argomento importante e l’avvento dell’era dei framework JavaScript dopo il 2010 ha plasmato profondamente lo sviluppo dell’intera professione di sviluppatore front-end e del Web in generale.

Fondamentalmente, lo scopo dei framework JavaScript è accelerare lo sviluppo. Possono anche essere utilizzati con librerie come jQuery per mantenere veramente al minimo assoluto la quantità di codice da zero che bisogna creare. Ciò consente di creare applicazioni significativamente più grandi e robuste e i framework JS hanno svolto un ruolo fondamentale nella creazione di applicazioni Web sempre più complesse (si pensi a siti Web incredibilmente interattivi come Figma o Slack).

Scegliere quale framework concentrare i propri sforzi sull’apprendimento è un argomento che gli sviluppatori amano discutere. Oggi il mercato sta confermando i framework Angular e ReactJS tant’è che sono i più diffusi.

Git e sistemi di controllo di versione
I sistemi di controllo della versione consentono di tenere traccia delle modifiche apportate al codice. Semplificano anche il ripristino di una versione precedente se si sbaglia qualcosa.

L’altro uso, meno ovvio per i profani, per il controllo della versione è quando si lavora in un team. In effetti, non sarebbe permesso toccare una singola riga di codice in nessun ambiente di sviluppo professionale senza utilizzare un sistema di controllo della versione. In questo modo 100 o 1.000 colleghi sviluppatori più possono lavorare tutti sulla stessa base di codice, contemporaneamente, senza preoccuparsi di sovrascrivere il lavoro dell’altro.

Git è il più utilizzato di questi sistemi di gestione del controllo della versione. Sapere come usare Git sarà un requisito importante per qualsiasi lavoro di sviluppo. Questa è una di quelle abilità lavorative vitali che gli sviluppatori web devono avere, ma di cui pochi parlano davvero. Anzi, oggi diamo per scontato che uno sviluppatore sappia lavorare con Git o con un altro sistema di versionamento.

Framework front-end
Diremo quindi che le abilità di sviluppo front-end riguardano tutte come ottimizzare il proprio lavoro per le prestazioni web, ovvero come scrivere codice più veloce più velocemente e meglio.

I framework front-end esistono proprio per fare questo. Fanno per i CSS ciò che i framework JavaScript fanno per JavaScript: danno un punto di partenza per una codifica più veloce.

Poiché così tanti CSS iniziano con gli stessi elementi da progetto a progetto (es: campi modulo, pulsanti, titoli), un framework che fornisce tutti questi elementi in anticipo è estremamente prezioso.

La maggior parte degli annunci di lavoro per sviluppatori front-end si aspetta che il candidato abbia familiarità con il funzionamento di questi framework e su come usarli: oggi conoscere un framework front-end determina un vantaggio per un programmatore front-end.

Preprocessori CSS
I preprocessori sono un altro strumento che gli sviluppatori front-end possono utilizzare per velocizzare la codifica CSS. Un preprocessore CSS aggiunge funzionalità extra ai CSS per rendere il tuo CSS più scalabile e più facile da usare. In pratica ciò significa che si possono realizzare cose fantasiose in un linguaggio di programmazione come usare variabili e fare semplici calcoli, cose che i normali CSS non possono fare.

Il pre-processore quindi “elabora” il codice prima di pubblicarlo sul sito Web e lo trasforma in CSS ben formattato e compatibile con tutti i browser.

Sass e LESS sono i due preprocessori più richiesti.

Servizi RESTful e API
Senza entrare troppo nei dettagli, REST è l’acronimo di Representational State Transfer. In altri termini è un modo semplice e standardizzato, chiamato “architettura”, per condividere i dati tra le fonti sul web. I servizi e le API RESTful sono servizi Web che aderiscono all’architettura REST, spesso sono abbreviati solo in API REST.

Anche se sembra tutto molto complicato e tecnico, è un semplice insieme di linee guida e pratiche che stabiliscono le aspettative in modo da sapere come comunicare con un’app Web. Il processo generale è lo stesso per qualsiasi servizio che utilizza le API RESTful, solo i dati restituiti saranno diversi.

Se ad esempio volessimo scrivere un’app che mostri tutti i propri amici sui social media nell’ordine in cui si è ha stretto amicizia. Si possono effettuare chiamate all’API RESTful di Facebook per leggere la propria lista di amici e restituire quei dati al proprio sito web dove possiamo farne ciò che vogliamo con esso.

Sebbene le API REST siano più comunemente utilizzate dagli sviluppatori back-end con linguaggi back-end come Python, Ruby e PHP, alcune API REST possono essere utilizzate anche con JavaScript, rendendole disponibili per lo sviluppo front-end!

Responsive and Mobile Design
Nel mondo, sempre più persone accedono a Internet dal proprio dispositivo mobile rispetto che da un computer desktop. Quindi non c’è da meravigliarsi che le capacità di progettazione reattiva e mobile siano estremamente importanti per le aziende di sviluppo web.

Design mobile significa che il layout del sito (e talvolta funzionalità e contenuto) cambia in base alle dimensioni dello schermo e al dispositivo utilizzato da qualcuno.

Ad esempio, quando visitiamo un sito Web da un computer desktop con un monitor di grandi dimensioni, vediamo più colonne, grafica di grandi dimensioni e interazioni create appositamente per gli utenti di mouse e tastiera. Su un dispositivo mobile, lo stesso sito web apparirebbe come un’unica colonna ottimizzata per l’interazione tattile, ma utilizzando gli stessi file di base.

Il responsive web design è un tipo di design mobile in cui viene utilizzata la stessa base di codice sia per l’esperienza web che mobile di un sito web. I vantaggi di questo approccio sono che può essere più facile da mantenere poiché è un sito Web che cambia semplicemente al variare delle dimensioni dello schermo. Questo approccio è stato introdotto per la prima volta nel 2010 da uno sviluppatore di nome Ethan Marcotte, che ha creato questo metodo nella speranza di creare una risposta più semplice alla domanda del mercato che richiede un forte adattamento al layout dei dispositivi mobili.

Sviluppo cross-browser
Sfortunatamente per l’ex CEO di Microsoft, Steve Ballmer, pochissimi sviluppatori sarebbero d’accordo con la sua affermazione secondo cui “preferirebbe usare Windows e Internet Explorer all’inferno piuttosto che usare Linux e Mozilla Firefox in paradiso! “

In effetti, si potrebbe sostenere che Internet Explorer, e il suo famigerato traballante, sia stato il motivo principale per cui gli sviluppatori di tutto il mondo hanno passato così tanti anni a preoccuparsi dello sviluppo cross-browser.

I browser moderni stanno diventando piuttosto bravi a visualizzare i siti Web in modo coerente, ma ci sono ancora differenze nel modo in cui interpretano il codice dietro le quinte e ciò che può comportare è che i siti Web non hanno lo stesso aspetto a seconda del browser che stai utilizzando (ad esempio Firefox rispetto a Chrome rispetto a Safari). Fino a quando tutti i browser moderni non funzioneranno perfettamente con gli standard Web, sapere come far funzionare ciascuno di essi nel modo desiderato è un’abilità importante. Questo è lo sviluppo cross-browser.

Si può approfondire sulla compatibilità cross-browser su Wikipedia e/o nei documenti per sviluppatori Mozilla .

Accessibilità web
La Sezione 508 del Rehabilitation Act del 1973 indica che tutti i siti web devono essere accessibili alle persone con disabilità. Ma ciò che è orribile è che si stima che solo il 2% dei siti Web soddisfi le Linee guida per l’accessibilità dei contenuti Web (WCAG).

Costruire siti web accessibili significa prendere in considerazione come far funzionare i tuoi siti web quando l’utente ha a che fare con una varietà di disabilità diverse, come non essere in grado di vedere il sito web e aver bisogno di utilizzare uno screen reader, o essere solo in grado di utilizzare una tastiera per navigare, come due esempi comuni.

La buona notizia è che sebbene l’accessibilità web sia un argomento importante, non deve essere difficile da implementare. Infatti, nel suo discorso “Costruire esperienze inclusive con CSS e SVG”, l’esperta di accessibilità web Sara Soueidan afferma che ci sono molti “piccoli consigli su cose che si possono fare ma che avranno un grande impatto sull’esperienza dell’utente e sull’usabilità delle tue interfacce e anche sull’accessibilità”. Questi includono un uso ponderato delle animazioni (e come farlo senza far ammalare le persone) o la possibilità per gli utenti di personalizzare aspetti del tuo sito, tra cui la dimensione del tipo e i colori.

Content Management System e piattaforme di e-commerce
Quasi tutti i siti web del mondo sono costruiti su un sistema di gestione dei contenuti (CMS). Ciò che fanno i sistemi di gestione dei contenuti è semplificare la pubblicazione di contenuti sul Web, come un blog o qualsiasi sito Web più grande con così tanti contenuti che non è possibile avere il contenuto all’interno dei file di codice.

Sebbene gli sviluppatori front-end non creerebbero un CMS da zero (quello sarebbe il lavoro degli sviluppatori back-end), possono integrare il loro codice con un CMS esistente.

Il CMS più popolare al mondo è WordPress, che è dietro le quinte di milioni di siti web. Infatti, quasi il 60% dei siti Web che utilizzano un CMS utilizza WordPress.

Altri popolari CMS includono Joomla, Drupal e Magento. Conoscere un CMS specialmente se complesso o di nicchia, spesso determina un valore aggiunto per lo sviluppatore che vuole affermarsi sul mercato o è in cerca di lavoro.

Test e debug
È un dato di fatto per qualsiasi sviluppatore: i bug accadono. Avere familiarità con i processi di test e debugging è un’abilità essenziale.

Il test unitario (Unit Test) è il processo di test di singoli blocchi di codice e i framework di test unitario forniscono un metodo e una struttura specifici per farlo. La grande idea con i test unitari è che si scrive “test” nel codice e questo è possibile farlo con qualsiasi linguaggio di programmazione, incluso JavaScript .

Un altro tipo comune di test è il test dell’interfaccia utente (chiamato anche test di accettazione, test del browser o test funzionale), in cui si controlla che il sito web si comporti come previsto.

Nei test dell’interfaccia utente si può scrivere test in codice come con i test unitari, ma si può anche scrivere solo istruzioni di test come un normale essere umano potrebbe eseguire: ovvero “assicurati che se un utente dimentica di compilare un campo del modulo richiesto, la casella di errore del modulo si apre”.

Il test, in definitiva, riguarda meno il modo in cui scriviamo o eseguiamo i test. Piuttosto è avere un modo completo e orientato ai dettagli per assicurarsi che le nuove modifiche al codice non causino problemi con la funzionalità esistente del sito. I test sono una parte fondamentale della garanzia della qualità, spesso chiamata QA.

Il debugging consiste semplicemente nel prendere tutti i “bug” (errori) che questi test scoprono (o che i tuoi utenti scoprono una volta che il tuo sito è stato lanciato), “indossare il cappello da detective” per capire perché e come stanno accadendo e risolvere il problema. Diverse aziende utilizzano processi leggermente diversi per fare ciò, ma se si ha utilizzato uno, ci si può adattare agli altri abbastanza facilmente.

Poiché il test e il debug contribuiscono in gran parte a un’esperienza e al lavoro dello sviluppatore, sono competenze preziose da conoscere per uno sviluppatore front-end.

Problem solving skill
Se c’è una cosa che tutti gli sviluppatori front-end devono avere, indipendentemente dalla descrizione del lavoro o dal titolo ufficiale, sono eccellenti capacità di risoluzione dei problemi. Dalla determinazione di come implementare al meglio un progetto utilizzando i migliori metodi di sviluppo moderni alla correzione di bug che emergono fino a capire come far funzionare il codice front-end con il codice back-end, lo sviluppo riguarda la risoluzione creativa dei problemi.

Ad esempio, hai creato un front-end del sito Web perfettamente funzionante e lo consegni agli sviluppatori del back-end affinché lo integrino con il sistema di gestione dei contenuti (CMS). All’improvviso, metà delle tue fantastiche funzionalità smettono di funzionare!

Un buon sviluppatore front-end vedrà questo come un puzzle da risolvere piuttosto che un disastro assoluto. Ovviamente, un eccellente sviluppatore front-end di livello senior anticiperà questi problemi e cercherà di prevenirli in primo luogo, ma c’è un sacco di tempo per farlo in seguito!

(fonte)

Innovaformazione, scuola informatica specialistica promuove la cultura IT e dello sviluppo web.

Nell’offerta formativa trovate i seguenti corsi relativi allo sviluppo front end:

Corso HTML-CSS-Javascript

Corso React

Corso Angular

INFO: info@innovaformazione.net – tel. 3471012275 (Dario Carrassi)