Nell'ultimo articolo abbiamo parlato di come intraprendere la carriera da web developer, [analizzando la carriera universitaria o un coding bootcamp](https://flaco.dev/it/blog/coding-bootcamp-vs-laurea-informatica). Tuttavia, mentre noi apprendiamo le basi dello sviluppo Frontend, JavaScript continua ad evolversi, ed è giunto il momento quindi di scoprire le novità di ECMAScript 15 (o ES2024 o ES15). ES15 introduce funzionalità ancora più interessanti per rendere il tuo codice più pulito, veloce e manutenibile, quindi ho deciso di illustrare le novità di ECMAScript 15 che devi conoscere, insieme a esempi pratici per aiutarti ad applicarle nella programmazione reale. Sei pronto a diventare un Frontend Developer migliore?

## Le novità di ECMAScript 15: l'Operatore Pipeline

L'**operatore pipeline** è una delle funzionalità più attese di ECMAScript 15. Permette di creare catene di chiamate di funzioni più leggibili, specialmente quando le funzioni devono essere applicate in sequenza.

Invece di annidare multiple funzioni, l'operatore pipeline rende il tuo codice più facile da seguire concatenando le chiamate delle funzioni in modo più naturale.

```javascript
const double = (x) => x * 2;
const increment = (x) => x + 1;

let result = 5
  |> increment
  |> double;

console.log(result); // Output: 12
```

Qui, `5` viene passato prima attraverso la funzione `increment` e poi attraverso la funzione `double`, tutto in una sequenza chiara e leggibile. Questo operatore riduce la necessità di chiamate di funzioni profondamente annidate, rendendo il codice molto più gestibile.

## Le novità di ECMAScript 15: le espressioni do

L'**espressione do** permette di eseguire blocchi di codice come espressioni e restituire un valore da essi. Questo è utile quando hai bisogno di logica condizionale o calcoli in linea.

```javascript
let value = do {
  if (someCondition) {
    'Success';
  } else {
    'Failure';
  }
};

console.log(value); // Output: 'Success' or 'Failure'
```

In questo modo, invece dei tradizionali condizionali, le espressioni `do` permettono espressioni flessibili basate su blocchi con un valore restituito.

## Le novità di ECMAScript 15: async context manager

Un'altra grande novità introdotta in ECMAScript 15 è il **gestore di contesto asincrono**, o **async context manager**. Semplifica la gestione delle risorse nelle operazioni asincrone. È ispirato allo statement `with` di Python e aiuta a gestire risorse come file handle, connessioni database e stream di rete, garantendo una corretta pulizia.

```javascript
async with (const db = await connectToDatabase()) {
  await db.query('SELECT * FROM users');
}
// Chiude automaticamente la connessione al database dopo il blocco
```

Questo rende più semplice la gestione delle risorse in un ambiente asincrono, riducendo il codice boilerplate come la chiusura manuale delle connessioni.

## Le novità di ECMAScript 15: metodi array immutabili

ECMAScript 15 introduce **metodi non mutanti** per gli array: `toSorted`, `toReversed`, e `toSpliced`. Questi metodi restituiscono un nuovo array senza alterare l'array originale, supportando l'**immutabilità**, che è cruciale nella programmazione funzionale.

```javascript
let numbers = [4, 2, 7, 1];

// Non-mutating methods
let sorted = numbers.toSorted();
let reversed = numbers.toReversed();
let spliced = numbers.toSpliced(1, 2);

console.log(sorted); // Output: [1, 2, 4, 7]
console.log(reversed); // Output: [1, 7, 2, 4]
console.log(spliced); // Output: [4, 1]
console.log(numbers); // Array originale immutato: [4, 2, 7, 1]
```

## Le novità di ECMAScript 15: symbol metadata per il Metaprogramming

Con **Symbol.metadata**, ECMAScript 15 migliora il metaprogramming permettendo agli sviluppatori di allegare e recuperare metadati da/verso membri e metodi delle classi.

```javascript
class MyClass {
  @Reflect.metadata('role', 'admin')
  doSomething() {}
}

const metadata = Reflect.getMetadata('role', MyClass.prototype, 'doSomething');
console.log(metadata); // Output: 'admin'
``` 

Questa nuova funzionalità permette una riflessione dinamica e capacità di metaprogramming più sofisticate.

## Le novità di ECMAScript 15: Promise.withResolvers()

