Sviluppo di un'interfaccia web e analisi delle differenze fra Angular e React

136 Pages·2017·2.4 MB·Italian

Università degli Studi di Padova
Dipartimento di Matematica "Tullio Levi-Civita"
Corso di Laurea in Informatica
Sviluppo di un’interfaccia web e analisi delle
differenze fra Angular e React
Tesi di laurea triennale
Relatore
Prof. Lamberto Ballan
Laureando
Alessandro Zangari
Anno Accademico 2017-2018
AlessandroZangari: Sviluppo di un’interfaccia web e analisi delle differenze fra Angular
e React, Tesi di laurea triennale, (cid:13)c Settembre 2018.
Sommario
Il presente documento descrive il lavoro svolto durante il periodo di stage, della durata
di circa trecento ore, dal laureando Alessandro Zangari presso l’azienda Sync Lab
S.r.l. L’obiettivo dello stage era lo sviluppo di un’applicazione con la libreria React.js
e lo svolgimento di un confronto fra la citata libreria e il framework Angular, che è
riportato in un apposito capitolo nell’appendice A del documento.
iii

Ringraziamenti
Innanzitutto, vorrei esprimere la mia gratitudine al Prof. Lamberto Ballan, relatore
della mia tesi, per l’aiuto e il sostegno fornitomi durante la stesura del lavoro.
Uno speciale ringraziamento anche al tutor aziendale Fabio Pallaro che mi ha seguito e
consigliato durante questa esperienza di lavoro in azienda.
Infine desidero ringraziare con affetto i miei genitori ed amici per il sostegno e per i
momenti passati durante gli anni di studio.
Padova, Settembre 2018 Alessandro Zangari
v

