Web Application in AngularJS

98 Pages·2013·2.22 MB·Italian

by  Matteo Belletti

Universit`a degli studi di Padova
Dipartimento di Matematica
Corso di Laurea in Informatica
Tesi di laurea
Web Application in AngularJS
Laureando: Relatore:
Matteo Belletti Prof. Silvia Crafa
Anno accademico 2013/2014
Ringraziamenti
Grazie ai miei genitori che mi hanno sempre sostenuto anche nei momenti piu` difficili,
rispettando sempre le mie decisioni.
Grazie alla prof. Crafa per il supporto e l’aiuto fornitomi durante i periodi di stage e di
stesura della tesi.
Grazie a Claudio che mi ha fatto passare in InfoCert un periodo istruttivo e pieno di
stimoli.
Grazie a tutti i professori dell’Universit`a degli Studi di Padova per gli insegnamenti rice-
vuti in questi anni.
Matteo Belletti
Indice
Contents ii
List of Figures vii
List of Tables ix
1 Introduzione 1
1.1 Descrizione dell’azienda . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Necessit`a aziendali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Descrizione stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 Descrizione del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 Scelta delle tecnologie 3
2.1 Tipi di tecnologie selezionate . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Framework MV* . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2.1 GWT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2.1.1 Java per produrre JavaScript . . . . . . . . . . . . . . . . 4
2.2.1.2 L’ambiente di sviluppo e di testing . . . . . . . . . . . . . 5
2.2.1.3 Svantaggi di usare GWT . . . . . . . . . . . . . . . . . . 5
2.2.2 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2.2.1 Tratti distintivi . . . . . . . . . . . . . . . . . . . . . . . 7
Dependency injection: . . . . . . . . . . . . . . . . . . . . . 7
Rigido controllo delle dipendenze: . . . . . . . . . . . . . . . 7
Eventi ottimizzati sia per il mobile che per il desktop: . . . 8
Gestione degli stadi intermedi: . . . . . . . . . . . . . . . . 8
Testabilit`a: . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Vincolante: . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Uso di markup HTML5 nei template: . . . . . . . . . . . . . 8
2.2.2.2 Considerazioni . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.3 Emberjs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.3.1 Somiglianze con AngularJS . . . . . . . . . . . . . . . . . 9
2.2.3.2 Strutture dati . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.3.3 Flessibilit`a . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.3.4 Considerazioni . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.4 Altri framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.4.1 Backbone.js. . . . . . . . . . . . . . . . . . . . . . . . . . 11
ii
Indice iii
2.2.4.2 Knockoutjs . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2.4.3 Altri framework . . . . . . . . . . . . . . . . . . . . . . . 12
2.2.5 La scelta del framework . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2.5.1 Il linguaggio . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2.5.2 Il framework . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3 Libreria grafica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3.1 Problemi nell’utilizzo di una libreria grafica . . . . . . . . . . . . . 15
2.3.2 Less e Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3.3 Vantaggi nell’utilizzo di librerie grafiche . . . . . . . . . . . . . . . 16
2.3.4 Libreria scelta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.4 Strumenti di automazione e testing scelti . . . . . . . . . . . . . . . . . . 17
2.5 Altre librerie e tecnologie scelte . . . . . . . . . . . . . . . . . . . . . . . . 19
2.6 Aspettative e obiettivi delle tecnologie scelte . . . . . . . . . . . . . . . . 19
2.6.1 Framework MV* . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.6.1.1 Logica dichiarativa . . . . . . . . . . . . . . . . . . . . . . 20
2.6.2 Framework di front-end . . . . . . . . . . . . . . . . . . . . . . . . 21
2.6.3 Strumenti di automazione . . . . . . . . . . . . . . . . . . . . . . . 21
3 Analisi del dominio e dei requisiti 23
3.1 Descrizione di Relm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.2 Casi d’uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.2.1 Gerarchia utenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.2.2 UC 1: login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.2.3 UC 2: scelta cliente ed account . . . . . . . . . . . . . . . . . . . . 26
3.2.4 UC 3: accesso cliente . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.2.5 UC 4: Entrata account. . . . . . . . . . . . . . . . . . . . . . . . . 27
3.2.6 UC 5: filtro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.2.7 UC 5.3: ricerca ordine . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.2.8 UC 5.4: filtro per casella PEC . . . . . . . . . . . . . . . . . . . . 29
3.2.9 UC 5.5: ricerca per richiedente . . . . . . . . . . . . . . . . . . . . 30
3.2.10 UC 5.6: ricerca per titolare . . . . . . . . . . . . . . . . . . . . . . 30
3.2.11 UC 5.7: ricerca per prodotto . . . . . . . . . . . . . . . . . . . . . 31
3.2.12 UC 6: lista ordini. . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.2.13 UC 6.2: entra in ordine . . . . . . . . . . . . . . . . . . . . . . . . 32
3.2.14 UC 6.2.2: visualizza lista caselle . . . . . . . . . . . . . . . . . . . 33
3.2.15 UC 6.2.2: visualizza lista prodotti . . . . . . . . . . . . . . . . . . 33
3.3 Requisiti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.3.1 Funzionali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.3.2 Tecnologici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
4 Specifica tecnica 35
4.1 MVC secondo AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2 Struttura ad alto livello applicazione . . . . . . . . . . . . . . . . . . . . . 35
4.3 Struttura di una web application in AngularJS . . . . . . . . . . . . . . . 36
4.4 Struttura model Relm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.5 Diagrammi dei moduli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.5.1 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Pagina iii of 87
Indice iv
4.5.1.1 controllerProduct . . . . . . . . . . . . . . . . . . . . . . 41
4.5.1.2 controllerAccount . . . . . . . . . . . . . . . . . . . . . . 41
4.5.1.3 controllerClient. . . . . . . . . . . . . . . . . . . . . . . . 42
4.5.1.4 controllerBox . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.5.1.5 controllerOrder . . . . . . . . . . . . . . . . . . . . . . . . 43
4.5.1.6 controllerLogin . . . . . . . . . . . . . . . . . . . . . . . . 43
4.5.2 Filtri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.5.2.1 Pager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.5.3 Direttive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.5.3.1 Modal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.5.3.2 Datepicker . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.5.3.3 Disable . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.5.3.4 Popover . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.5.4 Servizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4.5.4.1 Mock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4.5.4.2 routeRule . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.6 Diagrammi di sequenza . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.6.1 Scelta cliente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.6.2 Scelta account . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.6.3 Filtro ordini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
4.6.4 Filtro caselle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
4.6.5 Filtro prodotti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5 Prodotto finale 56
5.1 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.2 Requisiti soddisfatti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.2.1 Funzionali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.2.2 Tecnologici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.3 Prodotto finale e interfaccia grafica . . . . . . . . . . . . . . . . . . . . . . 57
5.3.1 Rotture di layout e responsivit`a . . . . . . . . . . . . . . . . . . . . 57
5.3.2 Risultato grafico . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.3.2.1 Tabella anomalie . . . . . . . . . . . . . . . . . . . . . . . 57
5.3.2.2 Pagina dettaglio ordine . . . . . . . . . . . . . . . . . . . 58
5.3.2.3 Pagina ricerca . . . . . . . . . . . . . . . . . . . . . . . . 59
5.3.3 Validazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.4 Prodotto senza mock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.5 Metriche e tempi di Grunt . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.5.1 Metriche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.5.2 Rapporto codice JavaScript e markup HTML . . . . . . . . . . . . 62
5.5.2.1 Conclusioni sul framework dichiarativo . . . . . . . . . . 62
5.5.3 Report Grunt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
6 Conclusioni 64
6.1 Realizzazione obiettivi iniziali framework. . . . . . . . . . . . . . . . . . . 64
6.2 Opinione su AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
6.3 Mancanze rilevate in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . 65
6.3.1 Ereditariet`a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Pagina iv of 87
Indice v
6.3.2 Struttura del model . . . . . . . . . . . . . . . . . . . . . . . . . . 65
6.4 Valutazioni a posteriori del progetto . . . . . . . . . . . . . . . . . . . . . 66
6.4.1 Fa¸cade per chiamate REST . . . . . . . . . . . . . . . . . . . . . . 66
6.4.2 Sopperire alle mancanze di AngularJS . . . . . . . . . . . . . . . . 66
6.4.3 Struttura file progetto . . . . . . . . . . . . . . . . . . . . . . . . . 66
6.5 Best practice individuate. . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
6.6 Esperienza di stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
6.6.1 Conoscenze acquisite . . . . . . . . . . . . . . . . . . . . . . . . . . 68
A Caratteristiche di AngularJS ed Ember.js 69
A.1 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
A.1.0.1 Blocchi config . . . . . . . . . . . . . . . . . . . . . . . . 69
A.1.0.2 Blocchi run . . . . . . . . . . . . . . . . . . . . . . . . . . 69
A.1.0.3 Moduli . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Inizializzazione moduli . . . . . . . . . . . . . . . . . . . . . 70
A.1.0.4 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
A.1.0.5 Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
A.1.0.6 Direttive . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
A.1.0.7 Filtri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
A.1.0.8 Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
A.1.0.9 HttpBackend . . . . . . . . . . . . . . . . . . . . . . . . . 73
A.2 Ember.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
A.2.0.10 Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
A.2.0.11 FIXTURE . . . . . . . . . . . . . . . . . . . . . . . . . . 74
A.2.0.12 Nomenclatura . . . . . . . . . . . . . . . . . . . . . . . . 74
A.2.0.13 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
B Formato dei dati REST 75
B.1 Formato dei dati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
B.1.1 Cliente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
B.1.2 Account . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
B.1.3 Ordine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
B.1.4 Prodotti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
B.1.5 Caselle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
B.1.6 Chiamate REST . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
B.1.6.1 Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
B.1.6.2 Clienti . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Insieme di clienti . . . . . . . . . . . . . . . . . . . . . . . . 78
B.1.6.3 Account . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
B.1.6.4 Ordini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
B.1.6.5 Prodotti . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
B.1.6.6 Caselle . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
C Glossario 84
C.1 Glossario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Ecosistema: . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Pagina v of 87
Indice vi
Framework: . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Plugin: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Preprocessore(o precompilatore): . . . . . . . . . . . . . . . 84
Task Runner: . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Test runner: . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
D Bibliografia e link 86
D.1 Blibliografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
D.1.1 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
D.1.2 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
D.2 Linkografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
D.2.1 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
D.2.2 Emberjs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
D.2.3 Twitter Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
D.2.4 Grunt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
D.2.5 Underscore.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
D.2.6 Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
D.2.7 NPM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
D.2.8 angular-generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Pagina vi of 87
Elenco delle figure
2.1 Schema data binding AngularJS. . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Logica dichiarativa nella view secondo AngularJS. . . . . . . . . . . . . . 7
2.3 Trend di AngularJS, Backbone.js, Emberjs. . . . . . . . . . . . . . . . . . 13
2.4 Loghi linguaggi preprocessione. . . . . . . . . . . . . . . . . . . . . . . . . 16
2.5 Loghi strumenti automazione scelti. . . . . . . . . . . . . . . . . . . . . . 17
2.6 Logo jasmine. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.7 Schema installazione e comandi strumenti di automazione. . . . . . . . . . 18
2.8 Logo Underscore.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.9 Logo Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.10 Logica dichiarativa di AngularJS . . . . . . . . . . . . . . . . . . . . . . . 20
3.1 Model Relm. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.2 Gerarchia utenti. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.3 Uc 0 : caso uso login. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.4 Uc 2 : scelta cliente ed account. . . . . . . . . . . . . . . . . . . . . . . . . 26
3.5 UC 3: accesso cliente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.6 Uc 4 : Entrata account. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.7 Uc 5 : filtro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.8 UC 5.3: ricerca ordine. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.9 UC 5.4: filtro per casella PEC . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.10 Uc 5.5 : caso uso ricerca richiedente. . . . . . . . . . . . . . . . . . . . . . 30
3.11 UC 5.6: ricerca per titolare . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.12 UC 5.7: ricerca per prodotto . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.13 UC 6: lista ordini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.14 UC 6.2: entra in ordine . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.15 UC 6.2.2: visualizza lista caselle. . . . . . . . . . . . . . . . . . . . . . . . 33
3.16 UC 6.2.2: visualizza lista prodotti . . . . . . . . . . . . . . . . . . . . . . 33
4.1 MVC secondo AngularJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2 Struttura alto livello web application AngularJS. . . . . . . . . . . . . . . 36
4.3 Tipico schema moduli web application AngularJS. . . . . . . . . . . . . . 37
4.4 Model Relm. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.5 Diagramma dei moduli. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4.6 Diagramma dei sotto moduli del modulo relmSearch.controller. . . . . . . 40
4.7 Controller prodotti. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.8 Controller account. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.9 Controller clienti. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.10 Controller caselle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
vii
Figure viii
4.11 Controller login. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.12 Modulo filtri. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.13 Modulo direttive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.14 Modulo service. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4.15 Diagramma di sequenza del filtraggio dei clienti. . . . . . . . . . . . . . . 49
4.16 Diagramma di sequenza della selezione dell’account. . . . . . . . . . . . . 50
4.17 Diagramma di sequenza del filtraggio delle caselle. . . . . . . . . . . . . . 51
4.18 Diagramma di sequenza del filtraggio delle caselle. . . . . . . . . . . . . . 53
4.19 Diagramma di sequenza del filtraggio dei prodotti. . . . . . . . . . . . . . 54
5.1 Pagina anomalie prima. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.2 Pagina anomalie dopo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.3 Pagina dettaglio ordine prima. . . . . . . . . . . . . . . . . . . . . . . . . 59
5.4 Pagina dettaglio ordine dopo. . . . . . . . . . . . . . . . . . . . . . . . . . 59
5.5 Pagina dettaglio ordine prima. . . . . . . . . . . . . . . . . . . . . . . . . 60
5.6 Pagina dettaglio ordine dopo. . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.7 Logo validazione HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.8 Grafico rapporto markup codice. . . . . . . . . . . . . . . . . . . . . . . . 62
5.9 Grafico rapporto markup codice senza codice mocking. . . . . . . . . . . . 62
6.1 Separazione tramite dependency injection. . . . . . . . . . . . . . . . . . . 64
Pagina viii of 87
Elenco delle tabelle
2.1 tabella riassuntiva framework . . . . . . . . . . . . . . . . . . . . . . . . . 14
ix