Infine, abbiamo una novità davvero interessante riguardo le Promise: **Promise.withResolvers()**. Questo metodo semplifica la gestione delle promise restituendo sia la promise che le sue funzioni `resolve` e `reject`.

```javascript
const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve('Data loaded!'), 2000);

promise.then((message) => {
  console.log(message); // Output: 'Data loaded!'
});
```

Questo elimina la necessità di definire `resolve` e `reject` separatamente, rendendo più pulito il codice basato su promise.

## Le novità di ECMAScript 15: raggruppamento array

Grandi miglioramenti anche sul fronte degli array con nuovi metodi di raggruppamento: `groupBy` e `groupByToMap`.

Con il nuovo metodo **`groupBy`**, puoi raggruppare elementi dell'array basandoti su un criterio, creando un modo più intuitivo per lavorare con grandi set di dati.

```javascript
const items = [
  { type: 'fruit', name: 'apple' },
  { type: 'vegetable', name: 'carrot' },
  { type: 'fruit', name: 'banana' }
];

const grouped = Array.groupBy(items, item => item.type);
console.log(grouped);
// Output: { fruit: [{...}, {...}], vegetable: [{...}] }
```

Questa funzionalità semplifica le operazioni di raggruppamento senza dover ciclare manualmente attraverso i dati.

## Le novità di ECMAScript 15: i Decoratori

Finalmente abbiamo i **Decoratori** in JavaScript grazie a ECMAScript 15, che permettono di aggiungere comportamenti o modificare classi/metodi in modo dichiarativo. Sarà un vero cambiamento nel tuo codice.

```javascript
function logMethod(target, key, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Called ${key} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class Car {
  @logMethod
  drive(speed) {
    console.log(`Driving at ${speed} km/h`);
  }
}

const myCar = new Car();
myCar.drive(100);
// Output: "Called drive with arguments: 100"
//         "Driving at 100 km/h"
```

> 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)**.

## Riepilogo delle novità di ECMAScript 15

**ECMAScript 15** è ricco di novità come l'**operatore pipeline**, le espressioni `do`, la gestione delle risorse asincrone, i metodi array immutabili e molto altro. Queste funzionalità migliorano JavaScript riducendo la complessità, migliorando la leggibilità e supportando l'immutabilità e il metaprogramming.

Che tu stia lavorando con le promise, gestendo operazioni asincrone o raggruppando dati, questi nuovi strumenti offrono soluzioni più pulite ed efficienti. Rimani aggiornato, inizia a incorporare queste funzionalità nei tuoi progetti e sorprendi i tuoi colleghi!

Se pensi che l'articolo abbia un buon contenuto e abbia raggiunto l'obiettivo di spiegare le differenze tra il debounce e il throttle di una funzione in JavaScript, 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).

Ti auguro tante altre buone letture!


large_es15.jpg

medium_es15.jpg

small_es15.jpg

thumbnail_es15.jpg

large_es15.png

medium_es15.png

small_es15.png

thumbnail_es15.png

large_es15.webp

medium_es15.webp

small_es15.webp

thumbnail_es15.webp

Esplora le principali novità di ECMAScript 15, tra cui operatori pipeline, espressioni do, gestori di contesto asincrono e molto altro. Impara attraverso esempi di codice dettagliati.

Le novità di ECMAScript 15 (2024): guida completa con esempi di codice

Scopri tutte le novità di ECMAScript 15 rilasciate nel 2024 con esempi di codice pratici

JavaScript fornisce strumenti potenti per gestire la frequenza con cui una funzione viene eseguita in risposta a interazioni degli utenti, come lo scroll, la digitazione o il ridimensionamento della finestra. Due di questi strumenti sono il **debounce** e il **throttle**. Questi concetti migliorano le prestazioni controllando la frequenza di esecuzione delle funzioni, soprattutto quando ci si trova a gestire eventi che si attivano frequentemente.

In questa guida, esploreremo cosa sono il **debounce** e il **throttle**, come implementarli e quando usare l’uno rispetto all’altro.

----------

## Cos'è il Debouncing in JavaScript?

Il **debounce** è una tecnica utilizzata in JavaScript per limitare la frequenza con cui una funzione può essere eseguita dopo una sequenza di eventi rapidi e continui. Garantisce che una funzione venga chiamata solo dopo che è trascorso un certo lasso di tempo senza che l'evento venga attivato di nuovo.

