Fondamenti del Web e Frontend

Fondamenti del Web

• Il materiale copre i fondamenti del web, l'ingegneria del software e i fondamenti del web, nell'ambito di un corso di laurea in Ingegneria Informatica e dell'Automazione per l'anno accademico 2023/2024, tenuto dal Prof. Antonio Ferrara.

Evoluzione dei Frontend

• Nei primi anni del web, i siti web venivano serviti staticamente come pagine HTML, offrendo interfacce utente sostanzialmente statiche con interazioni limitate ai form.
• La prima generazione di applicazioni web ha introdotto contenuti generati dinamicamente lato server.
• Questi contenuti venivano realizzati tramite template, una tecnica che permetteva di mescolare codice HTML con la logica applicativa per creare "viste".
• Lo sviluppo di applicazioni web è poi migliorato con l'adozione del pattern MVC (Model-View-Controller).
• MVC permetteva di separare la logica applicativa dalla presentazione del contenuto.
• Il pattern MVC è stato implementato con Node.js realizzando il rendering delle viste.
• Le web app sono diventate simili alle applicazioni desktop funzionanti all'interno del browser.
• Le web app sono capaci di connettere modelli scaricati da un server con viste realizzate e gestite client-side mediante JavaScript.
• La nuova generazione di frontend si basa su framework come React, Vue.js e Angular(v2), utilizzando componenti riusabili per assemblare le viste, anziché semplici pagine.

React: Cos'è e perché usarlo

• React è una libreria JavaScript per lo sviluppo dichiarativo di interfacce utente, basate su componenti.
• React si concentra sulla gestione dello stato dei componenti e sul rendering di questi all'interno del DOM (Document Object Model).
• La logica di React permette l'isolamento dei componenti, la loro composizione e il riuso del codice per lo sviluppo della UI (User Interface).
• React conserva lo stato dell'applicazione e aggiorna in modo efficiente solo le parti della UI che dipendono dai cambiamenti di stato.
• Il concetto di Virtual DOM permette di rappresentare internamente la UI con elementi React.
• Il Virtual DOM si sincronizza con il DOM reale attraverso un processo di riconciliazione.
• L'uso del Virtual DOM consente a React di interpretare le differenze fra stati successivi dell'interfaccia in maniera efficiente, aggiornando solo le parti del DOM che necessitano di modifiche dopo ogni re-rendering.
• Questo processo rende l'aggiornamento del DOM più veloce rispetto all'uso di JavaScript vaniglia.
• React è open-source ed è mantenuto da Meta, migliorando ed evolvendo costantemente.

La prima app in React