Indice
1 Introduzione 1
1.1 Convenzioni tipografiche . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 L’azienda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2.1 Profilo aziendale . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2.2 Servizi offerti . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2.3 Settori di impiego . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Lo stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 Piano di lavoro 5
2.1 Obiettivo del progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Requisiti e obiettivi. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2.1 Prodotti attesi . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2.2 Obiettivi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2.3 Pianificazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3 Analisi dei requisiti 9
3.1 Funzionamento del prodotto . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2 Attori del sistema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3 Casi d’uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3.1 Casi d’uso per l’utente base . . . . . . . . . . . . . . . . . . . . 36
3.4 Tracciamento dei requisiti . . . . . . . . . . . . . . . . . . . . . . . . . 45
4 Progettazione e codifica 51
4.1 Tecnologie e strumenti . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
4.1.1 Ambiente di sviluppo . . . . . . . . . . . . . . . . . . . . . . . 51
4.1.2 Strumenti di supporto allo sviluppo . . . . . . . . . . . . . . . 52
4.1.3 Linguaggio utilizzato . . . . . . . . . . . . . . . . . . . . . . . . 52
4.1.4 Principali dipendenze . . . . . . . . . . . . . . . . . . . . . . . 52
4.1.5 Creazione di un server fittizio . . . . . . . . . . . . . . . . . . . 53
4.2 Funzionamento di Redux e React.js . . . . . . . . . . . . . . . . . . . . 55
4.2.1 Struttura a componenti . . . . . . . . . . . . . . . . . . . . . . 55
4.2.2 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.3 Progettazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
4.3.1 Elenco di endpoint . . . . . . . . . . . . . . . . . . . . . . . . . 61
4.3.2 Gestione dell’accesso . . . . . . . . . . . . . . . . . . . . . . . . 63
4.3.3 Struttura del Redux Store . . . . . . . . . . . . . . . . . . . . . 66
4.3.4 Componenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
4.3.5 Responsiveness . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
vii
viii INDICE
4.3.6 Compatibilità . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
5 Verifica e validazione 77
5.1 Pacchetti utilizzati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
5.2 Validazione delle pagine HTML . . . . . . . . . . . . . . . . . . . . . . 78
5.3 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
5.3.1 Tracciamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
6 Descrizione delle pagine 87
6.1 Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
6.2 Homepage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
6.3 Gestione prenotazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
6.3.1 Selezione del giorno . . . . . . . . . . . . . . . . . . . . . . . . 88
6.3.2 Scheda Vista pasti . . . . . . . . . . . . . . . . . . . . . . . . . 89
6.3.3 Scheda Vista utenti . . . . . . . . . . . . . . . . . . . . . . . . 89
6.3.4 Form di aggiunta di una prenotazione . . . . . . . . . . . . . . 89
6.4 Gestione dei menù . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
6.5 Gestione dei piatti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
6.5.1 Form di aggiunta di un piatto . . . . . . . . . . . . . . . . . . . 93
7 Conclusioni 95
7.1 Consuntivo finale delle ore . . . . . . . . . . . . . . . . . . . . . . . . . 95
7.2 Raggiungimento degli obiettivi . . . . . . . . . . . . . . . . . . . . . . 95
7.3 Considerazioni personali . . . . . . . . . . . . . . . . . . . . . . . . . . 97
7.3.1 Tecnologie apprese . . . . . . . . . . . . . . . . . . . . . . . . . 97
7.3.2 Corsi propedeutici . . . . . . . . . . . . . . . . . . . . . . . . . 97
A Un confronto fra React.js e Angular 99
A.1 Introduzione. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
A.2 Statistiche di utilizzo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
A.3 Architettura a componenti . . . . . . . . . . . . . . . . . . . . . . . . . 102
A.3.1 Condivisione di dati fra componenti in React . . . . . . . . . . 104
A.4 Potenzialità diverse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
A.4.1 Gestione dello stato . . . . . . . . . . . . . . . . . . . . . . . . 106
A.4.2 Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
A.4.3 Gestione di richieste Http . . . . . . . . . . . . . . . . . . . . . 108
A.4.4 Scoping del foglio di stile . . . . . . . . . . . . . . . . . . . . . 108
A.5 React, Redux e la gestione dello stato . . . . . . . . . . . . . . . . . . 110
A.5.1 Cos’è Redux? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
A.5.2 React e Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
A.6 Routing: React router e Angular router . . . . . . . . . . . . . . . . . 113
A.7 Data binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
A.8 DOM e Virtual DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
A.9 Ciclo di sviluppo e mantenimento . . . . . . . . . . . . . . . . . . . . . 116
A.10Strumenti di controllo statico dell’accessibilità . . . . . . . . . . . . . . 117
A.11Conclusioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
A.11.1 Curva di apprendimento . . . . . . . . . . . . . . . . . . . . . . 118
Glossario 121
Bibliografia 125
Elenco delle figure
1.1 Logo aziendale di Sync Lab . . . . . . . . . . . . . . . . . . . . . . . . 1
4.1 Raffigurazionedelpassaggiodiprops einvocazionedicallback nell’albero
di componenti di React.js . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.2 Ciclo di interazione React-Redux . . . . . . . . . . . . . . . . . . . . . 58
4.3 Schema del funzionamento del token con i microservizi . . . . . . . . . 64
4.4 Le tre parti di un JWT token . . . . . . . . . . . . . . . . . . . . . . . 65
4.5 Albero dello stato dell’applicazione salvato nel Redux Store . . . . . . 67
4.6 Esempio di alcuni componenti all’interno del componente ResPage . . 68
4.7 Diagramma delle classi che descrive la struttura di Auth . . . . . . . . 71
4.8 Ciclo di aggiornamento di un componente con un Redux middleware . 73
4.9 Metodi statici della classe Http . . . . . . . . . . . . . . . . . . . . . . 73
4.10 La pagina di selezione del giorno con il componente react-calendar . 74
6.1 Form della pagina di accesso all’applicazione. . . . . . . . . . . . . . . 87
6.2 Homepage dell’applicazione per la sezione di amministrazione . . . . . 88
6.3 Calendario per la selezione del giorno. . . . . . . . . . . . . . . . . . . 89
6.4 Elenco di piatti prenotati della scheda Vista pasti . . . . . . . . . . . . 90
6.5 Elenco di utenti prenotati della scheda Vista utenti . . . . . . . . . . . 90
6.6 Utilizzo dell’attributo title per evidenziare la funzione del pulsante . 91
6.7 Form di aggiunta di una prenotazione nella scheda Vista utenti . . . . 91
6.8 Pagina di gestione del menù . . . . . . . . . . . . . . . . . . . . . . . . 92
6.9 Elenco di piatti e casella di ricerca . . . . . . . . . . . . . . . . . . . . 93
6.10 Pannello modale per l’aggiunta di un piatto . . . . . . . . . . . . . . . 93
A.1 Download settimanali di React.js e Angular da npm nel periodo da
Luglio 2016 a Luglio 2018 . . . . . . . . . . . . . . . . . . . . . . . . . 100
A.2 Download mensili di React.js e Angular da npm nel periodo da Luglio
2016 a Luglio 2018 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
A.3 Utilizzo di framework e librerie JavaScript fra sviluppatori raggruppati
per linguaggio di utilizzo primario . . . . . . . . . . . . . . . . . . . . 101
A.4 Interazione fra componenti e servizi in Angular . . . . . . . . . . . . . 102
A.5 Esecuzione di callback verso un componente genitore in React.js. . . . 105
A.6 Passaggio di props in React.js . . . . . . . . . . . . . . . . . . . . . . . 105
A.7 Flusso dei dati in React con e senza Redux . . . . . . . . . . . . . . . 108
A.8 Ciclo di aggiornamento con React-Redux dall’emissione di un evento
dalla view all’aggiornamento del componente . . . . . . . . . . . . . . 111
ix
Elenco delle tabelle
3.1 Tabella di tracciamento dei requisiti funzionali . . . . . . . . . . . . . 45
3.2 Tabella di tracciamento dei requisiti qualitativi . . . . . . . . . . . . . 48
3.3 Tabella di tracciamento dei requisiti prestazionali . . . . . . . . . . . . 49
3.4 Tabella di tracciamento dei requisiti di vincolo . . . . . . . . . . . . . 49
5.1 Tabella di tracciamento dei test sui reducer . . . . . . . . . . . . . . . 79
5.2 Tabella di tracciamento dei test delle azioni asincrone effettuati . . . . 82
5.3 Tabella di tracciamento dei test sui componenti . . . . . . . . . . . . . 85
7.1 Requisiti facoltativi non soddisfatti . . . . . . . . . . . . . . . . . . . . 96
Elenco dei blocchi di codice
4.1 Esempio di componente in React.js . . . . . . . . . . . . . . . . . . . . 55
4.2 Una funzione action creator . . . . . . . . . . . . . . . . . . . . . . . . 57
4.3 Struttura della cartella nella quale sono definiti i reducer . . . . . . . . 58
4.4 Organizzazione della cartella del progetto . . . . . . . . . . . . . . . . 60
4.5 Definizione del container ViewTabs . . . . . . . . . . . . . . . . . . . . 69
4.6 Il componente Auth. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
A.1 Dichiarazione di un servizio di Angular . . . . . . . . . . . . . . . . . . 102
A.2 Dependency injection di un servizio in un componente Angular . . . . 103
A.3 Un componente in React.js . . . . . . . . . . . . . . . . . . . . . . . . 104
A.4 Dichiarazione di un foglio di stile privato in Angular . . . . . . . . . . 109
A.5 Una action di Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
A.6 Dichiarazione di un componente connesso in React . . . . . . . . . . . 112
A.7 Esempio di doppio binding dei dati in Angular . . . . . . . . . . . . . 114
A.8 Componente Angular per il template del codice sopra riportato . . . . 114
A.9 Funzione di callback in React . . . . . . . . . . . . . . . . . . . . . . . 115
x