18
Frameworks per WebApplication: analisi e confronto attraverso lo sviluppo di un caso di studio di Claudio Mignanti Relatore: Ivano Salvo 16 Luglio 2013

Presentazione tirocinio

Embed Size (px)

DESCRIPTION

WebApp Backbone/AngularJS

Citation preview

Page 1: Presentazione tirocinio

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

• 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

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

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

Architettura Web Application

Page 6: Presentazione tirocinio

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

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

Architettura di Generazione Chef

Page 9: Presentazione tirocinio

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

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

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

Interfaccia utente - un esempio

Page 13: Presentazione tirocinio

Interfaccia utente - un esempio

Page 14: Presentazione tirocinio

Interfaccia utente - un esempio

Page 15: Presentazione tirocinio

Interfaccia utente - un esempio

Page 16: Presentazione tirocinio

Interfaccia utente - un esempio

Server HTTP JS

DOMclick

API RESTCategoria

JSON Objs

RenderView

Page 17: Presentazione tirocinio

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

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