Il debouncing è particolarmente utile quando il gestore degli eventi viene invocato più volte in rapida successione (come i tasti premuti in una casella di ricerca) e si desidera agire solo quando l'utente smette di interagire.

### Caso d'uso del Debounce

Immagina un utente che digita in una barra di ricerca che attiva una chiamata API per recuperare i risultati. Senza il debounce, ogni singolo tasto invierebbe una richiesta, il che sarebbe inefficiente. Con il debounce, la richiesta verrà inviata solo dopo che l'utente smette di digitare per un certo periodo, evitando chiamate API inutili.

----------

## Come Ritardare una Funzione con il Debounce in JavaScript

### Implementazione del Debounce

Ecco un semplice esempio su come implementare manualmente il debounce in JavaScript.
```javascript
function debounce(func, delay) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

// Esempio d'uso:
const gestisciInput = () => {
    console.log('Recupero risultati di ricerca...');
};

const inputDebounced = debounce(gestisciInput, 300);

document.querySelector('input').addEventListener('input', inputDebounced);
```
In questo esempio:

-   La funzione `debounce` prende due argomenti: la funzione da debouncizzare e il ritardo in millisecondi.
-   `setTimeout` assicura che la funzione venga eseguita solo dopo che l'utente ha smesso di digitare per il tempo specificato (300ms).

### Utilizzo delle librerie per il Debounce

Librerie JavaScript come **Lodash** e **Underscore.js** forniscono funzioni di debounce predefinite che semplificano il processo.

**Esempio con Lodash**:

```javascript
const _ = require('lodash');

const gestisciInput = () => {
    console.log('Recupero risultati di ricerca...');
};

const inputDebounced = _.debounce(gestisciInput, 300);

document.querySelector('input').addEventListener('input', inputDebounced);
```
Con Lodash, la stessa funzionalità è ottenuta con meno righe di codice, fornendo al contempo compatibilità cross-browser.

----------

## Cos'è il Throttling in JavaScript?

Il **throttling** assicura che una funzione venga chiamata al massimo una volta in un periodo di tempo specificato, indipendentemente da quante volte l'evento viene attivato. Garantisce un flusso costante di esecuzioni a intervalli regolari, il che è particolarmente utile per eventi che possono essere attivati continuamente, come lo scroll o il ridimensionamento.

### Caso d'uso del Throttle

Immagina di voler monitorare quanto in basso è arrivato un utente su una pagina. Se aggiorni la posizione dello scroll ogni volta che l'evento viene attivato, potresti sovraccaricare il browser. Il throttling ti consente di misurare la posizione dello scroll a intervalli regolari (ad esempio, ogni 200ms) per evitare calcoli inutili.

----------

## Come limitare l'esecuzione di una funzione con il Throttle in JavaScript

### Implementazione del Throttle in JavaScript

Ecco come creare una funzione di throttle personalizzata in JavaScript:

```javascript
function throttle(func, limit) {
    let inThrottle;
    return function (...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// Esempio d'uso:
const tracciaScroll = () => {
    console.log('Tracciamento della posizione di scroll...');
};

const scrollThrottled = throttle(tracciaScroll, 200);

window.addEventListener('scroll', scrollThrottled);
```
In questa implementazione:

-   `throttle` prende la funzione e il limite di tempo (in millisecondi) come argomenti.
-   La funzione verrà eseguita solo una volta entro il limite definito (200ms), anche se l'evento di scroll viene attivato più volte.

### Utilizzo delle librerie per il Throttle in JavaScript

Simile al debounce, puoi usare **Lodash** o **Underscore.js** per implementare facilmente il throttling.

**Esempio con Lodash**:

```javascript
const scrollThrottled = _.throttle(() => {
    console.log('Tracciamento della posizione di scroll...');
}, 200);

window.addEventListener('scroll', scrollThrottled);
```
Questa versione garantisce che la funzione venga eseguita non più di una volta ogni 200ms, anche se l'utente continua a scorrere.

----------

## Qual è la differenza tra Debounce e Throttle in JavaScript?

**Debounce** e **throttle** sono entrambe tecniche utilizzate per controllare la frequenza di esecuzione delle funzioni in risposta a eventi rapidi, ma hanno scopi e comportamenti distinti.