• Il Virtual DOM di React è composto da elementi React.
• Gli elementi del DOM HTML e gli elementi React sono distinti.
• Gli elementi React descrivono come gli elementi del DOM HTML dovrebbero apparire.
• ReactDOM contiene gli strumenti per renderizzare gli elementi React nel browser.
• Il secondo argomento (props) può essere utilizzato nel contenuto dell'elemento e denominato a piacimento.
• React semplifica la creazione di elementi tramite JSX, uno pseudolinguaggio simile a HTML convertito in JavaScript.
  • Esempio senza JSX: React.createElement('h1', null, \Hello World!`);`
  • Esempio con JSX: <h1>Hello World!</h1>
• Le espressioni JavaScript possono essere incorporate in JSX tramite {}.
  • Esempio: const name = 'Mario Rossi'; const element = <h1>Hello, {name}</h1>;
• JSX non permette di specificare due elementi adiacenti a meno che non siano racchiusi in un unico elemento.
  • Esempio Corretto:ReactDOM.render(<div><h1>Hello World!</h1><p>Benvenuti!</p></div>, document.getElementById(“root”));
• Il codice JSX viene compilato dal preprocessore Babel in elementi React.
• Il secondo argomento di ReactDOM.render() specifica il nodo del DOM in cui renderizzare l'elemento React.
• React DOM mantiene aggiornato il DOM del browser per coerenza con gli elementi React.
• L'elemento da renderizzare rappresenta l'intero albero dell'UI.
• React DOM confronta l'elemento renderizzato ogni secondo con il precedente ed aggiorna i soli nodi necessari.
• Reacct è veloce da ricreare perchè gli elementi React sono oggetti semplici che non derivano da altri prototipi.

Componenti in React

• ReactDOM.render() permette di inserire codice JSX per rappresentare il contenuto da renderizzare.
• All'aumentare della complessità della vista, la manutenzione del codice diviene impossibile.
• React consente di creare componenti funzionali riutilizzabili tramite funzioni che ritornano un elemento React.
• I nomi dei componenti seguono la notazione PascalCase.
• Componenti in React*
• I nomi dei componenti seguono la notazione PascalCase.
• Nell'organizzazione di un'app in React, i componenti funzionali sono inseriti in file separati.

Transpiling e Toolchain

• React è eseguibile nel browser importando Babel, che effettua il transpiling di JSX.
• Transpiling offline in produzione è preferibile per diverse ragioni:
  • Evitare download dello script Babel.
  • Il processo di compilazione richiede tempo.
  • Il risultato della compilazione non viene memorizzato nella cache del browser.
• Il transpiling offline è possibile con Node.js.
• Esempi di comandi: npm init -y, npm install babel-cli@6 babel-preset-react-app@3, npx babel --watch src --out-dir . --presets react-app/prod
• Le toolchain aiutano a scalare su più file, usando librerie, individuando errori, visualizzando modifiche in tempo reale, ottimizzando l'output.
• Create React App supporta lo sviluppo di Single Page Application in React ed è utile per apprendere React.
  • Esempi di comandi: npx create-react-app mia-app, cd mia-app, npm start
• Create React App utilizza Babel per il transpiling e webpack per creare un pacchetto di asset.
• webpack crea un pacchetto di asset utilizzabile nel browser da un codice sorgente strutturato in file, moduli e dipendenze.
• Il deployment di un'applicazione creata con Create React App prevede una build servita staticamente da un server.
  • Esempio di comando: npm run build
• Su Replit, Vite sostituisce Webpack utilizzando Esbuild (scritto in Go) per il pre-bundling.

Composizione di Componenti

• Nonostante i casi visti in precedenza creino componenti semplici, i componenti possono essere composti tra loro, facendo riferimento ad altri componenti nel loro output.
• React permette di separare le responsabilità tra diversi componenti attraverso la composizione.

Componenti e Proprietà

• In React è possibile differenziare le istanze di un componente tramite le sue proprietà.
• Le proprietà sono passate al componente tramite l'oggetto props come attributi HTML in JSX.
• I componenti React devono comportarsi come funzioni pure rispetto ai propri props.

Liste e Chiavi

• React consente l'uso di JavaScript vaniglia nella logica di rendering dei componenti.
• Se le informazioni delle info card provengono da un server tramite API o da un file JSON, le mappe di array di informazioni possono essere create con componenti React.
• React permette di renderizzare direttamente l'array di componenti, sempre racchiuso in un altro elemento.
• A ogni elemento/componente di una lista va associato un attributo key univoco tra i diversi sibling.
• L'uso di attributi key univoci aiuta React ad eseguire confronti più veloci tra alberi durante l'aggiornamento dell'UI.

Componenti e Stato

• I dati danno vita ai componenti.
• In React, i dati possono passare nella gerarchia dei componenti come proprietà.
• Le proprietà sono immutabili, ed i componenti devono comportarsi come funzioni pure.
• Lo stato di un componente ha la possibilità di cambiare.

Componenti e Stato

• L'implementazione di una variabile locale alla funzione non può funzionare a causa di determinati motivi.
• Per poter gestire l'interazione dello stato di un componente è necessario utilizzare una variabile di stato.
• Per poter gestire l'interazione dello stato di un componente è necessario utilizzare una variabile di stato (e di suo setter) che:
  • Conservi i dati tra due rendering.
  • Ogni volta che viene settata a un nuovo valore, viene attivato il re-rendering del componente (e dei suoi figli)
• useState è un React Hook che permette di aggiungere una variabile di stato ad un componente.
• Il primo valore di ritorno è lo stato corrente, che nel primo render corrisponde al valore passato alla funzione.
• Il secondo valore di ritorno è una funzione setter che permette di cambiare lo stato corrente.
• Gli hook sono speciali funzioni che permettono di collegarsi a particolari feature di React durante il rendering.
• Non usare gli hook in statement condizionali o loop, ma solo nel top-level del componente.

Componenti e Stato

• Quando due componenti MyButton possiedono stati indipendenti

Componenti e Stato

• Lo stato può essere spostato a un livello più alto della gerarchia e passato come proprietà.
• Ad ogni modifica dello stato, i componenti dipendenti vengono renderizzati nuovamente.
• La funzione di gestione eventi passata come proprietà ai componenti interni.

Componenti e Stato

• Il valore di una variabile di stato non cambia mai durante il rendering.

Componenti e Stato

• Stati che non contengono variabili semplici, ma array oppure oggetti:
  • Non dovrebbe essere modificato con position.x = 10, ma sempre utilizzando il setter apposito.
• In altre parole, anche gli oggetti devono essere trattati come dati immutabili.
• Per la modifica, è necessario creare un nuovo oggetto e passarlo alla funzione setter.
  • Esempio: setPosition({ x: 10, y: 0 });
• In caso di modifica, è possibile lasciare invariate tutte le proprietà dell'oggetto attraverso lo spread operator.
  • Esempio: setPosition({ ...position, x: 10 });
• Allo stesso modo, gli array possono essere ritornati mediante lo spread operator, oppure ottenuti mediante filter, map o slice.

Rendering Condizionale

• Possibilità di effettuare rendering condizionale all'interno dell'Esercizio 10.2.
• Tecnica ampiamente utilizzata in React, specialmente con lo stato di un componente.

Form in React

• L'idea con cui viene realizzato un form in React è che il valore dei suoi elementi venga mantenuto all'interno dello stato del componente che lo realizza.
• Implementa la Single Source of Truth.
• Viene associato un handler che si aggiorna ad ogni modifica.
• Verrà renderizzato a sua volta riflettendo lo stato attuale.

Form in React

• Problemi di consistenza e praticità possono riscontrarsi.
• Per la checkbox si presenta il problema dell’uso dell’attributo checked anziché dell’attributo value.
• Differenza con gli altri elementi dovrà essere appositamente gestita nell’handleChange.
• Per i radio button, si può continuare ad utilizzare l’handler utilizzato per gli altri elementi.
• E' necessario ricordandoci che la proprietà checked proverrà dal valore dello stato.

Form in React

• Per inoltrare un form, potremmo inserire un pulsante ed ascoltare l’evento submit sul form e agire.
• Viene creata una UI interattiva in cui si identificano i diversi stati, si determina che cosa li possa cambiare e poi viene rappresentato lo stato in memoria mediante useState.
• Infine, si connettono gli event handler allo stato.
• La gestione degli eventi è asincrona.

Sincronizzazione con gli Effect

• Alcuni componenti necessitano di sincronizzazione con sistemi esterni (es. server) quando appaiono sullo schermo.
• Gli Effect permettono di eseguire codice dopo il rendering iniziale e il re-rendering, in base alle dipendenze.
• Di default, gli Effect vengono eseguiti dopo ogni rendering.
• La maggior parte degli Effect deve essere eseguita solo in determinati casi.
  • Animazione fade-in: eseguita solo al primo apparire del componente.
  • Connessione chat: eseguita ogni volta che si cambia "stanza".
• Il secondo argomento dell'Effect specifica le props o le variabili di stato il cui cambiamento deve triggerare l'Effect.
  • useEffect(() => {...}, [state1, state2, props4]);