ALMA MATER STUDIORUM – UNIVERSITÀ DI BOLOGNASEDE DI CESENA

II FACOLTÀ DI INGEGNERIACORSO DI LAUREA IN INGEGNERIA INFORMATICA

Progettazione e sviluppo

di applicazioni Web di nuova

generazione mediante AJaX

Relatore: Prof. Ing. Alessandro Ricci

Creata e presentata da:Lorenzo Cavina

Elaborato inSistemi Distribuiti L-A

Lorenzo Cavina Web 2.0 2 / 15

WWW d’oggi: “WEB 2.0” ?

>> in una parola: “Web2”

>> contesto complesso e in piena evoluzione

>> c’è chi sente aria di rivoluzione...

>> ...chi vede una grossa operazione di marketing...

Chi ha ragione? Difficile dirlo ora…

Innanzitutto il contesto:

Lorenzo Cavina Web 2.0 3 / 15

“Web 2.0”….. e il “Web 1.0” ?

Per capire dove si sta andando è fondamentale capire dove ci si trova ora e dove si era fino a

poco tempo fa

Lorenzo Cavina Web 2.0 3 / 15

“Web 2.0”….. e il “Web 1.0” ?

Lorenzo Cavina Web 2.0 4 / 15

In principio fu “Web 1.0” …CLIENT:

rendering e poco più

SERVER:

collezioni di pagine HTML

Lorenzo Cavina Web 2.0 4 / 15

In principio fu “Web 1.0” …

“Web 1.0”: Modello d’interazione

>> prettamente statico

>> potenzialità limitate

>> applicazione del concetto di ipertesto

Lorenzo Cavina Web 2.0 5 / 15

…seguito poi dal “Web 1.5”CLIENT:

- introdotta la possibilità di avere elaborazioni avanzate

- elaborazioni a livello locale

- piuttosto semplici

- legate alla visualizzazione o alla validazione dei form

Lorenzo Cavina Web 2.0 5 / 15

…seguito poi dal “Web 1.5”SERVER:

- programmazione del server mediante appositi linguaggi

- pagine create al volo con contenuti generati dinamicamente

- database aggiornati continuamente

- applicazioni distribuite lato server

Lorenzo Cavina Web 2.0 5 / 15

…seguito poi dal “Web 1.5”

“Web 1.5”: Modello d’interazione

>> ad un richiesta del client il server effettua delle elaborazioni di vario tipo ed inoltra al client ancora una pagina HTML

>> modello molto potente e dalle grandi potenzialità

Completa maturazione del Web?

Lorenzo Cavina Web 2.0 6 / 15

“Web 2.0” e AJaX

“..... offrire agli utenti una esperienza di utilizzo realmente ricca.”

- concetti spesso associati (giustissimo), ma a volte addirittura confusi (errore grossolano)

- tra i tanti obiettivi che si pone il “Web 2.0” c’ è anche..

- da qui il ruolo chiave di AJaX:

> strumento innovativo fondamentale per ottenere questa ricchezza

> elemento che sta dando grandissima spinta allo sviluppo e alla diffusione del “Web 2.0”

> architettura alla base del “Web 2.0”

Lorenzo Cavina AJaX 7 / 15

Finalmente…AJaX!

> Interattività> Rapidità> Dinamicità

- molto recente, febbraio 2005, anche se...

- ...in realtà non è nulla di così incredibilmente NUOVO...

- ..ma offre qualcosa di nuovo dal punto di vista dell’utente

- innanzitutto, cosa significa AJaX:

A

J

a

X

synchronous

avaScript

nd

ML

Metodologia innovativa, un modo diverso di concepire e creare le applicazioni Web

Ricchezza mai vista

prima sul Web» » Piace molto

agli utenti

Lorenzo Cavina AJaX 8 / 15

Un nuovo approccio allo sviluppo di applicazioni Web

- Tutto ciò tramite il giusto mix di:

1. TECNOLOGIE:

2. PATTERNS:

- XHTML e CSS- DOM- XML (e XSLT)- JavaScript- Oggetto XMLHttpRequest

COMUNICAZIONE ASINCRONA CON IL SERVER

- AJaX non è una tecnologia, ma è molto più di un semplice pattern

- Tutti elementi ben noti ed altamente diffusi già da anni

- Permette di creare vere APPLICAZIONI…non solo SITI

- Applicazioni desktop come metro di paragone

Lorenzo Cavina AJaX 8 / 15

Un nuovo approccio allo sviluppo di applicazioni Web

- Permette di creare vere APPLICAZIONI…non solo SITIMa allora dov’è la grande novità?

1. COMUNICAZIONE ASINCRONA (con il server)

2. IL CLIENT DIVENTA RICCO (AJaX Rich Clients)

Lorenzo Cavina AJaX 8 / 15