| **Aspetto**        | **Debounce**                                                                                               | **Throttle**                                                                                     |
|--------------------|------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|
| **Scopo**          | Ritarda l'esecuzione della funzione fino a quando un certo tempo non è trascorso senza altri eventi.         | Garantisce l'esecuzione regolare della funzione ogni X millisecondi, indipendentemente dal numero di eventi. |
| **Migliori Casi d'Uso** | Validazione input, autocomplete di ricerca, ridimensionamento finestra.                                  | Tracciamento dello scroll, infinite scrolling, monitoraggio dei movimenti del mouse.              |
| **Come Funziona**  | La funzione viene chiamata solo una volta dopo che il flusso di eventi termina.                             | La funzione viene chiamata a intervalli regolari mentre gli eventi continuano a verificarsi.       |
| **Frequenza**      | La funzione viene chiamata _dopo_ che la sequenza di eventi termina.                                        | La funzione viene chiamata _a intervalli regolari_ mentre gli eventi sono ancora in corso.        |
| **Esempio**        | Digitazione in una casella di ricerca (chiamata API dopo che l'utente smette di digitare).                  | Gestione eventi di scroll (tracciamento della posizione ogni 200ms).                              |

### Quando usare il Debounce in JavaScript

-   Il debounce è ideale quando vuoi ritardare l'esecuzione di una funzione fino a quando un utente non smette di eseguire un'azione. Usalo quando ti aspetti raffiche di eventi e solo l'azione finale deve attivare la funzione, come nei campi di input di ricerca o durante il ridimensionamento delle finestre.

### Quando usare il Throttle in JavaScript

-   Il throttling è più appropriato quando è necessario controllare la frequenza con cui una funzione viene chiamata in risposta a eventi continui, come lo scroll o i movimenti del mouse. Usalo per mantenere un'esperienza utente fluida limitando il numero di esecuzioni di una funzione costosa.

----------

## Conclusione

Capire la differenza tra **debounce** e **throttle** può migliorare notevolmente le prestazioni e la reattività delle tue applicazioni JavaScript. Usa il **debounce** quando vuoi aspettare che un utente smetta di attivare un evento e opta per il **throttle** quando vuoi imporre un intervallo di esecuzione regolare, indipendentemente dal numero di eventi che si verificano.

Se pensi che l'articolo abbia un buon contenuto e abbia raggiunto l'obiettivo di spiegare le differenze tra il debounce e il throttle di una funzione in JavaScript, 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).

Ti auguro tante altre buone letture!

large_debounce-vs-throttle-javascript.jpg

medium_debounce-vs-throttle-javascript.jpg

small_debounce-vs-throttle-javascript.jpg

thumbnail_debounce-vs-throttle-javascript.jpg

large_debounce-vs-throttle-javascript.png

medium_debounce-vs-throttle-javascript.png

small_debounce-vs-throttle-javascript.png

thumbnail_debounce-vs-throttle-javascript.png

large_debounce-vs-throttle-javascript.webp

medium_debounce-vs-throttle-javascript.webp

small_debounce-vs-throttle-javascript.webp

thumbnail_debounce-vs-throttle-javascript.webp

Scopri le differenze tra debounce e throttling in JavaScript, due tecniche chiave per ottimizzare la gestione degli eventi. Include esempi pratici e best practices.

Debounce vs Throttle in JavaScript: Guida per Principianti con Esempi

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.

large_corso-frontend-developer-2022.jpg

medium_corso-frontend-developer-2022.jpg

small_corso-frontend-developer-2022.jpg

thumbnail_corso-frontend-developer-2022.jpg

large_corso-frontend-developer-2022.png

medium_corso-frontend-developer-2022.png

small_corso-frontend-developer-2022.png

thumbnail_corso-frontend-developer-2022.png

large_corso-frontend-developer-image.webp

medium_corso-frontend-developer-image.webp

small_corso-frontend-developer-image.webp

thumbnail_corso-frontend-developer-image.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.

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

Corso Front End Developer (Basic)

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à.

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à.

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

JavaScript

Ultimi articoli in JavaScript

Le novità di ECMAScript 15 (2024): guida completa con esempi di codice

Debounce vs Throttle in JavaScript: Guida per Principianti con Esempi

Cosa sono i Web Components e come implementarli

Cos'è React Remix? Un nuovo framework React

Corsi di JavaScript

Corso Front End Developer

Corso Front End Developer (Basic)

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