large_frontend-roadmap-article-cover.jpeg

medium_frontend-roadmap-article-cover.jpeg

small_frontend-roadmap-article-cover.jpeg

thumbnail_frontend-roadmap-article-cover.jpeg

small_frontend-roadmap-article-cover.webp

thumbnail_frontend-roadmap-article-cover.webp

Scopri in questo Front End Developer Roadmap le librerie, i frameworks e i linguaggi di programmazione che un Front End Developer deve conoscere nel 2022.

Il Front End Developer Roadmap 2022

Nel precedente articolo abbiamo parlato del nuovo framework React chiamato Remix e se non hai avuto il tempo di leggerlo, ti consiglio di farlo cliccando [qui](https://www.flaco.dev/it/blog/cos-e-react-remix). Nel caso te ne fossi innamorato e stai pensando di migrare un progetto sviluppato con Angular, ad esempio, ti renderai conto quanto lungo e tedioso sarebbe lo sviluppo di tutti i componenti dell'interfaccia già creati. Ma non temere perché l'obiettivo di oggi sarà comprendere  **cosa sono i Web Components**  e come possono aiutare a  **esternalizzare**  la parte  **visuale**  di un'applicazione per essere agnostica alla tecnologia utilizzata nel Front End.

La nostra lettura partirà dal capire le  **necessità** per arrivare alla  **soluzione finale** che ci permetterà di comprendere in dettaglio cosa sono i Web Components.

## Cosa sono i Web Components: le necessità

Esistono diversi frameworks JavaScript o librerie che ci permettono di sviluppare la logica e l'interfaccia di un'applicazione. E molto spesso all'interno di un'azienda, in particolare se di grandi dimensioni, possono coesistere diverse tecnologie allo stesso tempo. Questo comporta la  **duplicazione**  di alcune  **componenti** che vengono utilizzate per costruire la  **UI**, come ad esempio i seguenti elementi: pulsanti, inputs, tabelle, etc.

Di conseguenza, se si adottano due tecnologie non compatibili, per mantenere lo stesso stile, si riscrive il codice del componente adattandolo alla tecnologia utilizzata. Ciò si traduce in:

-   **spreco di denaro**  e **di tempo**;
-   **ridondante manutenzione**  del codice;
-   **duplicazione**  dello  **sviluppo**  di nuove funzionalità.

Inoltre, nel caso in cui volessimo cambiare la tecnologia di una piattaforma, dovremo sempre riscrivere l'intera applicazione se il codice non è compatibile.

Queste sono le necessità e quindi i problemi che attualmente ci sono. Adesso cerchiamo di comprendere più in dettaglio il  **perché utilizzare i Web Components**  e così avremo un'immagine più generale di cosa sono i Web Components.

## Perché utilizzare i Web Components?

Come  **soluzione**  a questi problemi sono nati i  **Web Components**, che preciso nel sottolineare che non sono una tecnologia recentissima e che se ne discusse per la prima volta nel 2011. Anche se la loro prima implementazione è assai più recente. Questo indica che sin da subito si era sentita la necessità di avere dei **componenti**  visuali che potessero essere  **riutilizzati in modo trasversale**  di progetto in progetto.

Per fare un esempio più concreto, per sviluppare un elemento di tipo  _Button_, avendo due applicazioni costruite con due diverse tecnologie, possiamo utilizzare un Web Component e importarlo come se fosse un normale elemento HTML. Non ci preoccupiamo quindi di costruire un elemento duplicato per ogni tecnologia ma lo esternalizziamo, costruendo la nostra libreria di componenti UI in un progetto separato.

Da un piccolo esempio, possiamo già dare una valutazione ai vantaggi che otteniamo da una libreria di Web Components:

-   gestione  **centralizzata** (nuove funzionalità, aggiornamenti);
-   i componenti sono  **riutilizzabili**  di progetto in progetto;
-   **indipendenza**  dalla tecnologia utilizzata;
-   visione **unica** (in un unico posto, abbiamo tutti i componenti che necessitiamo)

Questo sottolinea il perché utilizzare i Web Components e come sono determinanti per un **risparmio di costi** ed **energie** legato alla riutilizzabilità degli elementi visuali di un'applicazione.

Adesso, dovendo quindi rispondere alla domanda cosa sono i Web Components, possiamo affermare quanto sotto:

> **I Web Components sono elementi visuali riutilizzabili che non dipendono da una tecnologia in concreto**

Terminata la parte più noiosa, ovvero la teoria, passiamo allo sviluppo di un Web Component, e alla sua integrazione all'interno di un progetto sviluppato con NextJS.

## Come implementare i Web Components

Prima di iniziare, ti introduco tre concetti fondamentali che ci aiuteranno a capire come funzionano i Web Components e che rivedremo nell'esempio a seguire:
- **customElements**: la API JavaScript per costruire il componente;
- **shadow dom**: permette di isolare l'esecuzione del componente (stile, etc);
- **HTML templates**: API HTML per mostrare l'elemento.

Passando alla pratica, ti ricordo che puoi consultare il codice finale sulla mia pagina Github del progetto [qui](https://github.com/flaviocolonna/nextjs-webcomponent).

L'obiettivo è creare un tag HTML che possa gestire in autonomia lo stile della tipografia della nostra piattaforma sulla base del componente che vogliamo mostrare. Di seguito un esempio di un suo futuro utilizzo:
```html
<web-typography component="h1" data-text="I am an h1 tag" />
<web-typography component="p" data-text="I am a paragraph" />
```

In questo caso, possiamo già notare un vantaggio: **non definiamo** lo stile perché sarà lo stesso Web Component a gestirlo.

Vediamo a seguire come creare un Web Component che ci permetta di fare questo.

Per prima cosa ho creato una classe, chiamata *Typography*, che gestirà l'elemento di tipo testo sulla base di due attributi principali:
- **component**: definisce il tipo di tag da mostrare (h1, h2, h3, p, etc);
- **data-text**: definisce il contenuto testuale.

Infine, all'interno della stessa classe definisco lo stile che avrà ogni tipo di elemento di testo, così da evitare la ridondanza che otterrei aggiungendo le classi ogni qualvolta vado a creare un tag individualmente.

```javascript
// Create a class for the element
class  Typography  extends  HTMLElement {
	constructor() {
		// Always call super first in constructor
		super();
		/* With mode === closed, you cannot access to the shadow dom from outside */
		const shadow = this.attachShadow({ mode: 'closed' });
		// Get tag type
		const tag = this.getAttribute('component') || 'span';
		const wrapper = document.createElement(tag);
		// Take attribute content and put it inside the tag
		const text = this.getAttribute('data-text');
		wrapper.textContent = text;
		// Create some CSS to apply to the shadow dom
		const style = document.createElement('style');
		style.textContent = `
			h1 {
				font-size: 3rem;
				font-weight: 700;
			}
			h2 {
				font-size: 2rem;
				font-weight: 600;
			}
			p {
				font-size: 1.2rem;
				font-weight: 400;
			}
		`;
		// Attach the created elements to the shadow dom
		shadow.appendChild(style);
		shadow.appendChild(wrapper);
	}
}
// Define the new element (name must contain hyphens)
customElements.define('web-typography', Typography);
```

La funzione **constructor** verrà eseguita non appena viene mostrato il componente HTML. All'interno accediamo agli **attributi**, definiamo **lo stile** e infine inseriamo gli elementi creati al DOM assegnato, lo **shadowDom**. Quest'ultimo è un DOM isolato al quale possiamo accedere o no, in base al parametro **mode**.

Una volta definito il comportamento basico, utilizziamo l'API **customElements** presente nella maggior parte dei browser, per definire un Web Component e così rendere possibile il suo utilizzo come un normale tag HTML.

Abbiamo appena visto i concetti fondamentali di un Web Component e non ci resta che utilizzarlo.

Nel successivo esempio ho integrato un Web Component all'interno di un'applicazione costruita con NextJS, che quindi utilizza ReactJS.

Per prima cosa dobbiamo importare il file JS:
```javascript
useEffect(() =>  import('../components/Typography/index.js'), []);
```
Qui ho utilizzato lo **useEffect**, dato che è un'applicazione in ReactJS, e ho utilizzato il **dynamic import** per non pubblicare all'interno della cartella _public_ di NextJS lo stesso componente.
In un altro articolo vedremo come utilizzare i Web Component come tag JSX importandoli e utilizzandoli direttamente.

Poi passiamo all'utilizzo vero e proprio del nostro componente che verrà mostrato come qualsiasi tag HTML con lo stile che abbiamo definito al suo interno:
```html
<web-typography data-text="I am a Web Component" component="h1" />
```

Niente di più semplice! Potremo utilizzare questo componente anche in un'applicazione scritta con Angular, VueJS o in puro JavaScript.

Il risultato sarà il seguente:

![Cosa sono i Web Components - Esempio](https://res.cloudinary.com/flaco-dev/image/upload/v1642002768/cosa_sono_i_web_components_5f6aab3d0a.png)

## Compatibilità con i browser

Attualmente la maggior parte dei browser supportano i Web Components. Per verificare la matrice di compatibilità puoi far riferimento a questo [link](https://caniuse.com/?search=customElements). Nel caso volessi supportare un browser che non è compatibile nativamente con i Web Components, puoi sempre installare un polyfill seguendo il procedimento descritto [qui](https://www.webcomponents.org/polyfills).

Direi che abbiamo terminato questo nostro viaggio che ci ha fatto comprendere cosa sono i Web Components. In un successivo articolo parleremo di come utilizzarli come semplici import ES6, e ti introdurrò la libreria StencilJS. Questa rappresenta uno strumento fondamentale molto potente per la creazione dei Web Components. Se vuoi anticipare i tempi, ti consiglio di dare un'occhiata alla documentazione sulla [pagina ufficiale](https://stenciljs.com/).

> Sei interessato/a a diventare Front End Developer? Ho creato un **corso** per aiutarti a entrare in questo mondo o per approfondire il linguaggio di programmazione JavaScript con maggiori dettagli. Puoi **[acquistare il corso completo qui](https://www.frontendpills.it/corso-front-end-developer-2021?coupon=FRONTENDPILLER_40)** adesso con il **40% di sconto**. Sarà un viaggio dalle **basi** di **JavaScript** fino ad un **livello** più avanzato. Parleremo di **testing**, del protocollo **HTTP**, delle diverse versioni di **ECMAScript** e tante altre cose che puoi consultare sulla web. Nella versione completa avrai la mia **assistenza** a disposizione, tanti **quiz**, il **materiale in PDF** e un **meeting finale**. Se non fossi interessato alla versione completa, avrai la possibilità di acquistare la versione più economica che non comprende questi ultimi citati vantaggi. Puoi **[acquistare la versione Basic qui](https://www.frontendpills.it/corso-front-end-developer-2021-basic)**.

Ora è il momento di concludere. Ti ricordo che se ti è piaciuto questo articolo e vuoi  **supportarmi**, puoi seguire questi semplici passaggi  **facili e gratuiti**:  

1.  **Lascia un mi piace**  cliccando sull'icona del cuore qui sotto;  
2.  **Condividi** questo post sui tuoi account social o con i tuoi amici;  
3.  **Seguimi**  su [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) e su [Github](https://github.com/flaviocolonna);  
4.  **Iscriviti alla newsletter** qui sotto per non perderti nessun articolo, sconto o gossip (ce ne saranno tanti).  

Grazie mille per l'attenzione e ti auguro una buona giornata!

small_cosa-sono-i-web-components.jpg

thumbnail_cosa-sono-i-web-components.jpg

small_cosa-sono-i-web-components.png

thumbnail_cosa-sono-i-web-components.png

small_cosa-sono-i-web-components.webp

thumbnail_cosa-sono-i-web-components.webp

Scopri cosa sono i Web Components, una tecnologia che permette di creare elementi della UI e di isolarli da una determinata applicazione.

Cosa sono i Web Components e come implementarli

Scopri cosa sono i Web Components: una nuova tecnologia per creare interfacce indipendenti dal framework Front End.

Di recente un **nuovo framework React** è stato lanciato e il suo nome è Remix. Gli sviluppatori di React Router hanno lavorato duro per creare e presentare questo nuovo framework e in questo articolo sono lieto di rispondere alla domanda "Cos'è React Remix?".

Dopo aver visto il video di presentazione, sono rimasto impresso dalle potenzialità di Remix e ho voluto fare qualche prova da me per descriverne le caratteristiche in questo articolo, nel modo più originale e personale possibile. Dopo averlo provato, posso solo confermare che sarà un'**ottima alternativa** alle soluzioni già presenti quando parliamo di frameweork React, come NextJS o Gatsby. Sicuramente ne terrò in conto per i miei futuri progetti.

Adesso è giunto il momento di analizzare le proprietà di React Remix ma prima ti faccio leggere la sua definizione secondo i propri fondatori:

>Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.


## React Remix: la storia
Tutto è iniziato l'anno scorso quando due sviluppatori hanno annunciato lo sviluppo di un nuovo framework React che sarebbe diventato un nuovo attore nel settore dello sviluppo web. L'hanno chiamato React Remix, ma in seguito sono spariti per un po', senza rivelare nessuna informazione interessante, e mantenendo tutto top secret. Fino ad ora.

Il **22 novembre del 2021** hanno rilasciato ufficialmente la prima versione concedendo una live in streaming e mostrando tutte le potenzialità di Remix come nuovo framework React e descrivendo cos'è React Remix. Si potrebbe pensare che non ci sia bisogno di un altro framework in quanto esiste già una vasta gamma di soluzioni. Ma sembra non essere importato a questi sviluppatori e quindi eccoci qua: React Remix è un nuovo framework React!

Quando dico due sviluppatori non parlo di due ragazzi a caso. Sono nientemeno che i creatori di React Router!

Scopriamo ora nel dettaglio cos'è React Remix, le sue caratteristiche e come utilizzare React Remix in un'applicazione.

## Cos'è React Remix?
React Remix è un nuovo framework React il cui sviluppo è iniziato nel 2019. Gli sviluppatori sono Michael Jackson (co-fondatore, CEO) e Ryan Florence (co-fondatore), gli stessi sviluppatori dietro React Router. Qualsiasi software engineer che ha lavorato con React conosce un po' React Router, quindi sappiamo di cosa stiamo parlando. Nel caso in cui non conosci React Router, è "semplicemente" la libreria di routing più utilizzata in React, in grado di funzionare ovunque venga eseguito React: sul web, su NodeJS e su React Native. È anche il nucleo di altre librerie di routing più note come react-router-dom e react-router-native.

Quindi, partendo da React Router, hanno costruito un framework basato su di esso: React Remix. Ora, per rispondere alla domanda cos'è React Remix possiamo affermare che React Remix è un framework basato su React Router, che affronta alcuni dei problemi di Client Side Rendering e molti altri. Se conosci un po' NextJS ti risulterà molto simile, ma con diverse importanti differenze che vedremo nella prossima sezione. Quindi, continua a leggere!

## React Remix: obiettivo
Ma aspetta un momento. Prima di iniziare a elencare tutte le funzionalità, dobbiamo capire perché uno sviluppatore web dovrebbe averne bisogno. Rispondere a questa domanda ci aiuta a capire a cosa serve React Remix.

L'obiettivo principale di React Remix è fornire un nuovo strumento di sviluppo web per migliorare il **tempo di compilazione**, le **prestazioni** in fase di esecuzione e la velocità di sviluppo. Inoltre, sono stati tenuti sott'occhio i miglioramenti **SEO** e l'**accessibilità**. Tutto questo grazie a un nuovo approccio Server Side Rendering e un nuovo strumento di **build**.

Non è uno strumento semplice e per questo lo chiamiamo **framework**, perché fornisce una piattaforma a 360 gradi per costruire siti web migliori, proprio come affermano i propri fondatori.

A mio modesto parere, si voleva creare un'unione tra NextJS e React Router. L'obiettivo è quello di fornire un semplice generatore di siti web di **rendering lato server** ma migliore, includendo alcune interessanti funzionalità di React Router e altre novità in ambito di sviluppo che presto ti svelerò.

Ora siamo pronti per iniziare a scoprire le nuove funzionalità incluse in React Remix, finalmente sempre più vicini per rispondere alla domanda “Cos'è React Remix?”.

## Funzionalità di React Remix
Come ho detto prima, React Remix sembra essere simile a NextJS o a GatsbyJS a prima vista. Se li conosci, potrebbero sembrarti uguali, ma dopo questa spiegazione cambierai idea, vediamo perché.

### React Remix Routing, Nesting Routes, Suspense Cache, Scroll Restoration
Se prendiamo come esempio NextJS, sappiamo che costruisce i percorsi in base alla struttura del progetto. Dichiariamo all'interno della cartella delle pagine i file che vogliamo e il framework usa i nomi per costruire tutto il sistema di routing dell'applicazione. Lo stesso fa React Remix, utilizzando una cosiddetta cartella route. React Remix in questo caso costruisce anche i percorsi basati sul File System. E questa è la più grande innovazione in React Router.

Tuttavia, invece di replicare semplicemente NextJS o GatsbyJS, è stata aggiunta la funzionalità dei percorsi annidati (**Nesting Routes**)! Significa che possiamo avere percorsi in cui i figli ereditano il layout padre senza replicare nel codice il componente contenitore. Fantastico!

![Cos'è React Remix - Struttura del progetto](
https://res.cloudinary.com/flaco-dev/image/upload/v1638375663/remix_folder_structure_75defbbbe4.png)

E che dire del famoso **Suspense**? In React Router si usa per caricare un componente che è in grado di memorizzare nella cache il componente già mostrato. In questo caso un altro rendering con le stesse proprietà non eseguirà nuovamente il rendering dello stesso layout di pagina. In React Remix hanno cambiato questo approccio, abilitando una **cache** di suspense **basata sulla posizione**. Ogni volta che carichiamo una pagina nello stato della cronologia diventa univoca e Suspense memorizza nella cache il componente in base alla posizione e non alle proprietà. Se navighiamo avanti e indietro, o se aggiugiamo di nuovo la stessa pagina visitandola da un link di navigazione, sarà un altro record univoco.

E per concludere con le funzionalità di routing, pare abbiano incluso una grande funzionalità chiamata **ripristino dello scorrimento**. Ogni pagina memorizzerà nella cache la posizione di scorrimento nel caso in cui si debba tornare su di essa potendo quindi proseguire da dove ci siamo fermati. E un ruolo importante qui è giocato dalla Suspense, che può memorizzare le stesse pagine ma con scrolls diversi, se fanno parte di una posizione diversa nello stato della storia di navigazione.

Penso che questo sia un grande miglioramento. Ora vediamo cosa resta.

### React Remix: tempi di build e Fast Refresh più rapidi

Ho detto tempi di compilazione più rapidi? Sì, hai ragione! Per realizzarlo hanno integrato **esbuild**.

Se non lo conosci non preoccuparti perché dovresti solo sapere che è il **bundle JavaScript più veloce** (leggi qui). E posso confermarlo! Mentre guardavo l'anteprima, ho visto quanto è veloce, anche durante l'**aggiornamento rapido**. E quando infine l'ho provato, ho visto una grandissima differenza con altri bundlers come Webpack o Browserify. Questo sarà un vero vantaggio per ridurre il tempo di build localmente e in CI.

### Ottimizzazione form React Remix

Un altro grande passo in avanti è stato fatto quando si parla di moduli (form). L'invio dei dati da parte di un utente ha sempre richiesto uno sviluppo extra. La gestione dei dati del form e lo stato di invio ad esempio. Quindi dovevamo utilizzare un **useState** e accedere agli elementi input attraverso una qualche istruzione.

Ma come Remix gestisce un form? Non potrebbe essere più semplice. Prima di tutto qui si parla di **actions**. Sarà necessario esportare una funzione chiamata **action** nello stesso file e sarà lo stesso gestore del post che verrà inviato dal modulo. Sarà una vera e propria chiamata di tipo POST fatta al nostro Remix Back End. È un grande vantaggio perchè innanzitutto non dobbiamo accedere ad ogni input, ottenere il suo valore e inserirlo nel corpo della richiesta. In più, possiamo utilizzare un hook chiamato **useTransition** per ottenere informazioni sullo stato della richiesta. Con questo possiamo godere di uno sviluppo più pulito per gestire un modulo. È una delle funzionalità migliori che abbia visto in Remix.

![Cos'è React Remix - Ottimizzazione form](https://res.cloudinary.com/flaco-dev/image/upload/v1638380100/remix_form_submission_1ec6122093.png)

### Gestione degli errori in React Remix

Un'altra grande funzionalità riguarda la gestione degli errori che utilizzano l'**Error Boundary**. In React eravamo soliti utilizzare un component che potesse aver la funzione **componentDidCatch**. Ma in Remix le cose cambiano. Ancora una volta il tutto è ridotto all'export di una funzione, che in questo caso prenderà il nome di **ErrorBoundary**, per gestire gli errori in runtime. Mentre esporteremo la funzione **CatchBoundary** per gestire gli errori provenienti dai **loaders** e dalle **actions**.

![Cos'è React Remix - La gestione degli errori](https://res.cloudinary.com/flaco-dev/image/upload/v1638380790/remix_error_boundaries_9b79163e30.png)

### Rendering lato server React Remix
Una delle prime risposte alla domanda "A cosa serve React Remix" è il rendering lato server. L'introduzione di questo nuovo sistema aiuta a creare siti web migliori in quanto sono più performanti in fase di esecuzione, specialmente per la prima visita dell'utente. Questo può aumentare il nostro SEO come sta facendo NextJS. Inoltre, SSR può essere eseguito anche in modalità sviluppo. E c'è una piccola differenza in più ed è correlata al caricamento dei dati. Vediamo di seguito cosa succederà.

### Caricamento dei dati di React Remix
React Remix utilizzerà la cache HTTP completa per gestire il modo in cui dovrebbe recuperare i dati dalla fonte originale. Se esportiamo la funzione **loaders** in una pagina React Remix, il valore restituito è accessibile dal componente che verrà renderizzato lato server. Fantastico! Ma cosa succede se voglio dei dati aggiornati, senza prenderli dalla cache? Bene, pare abbiano costruito un hook per questo. Sembra assurdo pensare a come sarà facile pulire la cache e ottenere i dati appena generati.

![Cos'è React Remix - Data Loaders](https://res.cloudinary.com/flaco-dev/image/upload/v1638378408/remix_data_loader_896afa8e9c.png)

E le funzionalità più interessanti con la funzione di caricamento non si fermano qui. Abbiamo anche miglioramenti sul lato SEO. Continua a scorrere!

### React Remix: ottimizzazione per i motori di ricerca
Uno degli obiettivi di React Remix era il **miglioramento della SEO** e ci sono riusciti. Grazie al rendering lato server, React Router può essere utilizzato facilmente per creare app performanti. E per migliorare la SEO senza utilizzare altre librerie per modificare i meta tag o il titolo della pagina, React Remix utilizza una funzione separata per esportare i **meta tags**. Io lo trovo fantastico dal momento che sono abituato a installare **Helmet**.

![Cos'è React Remix - SEO Meta Tags](https://res.cloudinary.com/flaco-dev/image/upload/v1638378733/remix_seo_meta_tags_7676641c26.png)

Con quest'ultima caratteristica abbiamo terminato la nostra lista. Qui sotto c'è un piccolo riassunto per avere una panoramica chiara.

## Cos'è React Remix: riepilogo delle caratteristiche
Ora è il momento di fare un riassunto di cos'è React Remix. Ho fatto un elenco di alcune delle funzionalità più conosciute qui sotto:

 - Percorsi del file system
 - Nested layout in base ai percorsi
 - Suspense cache in base alla posizione
 - Restauro di scorrimento
 - ESBuild: 
	 - Divisione automatica del codice
	 - Aggiornamento più veloce
	 - Costruzione più veloce
	 - Zero configurazione
 - Ottimizzazione dei form
 - Server Side Rendering per l'ambiente di produzione e di sviluppo
 - SEO Meta Tags gestiti con un export
 - Caricamento dati integrato con i loaders

## Come usare React Remix
Prima del lancio non sapevamo se React Remix fosse stato open source o a pagamento e le informazioni su questo argomento erano davvero confuse. In alcuni casi ho notato che per accedere al codice era necessario ottenere una licenza ma poi parlavano di una versione gratuita. Ma con il lancio ufficiale hanno confermato che sarebbe stato totalmente **free** e **open source**.

E grazie a questo sono riuscito a provare Remix. Il comando a seguire ci permette di creare un'applicazione basata su Remix:

```bash
npx create-remix@latest
```

![Cos'è React Remix - Creazione progetto](https://res.cloudinary.com/flaco-dev/image/upload/v1638375656/medium_remix_start_216666d262.png)

Una volta avviato il comando, ci chiederà qualche informazione:
- Il nome dell'applicazione
- Come vogliamo effettuare il deploy (diverse opzioni anche se io ho scelto Remix App Server)
- Se utilizzeremo Typescript o JavaScript
- Se vogliamo iniziare con l'installazione dei pacchetti immediatamente

Una volta che il processo sia terminato, siamo pronti per avviare la nostra nuova applicazione Remix con il seguente comando (possiamo anche utilizzare **yarn**):

```bash
npm run dev
```

![Cos'è React Remix - Avvio applicazione](https://res.cloudinary.com/flaco-dev/image/upload/v1638376992/remix_start_app_2a94a75c93.png)

Questa piattaforma di esempio contiene diverse funzionalità che possiamo analizzare. Può essere molto utile per capire come funziona Remix. Alla fine, ci ritroveremo con questo tipo di homepage:

![Cos'è React Remix - Remix Homepage](https://res.cloudinary.com/flaco-dev/image/upload/v1638376717/remix_homepage_b17ac6dc1d.png)

Non potrebbe essere più semplice di così.

Se vuoi iniziare ad utilizzare Remix e conoscerlo più a fondo puoi visitare la guida ufficiale su [https://remix.run](https://remix.run).

## Quando uscirà React Remix
**React Remix è stato lanciato il 22 novembre 2021**. È possibile vedere il video del lancio sul canale ufficiale YouTube di Remix [qui](https://www.youtube.com/watch?v=wsJaUjd1rUo). Il video è stato presentato da Kent C. Dodds, Direttore della Developer Experience, Michael Jackson (co-fondatore, CEO) e Ryan Florence (co-fondatore).

> Nel caso in cui sei rimasto/a affascinato/a da Remix e vuoi iniziare una **nuova carriera come Front End developer**, posso aiutarti. Ho creato un **corso** per aiutarti a diventare Front End Developer o per approfondire il linguaggio di programmazione JavaScript con maggiori dettagli. Puoi **[acquistare il corso completo qui](https://www.frontendpills.it/corso-front-end-developer-2021?coupon=FRONTENDPILLER_40)** adesso con il **40% di sconto**. I contenuti partiranno dalle **basi** di **JavaScript** fino ad un **livello** più avanzato. Parleremo di **testing**, del protocollo **HTTP**, delle diverse versioni di **ECMAScript** e tante altre cose che puoi consultare sulla web. Nella versione completa avrai la mia **assistenza** a disposizione, tanti **quiz**, il **materiale in PDF** e un **meeting finale**. Se non fossi interessato alla versione completa, avrai la possibilità di acquistare la versione più economica che non comprende questi ultimi citati vantaggi. **[Clicca qui](https://www.frontendpills.it/corso-front-end-developer-2021-basic)** per acquistare la versione Basic.

Ora è il momento di concludere. Ti ricordo che se ti è piaciuto questo articolo e vuoi  **supportarmi**, puoi seguire questi semplici passaggi  **facili e gratuiti**:  

1.  **Lascia un mi piace**  cliccando sull'icona del cuore qui sotto;  
2.  **Condividi** questo post sui tuoi account social o con i tuoi amici;  
3.  **Seguimi**  su [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) e su [Github](https://github.com/flaviocolonna);  
4.  **Iscriviti alla newsletter** qui sotto per non perderti nessun articolo, sconto o gossip (ce ne saranno tanti).  

Grazie mille per l'attenzione e ti auguro una buona giornata!

thumbnail_cos-e-react-remix.jpg

thumbnail_cos-e-react-remix.png

thumbnail_cos-e-react-remix.webp

Scopriamo cos'è React Remix, un nuovo framework React basato su React Router e creato dai migliori sviluppatori per migliorare la SEO, i tempi di build e le performance.

Cos'è React Remix? Un nuovo framework React

Scopriamo cos'è React Remix, un nuovo framework basato su React Router e creato dagli stessi sviluppatori di React Router per migliorare la SEO, i tempi di build e le performance.

Se sei arrivato fin qui significa che hai qualche dubbio sulle differenze tra Front End e Back End e in quest'articolo troverai tutte le risposte che cerchi.  Proverò a spiegarti questi due aspetti del mondo della programmazione web, analizzando gli obiettivi di ciascuno, i linguaggi utilizzati, le competenze richieste e le attività più comuni che vengono svolte.

Nel caso in cui volessi approfondire cosa fa un Front End developer e cosa sia un Back End developer, ti consiglio di leggere l'articolo precedente nel quale descrivo queste due aree ([Cosa fa un Front End Developer](https://www.flaco.dev/it/blog/cosa-fa-un-front-end-developer "Cosa fa un Front End Developer")).

Dopo questa breve introduzione è il momento di iniziare.

## Differenze tra Front End e Back End: obiettivi

Le principali differenze tra Front End e Back End le riscontriamo negli  **obiettivi**  che si prefissano. Ogni area ha il suo  **scopo**  e il suo protagonista. Analizziamo i dettagli:

### Obiettivi di un Front End

Se siamo stati bravi e abbiamo fatto i compiti a casa, come ad esempio leggere l'articolo su cosa fa un Front End developer, già sapremo che il  **protagonista**  principale è l'**utente** e  l'**obiettivo** è **garantire la migliore usabilità.** In questo caso si fa riferimento a un'applicazione web che sia fruibile da tutti i tipi di utenti destinatari grazie a delle prestazioni accettabili e a un'interfaccia in linea con lo scopo dell'applicazione. Infatti, come abbiamo analizzato nell'articolo precedente, sappiamo che non tutte le applicazioni sono uguali e questo dipende dal tipo di utente e dalla natura dell'applicazione stessa.

### Obiettivi di un Back End

Quando invece parliamo di **Back End**, il protagonista non sarà più l'utente bensì **i dati.** Di conseguenza anche l'obiettivo cambia e si sposta sul **garantire un'efficiente elaborazione dei dati** stessi. Ma cosa s'intende con tutto ciò? L'area del Back End si occupa di immagazzinare, elaborare e fornire i dati al Front End. Quindi avrà a che fare con sistemi di persistenza di dati, come ad esempio un database, e con la configurazione delle richieste al server, per permettere a un client di richiedere le risorse.

Se questo processo subisce un rallentamento, il Front End di conseguenza dovrà "intrattenere" l'utente. Ma come tutti noi ben sappiamo, la troppa attesa influisce sull'esperienza dell'utente!

Qui di seguito trovi uno schema riassuntivo degli  **obiettivi per ogni area**  per comprendere al meglio una delle differenze tra Front End e Back End.

Nello sviluppo del Front End:

-   **Protagonista**: l'utente;
-   **Obiettivo**: garantire la migliore usabilità.

Nello sviluppo del Back End:

-   **Protagonista**: l'utente;
-   **Obiettivo**: garantire un'efficiente elaborazione dei dati.

Adesso passiamo ai linguaggi utilizzati per scoprire un'altra delle differenze tra Front End e Back End.

## Linguaggi utilizzati

Tra le differenze tra Front End e Back End rientrano i linguaggi che erroneamente vengono definiti linguaggi di programmazione. Non tutti rientrano in questa categoria e adesso vediamo il perché.

Partiamo innanzitutto dal capire cos'è un linguaggio. Questo si presenta come una  **forma ben definita**  di trasmettere un'informazione all'ambiente di esecuzione del codice per compiere una determinata istruzione.

Ne esistono diversi e differiscono in base ai seguenti fattori:

-  **Ambiente di esecuzione**: server, browser o mobile;  
-  **Tipo del linguaggio:** linguaggio di programmazione, di markup, per fogli di stile e per richieste strutturate (ne esistono tanti altri);  
-  **Scopo e funzionalità**: utilizzo finale del linguaggio e funzionalità.

Possiamo sostenere che ogni area di programmazione, in base all'ambiente di esecuzione e allo scopo, adotterà uno o più linguaggi. E adesso vediamo quali e per cosa vengono utilizzati.  

### Linguaggi Front End

I linguaggi utilizzati nel Front End verranno eseguiti dal  **browser**, che possiamo definire come un contenitore. Tra questi individuiamo:

- **HTML**: è un **linguaggio di markup** utilizzato per creare lo **scheletro** di una pagina web.  
- **CSS**: è un **linguaggio per fogli di stile** che descrive lo **stile** degli elementi di una pagina web.  
- **JavaScript**: è un **linguaggio di programmazione** che rende **interattivo** un sito web, consentendo all'utente di interagire con i componenti del layout e permettendo alla pagina web di effettuare altre operazioni quando l'utente naviga.

Come puoi vedere ho annotato diverse categorie, e **non tutti i linguaggi sono di programmazione**. Questo perché un  **linguaggio di programmazione**  deve essere  **compilato**  o  **interpretato**  per essere chiamato tale. Magari scriverò qualche articolo sui diversi tipi di linguaggi per approfondire.

Per adesso ci serve sapere che non tutti i linguaggi nel mondo della programmazione e dello sviluppo di un software sono chiamati linguaggi di programmazione. Suona strano ma è così!

### Linguaggi Back End

Per quanto riguarda il **Back End** i linguaggi più diffusi sono proprio quelli di programmazione e quelli più usati sono i seguenti: **Java,** **Python, PHP, .Net, C#, C++, Ruby** e  **JavaScript!**  Ebbene sì, anche JavaScript è un linguaggio lato server se eseguito all'interno di  **NodeJS**. Approfondiremo questo argomento in un altro articolo!

I linguaggi eseguiti lato server possono  **accedere**  alle  **risorse**  del sistema che esegue il codice, ovvero l'ambiente di esecuzione, a differenza dei linguaggi che vengono eseguiti dal browser che non hanno la stessa funzionalità.

Ma ne esistono anche altri tipi come  **SQL** utilizzato  per effettuare  **richieste strutturate**  a un database  **relazionale**, quando dobbiamo interrogare il database per ottenere dei dati immagazzinati.

Terminata l'analisi dei  **linguaggi**, possiamo confermare che rientrano tra le principali  **differenze tra Front End e Back End**, in base al loro  **tipo**  e al loro  **scopo**: accedere al _file system_, creare un server, definire lo stile di una pagina o gestire l'interazione con l'utente.

Approfondite le differenze tra i tipi di linguaggi, passiamo adesso alle competenze che ogni developer deve avere nella sua area per aggiungere un altro tassello alle differenze tra Front End e Back End.

## Competenze Front End e Back End  

Come abbiamo appena visto, gli **obiettivi** e i **linguaggi** sono già due importanti variabili quando analizziamo le differenze tra Front End e Back End. L'unione di questi due fattori ci fa intuire che anche le  **competenze**,  e quindi le abilità del Front End Developer e del Back End Developer, saranno un po' diverse.

Per la natura del Front End si richiederà:

-   **Estro**:  devi intuire se una funzionalità può andare bene anche dal punto di vista  dell'utente;
-   **Pazienza**: ti servirà quando tratterai la compatibilità tra i browser;
-   **Flessibilità**: il cambiamento e gli aggiornamenti di tecnologie e ambienti di esecuzione sono dietro l'angolo;
-   **Algoritmi**: si richiede una conoscenza dei principali algoritmi  di  ricerca e ordinamento. Non ti preoccupare perché sarà un livello base e poi dipende molto dal tipo di applicazione;
-   **Reti**: una buona conoscenza di come funziona Internet e dei principali protocolli non fa mai male anche se è richiesto un livello base (a mio parere sbagliato) per intraprendere questo tipo di carriera. Tuttavia, devi riconoscere i diversi tipi di API, le principali risposte del server e sapere i fondamenti di Internet. Nel mio corso per diventare Front End ho dedicato qualche video a tutto questo.

Il  Back End invece sarà per chi vuole dedicarsi di più alla  **manipolazione dei dati**  e richiederà:

-   **Database**: sapere i principali modelli di database (relazionali, non relazionali, ecc.) e quali linguaggi utilizzano;
-   **Algoritmi**: la conoscenza dei principali algoritmi di ordinamento e ricerca è fondamentale per la manipolazione dei dati;
-   **Reti**: approfondire questo tema è molto importante. Un Back End Developer riconosce i diversi tipi di API per una scelta più precisa quando si dovrà progettare la comunicazione con un client;
-   **Sistema**: conoscere i principali sistemi operativi è altrettanto importante perché sono l'ambiente di esecuzione del codice lato server. Quindi una conoscenza dei comandi Linux ad esempio aiuterà molto.

Potrebbero rientrare tante altre competenze ma queste ti permettono di individuare quali sono le principali richieste da ogni area.  

Tuttavia, a me non piace tanto categorizzare e quando si parla di conoscenze mi reputo più trasversale, evitando i cosìddetti  _silos._ Infatti, uno sviluppatore dovrebbe interessarsi anche alle sfere che non sono di sua competenza, pur limitandosi a un approccio più superficiale. Ad esempio, è necessario che un Front End developer conosca i principali database anche se un Back End developer avrà più esperienza e più abilità.

Questo concetto risulta molto importante sia quando si affrontano argomenti informali sia quando si progetta un'applicazione, momento in cui i due sviluppatori devono interagire e potersi comprendere.

Abbiamo appena aggiunto un altro tassello al nostro puzzle chiamato "differenze tra Front End e Back End", nonostante preferisca le conoscenze trasversali a quelle verticali. Adesso passiamo alle attività che svolgono le due aree per completare quest'analisi.

## Quali sono le task di un Front End e di un Back End?

Non è semplice individuare le attività svolte da ogni singola area perché tutto dipende dal tipo di applicazione e da molti altri fattori. Per questo mi limiterò a un approccio  generico.

Da quanto abbiamo appreso, dalla natura di ogni area è possibile individuare le seguenti attività per il Front End developer:

-   **Design**: costantemente si ricerca una migliore usabilità della piattaforma, identificando nuovi sviluppi per migliorare l'interfaccia e renderla più fruibile;
-   **Performance**: la chiave del successo della maggior parte delle applicazioni risiede nella velocità. Una rapida esecuzione delle istruzioni rende l'esperienza dell'utente meno stressante.  
    
-   **Search Engine Optimization (SEO)**: il costante aggiornamento delle regole del  **SEO** obbliga lo sviluppatore a ricercare nuove soluzioni per un migliore posizionamento della pagina web all'interno dei motori di ricerca. Questo sempre che si tratti di una pagina web!
-   **Progettazione**: una parte molto importante durante la quale si studiano le tecnologie candidate per lo sviluppo di una nuova applicazione o per un aggiornamento;
-   **Manutenzione**: ogni applicazione ha bisogno di essere aggiornata per migliorare la sua stabilità a seguito di correzioni di bug;
-   **Ricerca e sviluppo**: non esiste progresso senza innovazione. Ogni buon developer deve stare al passo  per poter contribuire in modo positivo al successo dell'applicazione che sta sviluppando, integrando nuove soluzioni o migliorando le esistenti.

Per quanto concerne il Back End developer:

-   **Performance**: l'elaborazione dei dati deve essere efficiente, con il minor tempo possibile di esecuzione. Rientra quindi una costante ricerca di come poter migliorare gli algoritmi;
-   **Progettazione**: quando si parla di una nuova applicazione, il Back End developer deve fornire la sua esperienza per individuare la migliore architettura per la comunicazione client-server, per il database e per l'elaborazione dei dati;  
-   **Manutenzione**: in questo caso l'attività è la stessa di qualsiasi altro sviluppatore, ovvero aggiornamento dell'applicazione a seguito di bug o nuove versioni delle tecnologie;  
-   **Ricerca e sviluppo**: anche qui, possiamo far riferimento a quanto detto nella parte del Front End, cioè ricerca delle nuove soluzioni per migliorare il prodotto finale.  

E con questo concludiamo la nostra avventura nell'analisi delle differenze tra Front End e Back End. Abbiamo analizzato gli obiettivi, i linguaggi utilizzati, le competenze e infine le attività che svolgono queste due aree.

Se stai cercando una risposta alla domanda "quale area fa per me?", sappi che purtroppo non esiste una risposta certa ma posso guidarti attraverso questa immagine:

![Differenze tra Front End e Back End: personalità](https://res.cloudinary.com/flaco-dev/image/upload/v1637080926/differenze_tra_front_end_e_back_end_personalita_77478f7629.png)

> Nel caso in cui ti abbia colpito il lavoro di un Front End Developer e sei interessato/a a iniziare una **nuova carriera come Front End developer**, posso aiutarti. Ho creato un **corso** per realizzare il tuo desiderio di diventare Front End Developer o per approfondire il linguaggio di programmazione JavaScript con maggiori dettagli. **[Acquista il corso completo qui](https://www.frontendpills.it/corso-front-end-developer-2021?coupon=FRONTENDPILLER_40)** adesso con il **40% di sconto**. Sarà un viaggio dalle **basi** di **JavaScript** fino ad un **livello** più avanzato. Parleremo di **testing**, del protocollo **HTTP**, delle diverse versioni di **ECMAScript** e tante altre cose che puoi consultare sulla web. Nella versione completa avrai la mia **assistenza** a disposizione, tanti **quiz**, il **materiale in PDF** e un **meeting finale**. Se non fossi interessato/a alla versione completa, avrai la possibilità di acquistare la versione più economica che non comprende questi ultimi citati vantaggi. **[Acquista la versione Basic qui](https://www.frontendpills.it/corso-front-end-developer-2021-basic)**.

Anche questa volta ti ricordo che se ti è piaciuto questo articolo e vuoi **supportarmi**, puoi seguire questi semplici passaggi **facili e gratuiti**:
  
1. **Lascia un mi piace** cliccando sull'icona del cuore qui sotto;  
2. **Condividi** questo post sui tuoi account social o con i tuoi amici;  
3. **Seguimi** su [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) e su [Github](https://github.com/flaviocolonna);  
4. **Iscriviti alla newsletter** qui sotto per non perderti nessun articolo, sconto o gossip (ce ne saranno tanti).  
  
Grazie mille per l'attenzione e ti auguro una buona giornata!

large_differenze-tra-front-end-e-back-end.jpg

medium_differenze-tra-front-end-e-back-end.jpg

small_differenze-tra-front-end-e-back-end.jpg

thumbnail_differenze-tra-front-end-e-back-end.jpg

large_differenze-tra-front-end-e-back-end.png

medium_differenze-tra-front-end-e-back-end.png

small_differenze-tra-front-end-e-back-end.png

thumbnail_differenze-tra-front-end-e-back-end.png

large_differenze-tra-front-end-e-back-end.webp

medium_differenze-tra-front-end-e-back-end.webp

small_differenze-tra-front-end-e-back-end.webp

thumbnail_differenze-tra-front-end-e-back-end.webp

Scopri le differenze tra Front End e Back End: gli obiettivi, i linguaggi utilizzati, le competenze e le attività che svolgono.

Differenze tra Front end e Back end: scopri cosa fa per te.

Differenze tra Front End e Back End: obiettivi, linguaggi, competenze e attività.

Quando devo spiegare il mio lavoro a qualcuno che non è un tecnico di solito rispondo dicendo: creo siti web. Il risultato? L'altra persona pensa che crei blog e altre cose facili. Un po' riduttivo dal mio punto di vista.  
Quindi, in questo articolo, ho deciso di spiegare nel modo più semplice cosa fa un Front End developer, in pratica il mio lavoro.

Ma prima di iniziare mi sembra doveroso spiegare cos'è un sito web, altrimenti sarebbe come capire chi è un meccanico senza sapere cos'è un'auto.  

## Cos'è un sito web?  

Ci sono così tanti siti web in giro, ma sei sicuro di sapere chi li costruisce e quali siano i suoi compiti? Sapresti elencare i linguaggi utilizzati per sviluppare un sito web e come viene strutturato?  

Un  **sito web**  è una  **raccolta**  di  **pagine**  web interconnesse e di  **contenuti**  correlati,  **identificati**  sotto un comune  **dominio**. Può essere pubblico o privato.  

Ad esempio, questo blog è un sito web  **pubblico** all'interno del quale si possono trovare articoli, immagini e altre pagine web. Sono tutti disponibili sotto il dominio  **flaco.dev**. 

Adesso sappiamo cos'è un sito web ma, prima di conoscere cosa fa un Front End developer, dobbiamo capire com'è strutturato un sito web.

## Com`è strutturato un sito web?

Un sito web è composto da due parti principali: il Front End e il Back End.  

Il  **Back End**  è incaricato di  **elaborare**,  **memorizzare** e  **servire**  i  **dati**  di un sito web. Puoi pensare a un modulo per effettuare l'accesso o la registrazione a una piattaforma. In questo caso, l'email e la password sono gestite dal Back End.  

Il  **Front End** invece ha il compito di  **rappresentare** i  **dati** all'utente finale, sviluppando il **layout** che renda l'interfaccia utente più gradevole (almeno per alcuni siti web). È abbastanza facile capire la differenza ad alto livello e non mi dilungherò nello spiegare altre differenze come linguaggi di programmazione e così via. Oggi ci concentriamo sul Front End.
  
![Front-end vs back-end](https://res.cloudinary.com/flaco-dev/image/upload/v1636123151/front_end_vs_back_end_cropped_1b37588b09.png)  

Quindi, ora che sappiamo com'è la struttura di un sito web, vediamo finalmente cosa fa un Front End developer durante la sua routine.

## Cosa fa un Front End developer

Come abbiamo già accennato un Front End developer crea principalmente il layout di un sito web per rappresentare i dati all'utente finale.  

Quindi il processo di base sarà il seguente: ottenere i dati dal Back End, costruire il layout e **rendere la pagina interattiva per l'utente**. Tuttavia non è così semplice e adesso vediamo il perché.  

I linguaggi utilizzati per costruire un sito web sono i seguenti:  
  
-  **HTML**: è un  **linguaggio di markup**  utilizzato per creare lo  **scheletro** di una pagina web.  
-  **CSS**: è un  **linguaggio per fogli di stile** che descrive lo stile degli elementi di una pagina web.  
-  **JavaScript**: è un  **linguaggio di programmazione** che rende  **interattivo** un sito web, consentendo all'utente di interagire con i componenti del layout e permettendo alla pagina web di effettuare altre operazioni quando l'utente naviga.  
  
![Differenza tra HTML, CSS e JavaScript](https://res.cloudinary.com/flaco-dev/image/upload/v1636123151/html_css_javascript_description_cropped_b68aa408c9.png)  

Quindi per rispondere alla domanda cosa fa un Front End developer possiamo affermare quanto segue: un Front End developer è la persona che **costruisce il layout di un sito web** per presentare nel modo migliore le informazioni richieste dall'utente. Ma cosa significa nel modo migliore? Per capirlo ti spiegherò di quali sono le attività di un Front End developer.

## Quali sono i compiti di un Front End developer?

Non è facile rispondere a questa domanda, in quanto esistono diversi tipi di siti web costruiti in vari modi a seconda di alcune variabili. Qui possiamo elencare due delle più importanti:  

-  **Cliente**: è un sito web privato o aziendale? Il mio blog ad esempio è totalmente diverso rispetto ad Amazon.  
-  **Utente finale**: chi è il mio utente finale? Capire questo è fondamentale perché può dare informazioni su se il sito web debba essere tradotto o se debba essere  **accessibile** a chiunque. Inoltre, quali sono i dispositivi utilizzati dall'utente? Che dispositivo utilizzerà? Avrà una connessione internet veloce o lenta? Questo può influenzare l'esperienza dell'utente.  

Da tutto ciò si può dedurre che i siti web non sono tutti uguali.  
Quindi, a seconda di questi fattori, un Front End developer si occuperà di diverse attività, ovvero:  

-  **Prestazioni**: ogni millisecondo conta e ogni ritardo può causare grandi perdite alle aziende. Un Front End developer adatta il sito web per soddisfare i requisiti di prestazioni del cliente, occupandosi di immagini pesanti o di operazioni che richiedono molto tempo;  
-  **Esperienza utente e interfaccia utente**: uno dei compiti più importanti è fornire un sito web comprensibile e  **facile da usare**. L'utente finale non dovrebbe leggere un manuale per utilizzare il sito web. Per cui, è compito di un Front End developer creare un layout chiaro, rispettando tutti i  **principi dell'esperienza utente** (dimensioni dei pulsanti, dimensione del testo e molti altri). Questo è allineato con un bell'aspetto del sito web, chiamato  **interfaccia utente**. La definizione dello stile (design) è uno dei processi in cui un Front End developer è spesso coinvolto;  
-  **Search Engine Optimization (SEO)**: il sito web deve apparire prima della concorrenza nei motori di ricerca? Sì! Un Front End developer dovrebbe conoscere alcune tecniche della **SEO**  per aumentare la visibilità del sito web che sta costruendo;  
-  **Compatibilità**: l'utente finale utilizzerà Firefox, Chrome, Safari, Microsoft Edge, Opera o Internet Explorer (spero di no!)? Questi sono solo alcuni dei browser utilizzati in tutto il mondo e potrebbero far apparire la pagina in modo diverso. Un Front End developer verifica per ogni browser la sua versione e il dispositivo utilizzato. Lo sviluppatore deve assicurarsi che il sito web funzioni correttamente su ogni browser e su ogni dispositivo che è incluso nella  **matrice di compatibilità**. Questa verrà consegnata dal cliente, se si tratta di un'azienda. In caso contrario, è necessario scegliere in base ai browser e ai dispositivi più utilizzati nel Paese in cui viene pubblicato il sito web;  
-  **Riutilizzabilità**: un bravo Front End developer fornisce un codice comprensibile e riutilizzabile. Se a un certo punto lo sviluppatore non lavorerà più con il suo cliente, il prossimo Front End dovrebbe poter continuare lo sviluppo senza problemi. In caso contrario, il primo Front End developer non avrà una buona reputazione;  
-  **Internazionalizzazione**: un sito web può essere consegnato localizzato in un'unica lingua o essere multilingua. Il Front End developer si occupa del routing e della traduzione dei contenuti. Si tratta di un sito in arabo? In questo caso anche il layout deve cambiare, da destra a sinistra. Posso assicurarti che non è affatto facile;  
-  **Accessibilità**: immagina un negozio che vorrebbe essere aperto a tutti ma che non ha una rampa per una persona con disabilità. Sta limitando il servizio che offre. Un sito web funziona allo stesso modo. Uno sviluppatore Front End verifica che il sito web sia accessibile a persone che non sanno leggere bene, che utilizzano lettori di schermo e così via. Ad esempio, i siti della pubblica amministrazione  devono essere  **accessibili**;
-  **Prezzi**: in caso di libero professionista, lo sviluppatore trova soluzioni convenienti a seconda del cliente. Ad esempio, non utilizzare tecnologie di prim'ordine per un semplice blog. Un cliente deve essere soddisfatto del tuo lavoro anche a livello di prezzo.

Ora che sai cosa fa un Front End developer, quali sono i suoi compiti e quali linguaggi vengono utilizzati per creare un sito web, sei pronto per affrontare le differenze tra Back End e Front End in modo più specifico leggendo [questo](https://www.flaco.dev/it/blog/differenze-tra-front-end-e-back-end) articolo.

Se qualcuno adesso dovesse chiedermi di nuovo cosa fa un Front End developer, gli farò leggere questo breve sunto. Tu potrai fare lo stesso!  

> Nel caso in cui sei rimasto/a affascinato/a dal lavoro di un Front End developer e sei interessato/a a iniziare una **nuova carriera come Front End developer**, posso aiutarti. Ho creato un **corso** per aiutarti a diventare Front End Developer o per approfondire il linguaggio di programmazione JavaScript con maggiori dettagli. **[Compra il corso completo qui](https://www.frontendpills.it/corso-front-end-developer-2021?coupon=FRONTENDPILLER_40)** adesso con il **40% di sconto**. I contenuti partiranno dalle **basi** di **JavaScript** fino ad un **livello** più avanzato. Parleremo di **testing**, del protocollo **HTTP**, delle diverse versioni di **ECMAScript** e tante altre cose che puoi consultare sulla web. Nella versione completa avrai la mia **assistenza** a disposizione, tanti **quiz**, il **materiale in PDF** e un **meeting finale**. Se non fossi interessato alla versione completa, avrai la possibilità di acquistare la versione più economica che non comprende questi ultimi citati vantaggi. Puoi **[acquistare la versione Basic qui](https://www.frontendpills.it/corso-front-end-developer-2021-basic)**.

Se vuoi che io risponda a qualche altro dubbio, basta andare alla pagina dei contatti [qui](/it/contatti) e inviarmi una richiesta selezionando "Diventare Front End developer" come oggetto.

Ora è il momento di concludere. Ti ricordo che se ti è piaciuto questo articolo e vuoi  **supportarmi**, puoi seguire questi semplici passaggi  **facili e gratuiti**:  

1.  **Lascia un mi piace**  cliccando sull'icona del cuore qui sotto;  
2.  **Condividi** questo post sui tuoi account social o con i tuoi amici;  
3.  **Seguimi**  su [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) e su [Github](https://github.com/flaviocolonna);  
4.  **Iscriviti alla newsletter** qui sotto per non perderti nessun articolo, sconto o gossip (ce ne saranno tanti).  

Grazie mille per l'attenzione e vi auguro una buona giornata!

large_what-does-a-front-end-developer-do.jpeg

medium_what-does-a-front-end-developer-do.jpeg

small_what-does-a-front-end-developer-do.jpeg

thumbnail_what-does-a-front-end-developer-do.jpeg

large_what-does-a-front-end-developer-do.png

medium_what-does-a-front-end-developer-do.png

small_what-does-a-front-end-developer-do.png

thumbnail_what-does-a-front-end-developer-do.png

large_what-does-a-front-end-developer-do.webp

medium_what-does-a-front-end-developer-do.webp

small_what-does-a-front-end-developer-do.webp

thumbnail_what-does-a-front-end-developer-do.webp

Scopri cosa fa un Front End developer, quali linguaggi di programmazione utilizza, quali sono le attività che svolge e quali abilità deve avere.

Cosa fa un Front End developer


Ciao e benvenuto nel mio blog di Front End!

Sono lieto di annunciare in questo articolo la mia nuova **avventura nella scrittura**.

Ma prima di parlare di quello che troverai in questo blog di Front End, perché dovresti seguirlo e perché non dovresti, ti rubo 1 minuto per presentarmi.

## Chi sono

Mi chiamo Flavio e sono un **Software Engineer**, di preciso uno sviluppatore JavaScript FullStack. Sono siciliano e lavoro a Barcellona.

Oltre al mio lavoro, mi dedico alla **creazione di contenuti digitali** e alla **creazione di corsi**.

Durante la mia carriera ho sviluppato diverse applicazioni basate su **JavaScript**: **web**, **mobile** e **server**.

Nel 2020 ho iniziato a voler condividere le mie esperienze e alcuni aneddoti inerenti il mondo del Front End con tutti gli altri sviluppatori, indistintamente dal loro livello. Per questo ho deciso di creare il mio **canale Instagram** chiamato [**@frontendpills**](https://www.instagram.com/frontendpills/). Ti consiglio di buttarci un occhio per vedere i contenuti di cui tratto.

In parallelo, la mia mente stava già lavorando alla creazione del mio primo **corso online**. Un'avventura molto impegnativa il cui obiettivo rimane tutt'ora aiutare le persone a diventare uno sviluppatore Front End. O perlomeno iniziarli in questa professione. Il corso è in italiano e disponibile sul [sito web di frontendpills](https://www.frontendpills.it/corso-front-end-developer-2021). Alcune volte mi diletto nel pubblicare alcuni workshops che mirano a far apprendere un argomento specifico nel più breve tempo possibile.

Ma adesso basta parlare di me e spostiamo i riflettori su questo nuovo blog. Tuttavia, se volessi comunque conoscermi di più, visita [questa sezione](/about).

## Perché un nuovo blog di Front End?

Il blog è stato creato per condividere un contenuto più internazionale e vario, che spazi dal lato tecnico a quello delle *soft-skills*. Cercherò di utilizzare un linguaggio tecnico ma allo stesso tempo comprensibile a tutti, anche ai neofiti.

Questa piattaforma offrirà un contenuto a 360 gradi, che non sia solo relativo al Front End.

Per questo includerà **mentoring**, notizie sui nuovi **strumenti per sviluppatori** o sugli **aggiornamenti dei software** utilizzati da noi programmatori, oltre ai classici articoli tecnici.  

All'interno potrai trovare un modulo di contatto per prenotare una **consulenza privata** su diversi argomenti, o se volessi collaborare con me per costruire o ottimizzare qualsiasi sito web. Potrai anche utilizzarlo per chiedermi delle informazioni più generali.

L'obiettivo principale è fornire i migliori strumenti per **iniziare una nuova carriera nel Front End** e come continuare su questa strada, seguendo il miglior percorso per ottenere il tuo primo lavoro o per migliorare le tue capacità nel minor tempo possibile.

## Quale sarà il contenuto di questo blog?

Riassumendo, ecco a grandi linee di cosa parleremo in questo blog:
- Come iniziare una carriera nel Front End: segreti e consigli;
- Il mondo di JavaScript: aneddoti e come creare applicazioni web, mobile e server basate su questo linguaggio di programmazione;
- Approfondimenti e aggiornamenti su ECMAScript, ambienti di sviluppo, browsers e quant'altro;
- Come impostare un progetto nel Front End e come gestirlo;
- Come scrivere il proprio curriculum tecnico e come presentarsi a un colloquio;
- Come migliorare le proprie qualità di programmatore e avanzare di posizione. 

A questo punto ti ho spiegato i punti principali di questo blog e cosa offre. Avrai già capito se ti può tornare utile e se continuerai a leggerlo.
In caso contrario, concentrati su cosa ti sto per dire nel paragrafo seguente.

## Perché non seguire questo blog

Sembra strano ma alcune volte è più semplice riflettere sui lati negativi. Ci sono tanti blog in giro e ti potresti chiedere come questo possa essere diverso. Di seguito troverai tanti buoni motivi secondo i quali questo blog non farebbe per te:

- Se pensi di trovare una soluzione diretta a quello che cerchi, eseguendo un semplice *copy and paste*. Nei miei articoli troverai prima di tutto la spiegazione alle implementazioni con eventuali opzioni. Il mio obiettivo è far comprendere il *perché* e non fornire un codice senza una minima riflessione;
- Se pensi che tutto sia dovuto e gratis, questo posto non fa per te. La fatica c'è, non sempre sarò puntuale con le pubblicazioni, i corsi sono a pagamento e gli articoli necessitano di un semplice *like* per farmi andare avanti;
- I contenuti possono essere impegnativi alle volte. Non esiste una scorciatoia. Ci vuole tempo, pazienza e costanza per apprendere. Se non hai queste qualità, allora credo che anche questa volta questo posto non faccia per te.

Spero che non rientri tra i punti elencati. In questo caso sei una persona che ha voglia di imparare e soprattutto di migliorare. Continua a leggere per scoprire perché ho scelto *flaco.dev*.

## Perché flaco.dev

Si chiama *flaco* principalmente perché sono magro e *flaco* è la sua traduzione spagnola, dato che vivo a Barcellona. Ma potrebbe essere anche la parziale fusione del mio nome e del mio cognome in quanto faccio Colonna come cognome. Lascio decidere a te!

## Come supportarmi

Nel caso in cui diventassi un lettore di questa piattaforma, ti chiedo di compiere delle piccole azioni per supportarmi, tra le quali:

- Lascia un mi piace;
- Lascia un commento;
- Condividi l'articolo;
- Diffondi la voce parlandone con i tuoi amici.

## Connettiamoci

Se invece desideri connetterti con me, puoi visitare il mio [profilo LinkedIn](https://www.linkedin.com/in/flaviocolonnaromano/), o mi puoi trovare anche su [Instagram](https://www.instagram.com/frontendpills/) o su [Facebook](https://www.facebook.com/frontendpills/).

## Iniziamo

Ora è il momento di iniziare! Mi aspetto di vederti in giro sulla piattaforma e per non perderti nessun nuovo articolo, iscriviti alla newsletter, anche per ricevere alcuni sconti per i corsi.

> Nel caso in cui sei affascinato/a dal lavoro di un Front End Developer e vorresti iniziare una **nuova carriera come Front End developer**, posso aiutarti. Ho creato un **corso** per aiutarti a diventare Front End Developer o per entrare nei dettagli del linguaggio di programmazione JavaScript. **[Compra il corso completo qui](https://www.frontendpills.it/corso-front-end-developer-2021?coupon=FRONTENDPILLER_40)** adesso con il **40% di sconto**. I contenuti partiranno dalle **basi** di **JavaScript** fino ad un **livello** più avanzato. Parleremo di **testing**, del protocollo **HTTP**, delle diverse versioni di **ECMAScript** e tante altre cose che puoi consultare sulla web. Nella versione completa avrai la mia **assistenza** a disposizione, tanti **quiz**, il **materiale in PDF** e un **meeting finale**. Se non fossi interessato/a alla versione completa, avrai la possibilità di acquistare la versione più economica che non comprende questi ultimi citati vantaggi. Puoi **[acquistare la versione Basic qui](https://www.frontendpills.it/corso-front-end-developer-2021-basic)**.

È stato un piacere presentarti il ​​mio blog e ti ringrazio per la lettura!

Saluti,\
Il Flaco

large_first-article-image.jpg

medium_first-article-image.jpg

small_first-article-image.jpg

thumbnail_first-article-image.jpg

large_first-article-image.png

medium_first-article-image.png

small_first-article-image.png

thumbnail_first-article-image.png

large_first-article-image.webp

medium_first-article-image.webp

small_first-article-image.webp

thumbnail_first-article-image.webp

Scopri i tipi di contenuti che verranno pubblicati in questo blog di Front End e leggi i motivi per i quali dovresti seguirlo e perché non dovresti.

Un nuovo blog di Front End: perché dovresti leggerlo e perché no.

Troppi blog in giro, e qui ce n'è uno in più. Ma questo cambierà la tua mentalità.

large_corso-frontend-developer-2022-basic.jpg

medium_corso-frontend-developer-2022-basic.jpg

small_corso-frontend-developer-2022-basic.jpg

thumbnail_corso-frontend-developer-2022-basic.jpg

large_corso-frontend-developer-2022-basic.png

medium_corso-frontend-developer-2022-basic.png

small_corso-frontend-developer-2022-basic.png

thumbnail_corso-frontend-developer-2022-basic.png

large_corso-frontend-developer-2022-basic.webp

medium_corso-frontend-developer-2022-basic.webp

small_corso-frontend-developer-2022-basic.webp

thumbnail_corso-frontend-developer-2022-basic.webp

Questo corso per Front End Developer ti permette di apprendere le basi di JavaScript, HTML e CSS fino a un livello avanzato. Vedremo tutte le versioni di ECMAScript, Babel, Gulp, Browserify, NodeJS, NPM, Git, ESLint e Prettier.

Corso Front End Developer

Impara e rafforza le tue conoscenze relative a JavaScript ad un livello professionale. Attraverso la creazione di un progetto da zero, un portafoglio virtuale, scopriremo le tecnologie per creare e mantenere una piattaforma WEB.

Benvenuto nella casa del Flaco.

Ultimi Articoli

Il Front End Developer Roadmap 2022

Cosa sono i Web Components e come implementarli

Cos'è React Remix? Un nuovo framework React

Differenze tra Front End e Back End: obiettivi, linguaggi, competenze e attività.

Cosa fa un Front End developer

Un nuovo blog di Front End: perché dovresti leggerlo e perché no.

Categorie

Corsi disponibili

Corso Front End Developer (Basic)

Corso Front End Developer

Newsletter

Cosa sono i Web Components e come implementarli

Un nuovo blog di Front End: perché dovresti leggerlo e perché no.

Cos'è React Remix? Un nuovo framework React

Differenze tra Front End e Back End: obiettivi, linguaggi, competenze e attività.

Il Front End Developer Roadmap 2022

Newsletter