Un nuovo approccio allo sviluppo di applicazioni Web

1. TECNOLOGIE:

2. PATTERNS:

- XHTML e CSS- DOM- XML (e XSLT)- JavaScript- Oggetto XMLHttpRequest

COMUNICAZIONE ASINCRONA CON IL SERVER

Ma allora dov’è la grande novità?

1. COMUNICAZIONE ASINCRONA (con il server)

2. IL CLIENT DIVENTA RICCO (AJaX Rich Clients)

RichClient

Lorenzo Cavina AJaX 9 / 15

>> utente costretto ad attendere>> ciclo richiesta/risposta sempre sincrono

AJaX vs. applicazioni Web classiche

Lorenzo Cavina AJaX 9 / 15

>> natura “start/stop/start/stop”

>> utente costretto ad attendere>> ciclo richiesta/risposta sempre sincrono

Modello AJaX:

AJaX vs. applicazioni Web classiche

>> pagina come unità di lavoro

Lorenzo Cavina AJaX 9 / 15

>> utente costretto ad attendere>> ciclo richiesta/risposta sempre sincrono

Modello AJaX:

AJaX vs. applicazioni Web classiche

> comunicazioni asincrone, richieste in background > no attese (pagina bianca), flusso di lavoro continuo > solo dati necessari, aggiornamento parziale dello schermo

Lorenzo Cavina AJaX 10 / 15

Evoluzione del modello> Client = piattaforma programmabile

> non più solo rendering (non più terminale stupido)

> potenza di elaborazione, base di conoscenza, interfacciamento con altri sistemi

> Server = evoluzione del ruolo

> trasmette solo dati strettamente necessari

> logica: - trasparente all’utente- gestire la comunicazione col server- gestire interfacciamento con l’utente

Lorenzo Cavina AJaX 11 / 15

Nuovo modello…nuovi problemi!> MVC: diventa distribuito

- Model? sia su client che su server- View? meglio su client- Control? server

Cosa sul Client e cosa sul Server?

> Giusto mix tra potenza di uno e potenzialità dell’altro

> JavaScript: linguaggio di programmazione a tutti gli effetti

Come legare al meglio le parti?

Come adattarlo ai principi generali di progettazione ed implementazione?

> Sicurezza: facilità di scrivere codice non sicuro, natura opensource e codice facilmente accessibile

> Sviluppatore: comprendere il ciclo di vita dell’applicazione sia lato client, che lato server

Lorenzo Cavina Case Study: AChat 12 / 15

Case Study: AJaX-based ChatObiettivo: sperimentare gli elementi visti finora

creando una piccola applicazione AJaX-based

Requisiti (in breve)

ProblemiPrincipali

- notifica immediata dei messaggi agli utenti connessi

- storico dei messaggi- gestione della sessione

ScelteProgettuali(1)

- simulazione broadcasting, il server non può avviare la comunicazione

- dunque…polling- storico dei messaggi: DB- dati scambiati: XML

- chat = dialogo in tempo reale - pronta, veloce ,no attese eccessive,

facile da utilizzare

>> per esempio una CHAT

Lorenzo Cavina Case Study: AChat 13 / 15

Case Study: AJaX-based Chat

ScelteProgettuali(2)

- Vantaggi di AJaX > aggiornamento parziale dell’interfaccia (lavagna messaggi)> prontezza nella risposta ai comandi (invio messaggi)> nessuna attesa dell’utente > richieste trasparenti in background

- Posizionamento della logica > client: invio e ricezione messaggi,

polling, aggiornamento interfaccia

> server: interfacciamento con DB, sessione

Lorenzo Cavina Case Study: AChat 13 / 15

Case Study: AJaX-based ChatIL RISULTATO: Architettura

Lorenzo Cavina Case Study: AChat 13 / 15

Case Study: AJaX-based ChatIL RISULTATO: Applicazione

Lorenzo Cavina Conclusioni 14 / 15

Alcune Considerazioni

2. problemi di “gioventù”:- difficoltà per la compatibilità cross-browser- alto livello di complessità - va adattato esigenze tipiche dello sviluppo di applicazioni

1. grandi potenzialità per il futuro, ma mancanza di modelli di riferimento

3. nuove complessità: vedere le cose da un nuovo punto di vista, valutare la collocazione della logica

4. promettente, ma bisogna saper andare oltre

ALMA MATER STUDIORUM – UNIVERSITÀ DI BOLOGNASEDE DI CESENA

II FACOLTÀ DI INGEGNERIACORSO DI LAUREA IN INGEGNERIA INFORMATICA

Progettazione e sviluppo

di applicazioni Web di nuova

generazione mediante AJaX

Relatore: Prof. Ing. Alessandro Ricci

Creata e presentata da:Lorenzo Cavina

Elaborato inSistemi Distribuiti L-A