Upload
claudio-mig
View
196
Download
0
Embed Size (px)
DESCRIPTION
WebApp Backbone/AngularJS
Citation preview
Frameworks per WebApplication:
analisi e confronto attraverso lo sviluppo di un
caso di studio
di Claudio Mignanti
Relatore: Ivano Salvo
16 Luglio 2013
• 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
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.
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
Architettura Web Application
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
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
Architettura di Generazione Chef
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.
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.
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.
Interfaccia utente - un esempio
Interfaccia utente - un esempio
Interfaccia utente - un esempio
Interfaccia utente - un esempio
Interfaccia utente - un esempio
Server HTTP JS
DOMclick
API RESTCategoria
JSON Objs
RenderView
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
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