Presentazione tirocinio
-
Upload
claudio-mig -
Category
Documents
-
view
199 -
download
0
description
Transcript of Presentazione tirocinio
![Page 1: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/1.jpg)
Frameworks per WebApplication:
analisi e confronto attraverso lo sviluppo di un
caso di studio
di Claudio Mignanti
Relatore: Ivano Salvo
16 Luglio 2013
![Page 2: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/2.jpg)
• Sviluppo Web App: Generazione Chef
• Analisi e uso, in un'applicazione reale, di
diversi framework al fine di valutarli
• Incremento knowhow tecnologico aziendale
Obiettivi lavoro svolto
![Page 3: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/3.jpg)
Caratteristiche delle Web Application
Un applicativo sviluppato in un linguaggio supportato
dai browser (generalmente Javascript) il quale
sfrutta l'abilità del browser di modificare la
visualizzazione della pagina al fine di mostrare
l'esecuzione dell'applicazione stessa.
![Page 4: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/4.jpg)
Motivazioni delle Web Application
● Esperienza utente accattivante
● Sfruttamento della capacità computazionale
dei client
Pagine composte Server Side Viste renderizzate Client Side
JSP+JSTL
SYMFONY PHP
ASP .NET MVC BackBone
AngularJS
Javascript MVC
![Page 5: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/5.jpg)
Architettura Web Application
![Page 6: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/6.jpg)
Pagine composte Server Side Viste renderizzate Client Side
JSP+JSTL
SYMFONY PHP
ASP .NET MVC BackBone
AngularJS
Javascript MVC
Differenze concettuali
● Pagine servite staticamente all'interno di una singola richiesta/risposta HTTP
● Interattività client side con jQuery per la manipolazione del DOM e le chiamate AJAX
● Dati per le view serviti tramite API REST
● Applicativo servito staticamente per tutti i client
![Page 7: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/7.jpg)
Vantaggi delle web application
1. Interfaccia utente dinamica e fluida,
possibilità di animazione, user feedback
2. Riduzione carico server
3. Comune interfaccia REST tra l'applicativo
web e le applicazioni native mobili
![Page 8: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/8.jpg)
Architettura di Generazione Chef
![Page 9: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/9.jpg)
Tecnologie utilizzate
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 10: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/10.jpg)
Tecnologie utilizzate
Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.
![Page 11: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/11.jpg)
Tecnologie utilizzate
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
![Page 12: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/12.jpg)
Interfaccia utente - un esempio
![Page 13: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/13.jpg)
Interfaccia utente - un esempio
![Page 14: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/14.jpg)
Interfaccia utente - un esempio
![Page 15: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/15.jpg)
Interfaccia utente - un esempio
![Page 16: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/16.jpg)
Interfaccia utente - un esempio
Server HTTP JS
DOMclick
API RESTCategoria
JSON Objs
RenderView
![Page 17: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/17.jpg)
Confronto tra framework JS
Pro:● Precursore della
categoria● Abbondanza di plugin
Contro:● Richiede altre librerie● Non è strutturato per
grandi progetti
Pro:● Ben ingegnerizzato● Snello – meno codice● Robusto e scalabile
Contro:● Curva apprendimento
più ripida – maggior astrazione concettuale
![Page 18: Presentazione tirocinio](https://reader033.fdocuments.net/reader033/viewer/2022060109/5552dceeb4c90532498b4c62/html5/thumbnails/18.jpg)
Conclusioni
• Lo sviluppo di WebApp è più oneroso rispetto
all'equivalente sito web servito via server
• Le API REST possono essere riusate per dispositivi
mobili
• Lo sforzo di apprendimento iniziale di Angular è
velocemente ripagato dal minor uso di librerie
accessorie