Progettazione e sviluppo di applicazioni web di nuova generazione con AJAX

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:


“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


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


In principio fu “Web 1.0” …CLIENT:

rendering e poco più

SERVER:

collezioni di pagine HTML


In principio fu “Web 1.0” …

“Web 1.0”: Modello d’interazione

>> prettamente statico

>> potenzialità limitate

>> applicazione del concetto di ipertesto


…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


…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


…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?


“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


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



- 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)



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


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

AJaX vs. applicazioni Web classiche


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


Modello AJaX:


>> pagina come unità di lavoro



Modello AJaX:


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


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


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


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


Case Study: AJaX-based ChatIL RISULTATO: Architettura


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

Progettazione e sviluppo di applicazioni web di nuova generazione con AJAX

Education