Progettazione e sviluppo di applicazioni web di nuova generazione con AJAX
•Download as PPT, PDF•
0 likes•387 views
Design and development of new generation's web applications using Ajax
Recommended
More Related Content
Similar to Progettazione e sviluppo di applicazioni web di nuova generazione con AJAX
Similar to Progettazione e sviluppo di applicazioni web di nuova generazione con AJAX (20)
Progettazione e sviluppo di applicazioni web di nuova generazione con AJAX
- 1. ALMA MATER STUDIORUM – UNIVERSITÀ DI BOLOGNA SEDE DI CESENA II FACOLTÀ DI INGEGNERIA CORSO DI LAUREA IN INGEGNERIA INFORMATICA Progettazione e sviluppo di applicazioni Web di nuova generazione mediante AJaX Elaborato in Sistemi Distribuiti L-A Relatore: Creata e presentata da: Prof. Ing. Alessandro Ricci Lorenzo Cavina
- 2. WWW d’oggi: “WEB 2.0” ? Innanzitutto il contesto: >> 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… Lorenzo Cavina Web 2.0 2 / 15
- 3. “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
- 4. “Web 2.0”….. e il “Web 1.0” ? Lorenzo Cavina Web 2.0 3 / 15
- 5. In principio fu “Web 1.0” … CLIENT: rendering e poco più SERVER: collezioni di pagine HTML Lorenzo Cavina Web 2.0 4 / 15
- 6. In principio fu “Web 1.0” … “Web 1.0”: Modello d’interazione >> potenzialità limitate >> prettamente statico >> applicazione del concetto di ipertesto Lorenzo Cavina Web 2.0 4 / 15
- 7. …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
- 8. …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
- 9. …seguito poi dal “Web 1.5” “Web 1.5”: Modello d’interazione >> modello molto potente e dalle grandi potenzialità >> ad un richiesta del client il server effettua delle elaborazioni di vario tipo ed inoltra al client ancora una pagina HTML Completa maturazione del Web? Lorenzo Cavina Web 2.0 5 / 15
- 10. “Web 2.0” e AJaX - concetti spesso associati (giustissimo), ma a volte addirittura confusi (errore grossolano) - tra i tanti obiettivi che si pone il “Web 2.0” c’ è anche.. “..... offrire agli utenti una esperienza di utilizzo realmente ricca.” - da qui il ruolo chiave di AJaX: > strumento innovativo fondamentale per ottenere questa ricchezza > architettura alla base del “Web 2.0” > elemento che sta dando grandissima spinta allo sviluppo e alla diffusione del “Web 2.0” Lorenzo Cavina Web 2.0 6 / 15
- 11. Finalmente…AJaX! - innanzitutto, cosa significa AJaX: A synchronous Metodologia innovativa, J avaScript un modo diverso di a nd concepire e creare le applicazioni Web X ML - 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 > Interattività Ricchezza > Rapidità > Dinamicità » mai vista prima sul Web » Piace molto agli utenti Lorenzo Cavina AJaX 7 / 15
- 12. Un nuovo approccio allo sviluppo di applicazioni Web - AJaX non è una tecnologia, ma è molto più di un semplice pattern - Permette di creare vere APPLICAZIONI…non solo SITI - Applicazioni desktop come metro di paragone - Tutto ciò tramite il giusto mix di: 1. TECNOLOGIE: - XHTML e CSS - DOM - XML (e XSLT) - JavaScript - Oggetto XMLHttpRequest 2. PATTERNS: COMUNICAZIONE ASINCRONA CON IL SERVER - Tutti elementi ben noti ed altamente diffusi già da anni Lorenzo Cavina AJaX 8 / 15
- 13. Un nuovo approccio allo sviluppo di applicazioni Web Ma allora dov’è la grande novità? - Permette di creare vere APPLICAZIONI…non solo SITI 1. COMUNICAZIONE ASINCRONA (con il server) 2. IL CLIENT DIVENTA RICCO (AJaX Rich Clients) Lorenzo Cavina AJaX 8 / 15
- 14. Un nuovo approccio allo sviluppo di applicazioni Web Ma allora dov’è la grande novità? 1. COMUNICAZIONE ASINCRONA 1. TECNOLOGIE: - XHTML e CSS (con il server) - DOM - XML (e XSLT) - JavaScript 2. IL CLIENT DIVENTA RICCO - Oggetto XMLHttpRequest 2. PATTERNS: Rich Clients) (AJaX COMUNICAZIONE ASINCRONA Rich CON IL SERVER Client Lorenzo Cavina AJaX 8 / 15
- 15. AJaX vs. applicazioni Web classiche >> ciclo richiesta/risposta sempre sincrono >> utente costretto ad attendere Lorenzo Cavina AJaX 9 / 15
- 16. AJaX vs. applicazioni Web classiche Modello AJaX: >> natura “start/stop/start/stop” >> ciclo richiesta/risposta sempre sincrono >> utente costretto ad attendere >> pagina come unità di lavoro Lorenzo Cavina AJaX 9 / 15
- 17. AJaX vs. applicazioni Web classiche Modello AJaX: > >> ciclo richiesta/risposta sempre sincrono comunicazioni asincrone, richieste in background > >> attese (pagina bianca),attendere no utente costretto ad flusso di lavoro continuo > solo dati necessari, aggiornamento parziale dello schermo Lorenzo Cavina AJaX 9 / 15
- 18. Evoluzione del modello > Client = piattaforma programmabile > non più solo rendering (non più terminale stupido) > logica: - trasparente all’utente - gestire la comunicazione col server - gestire interfacciamento con l’utente > Server = evoluzione del ruolo > potenza di elaborazione, base di conoscenza, interfacciamento con altri sistemi > trasmette solo dati strettamente necessari Lorenzo Cavina AJaX 10 / 15
- 19. Nuovo modello…nuovi problemi! > MVC: diventa distribuito Cosa sul - Model? sia su client che su server Client e cosa - View? meglio su client sul Server? - Control? server > Giusto mix tra potenza di uno e potenzialità dell’altro Come legare al meglio le parti? > JavaScript: linguaggio di programmazione a tutti gli effetti Come adattarlo ai principi generali di progettazione ed implementazione? > Sicurezza: facilità di scrivere codice non sicuro, natura open source e codice facilmente accessibile > Sviluppatore: comprendere il ciclo di vita dell’applicazione sia lato client, che lato server Lorenzo Cavina AJaX 11 / 15
- 20. Case Study: AJaX-based Chat Obiettivo: sperimentare gli elementi visti finora creando una piccola applicazione AJaX-based >> per esempio una CHAT Requisiti - chat = dialogo in tempo reale (in breve) - pronta, veloce ,no attese eccessive, facile da utilizzare - notifica immediata dei messaggi agli Problemi utenti connessi Principali - storico dei messaggi - gestione della sessione - simulazione broadcasting, il server non Scelte può avviare la comunicazione Progettuali (1) - dunque…polling - storico dei messaggi: DB - dati scambiati: XML Lorenzo Cavina Case Study: AChat 12 / 15
- 21. Case Study: AJaX-based Chat Scelte - Vantaggi di AJaX Progettuali > aggiornamento parziale dell’interfaccia (2) (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
- 22. Case Study: AJaX-based Chat IL RISULTATO: Architettura Lorenzo Cavina Case Study: AChat 13 / 15
- 23. Case Study: AJaX-based Chat IL RISULTATO: Applicazione Lorenzo Cavina Case Study: AChat 13 / 15
- 24. Alcune Considerazioni 1. grandi potenzialità per il futuro, ma mancanza di modelli di riferimento 2. problemi di “gioventù”: - difficoltà per la compatibilità cross-browser - alto livello di complessità - va adattato esigenze tipiche dello sviluppo di applicazioni 3. nuove complessità: vedere le cose da un nuovo punto di vista, valutare la collocazione della logica 4. promettente, ma bisogna saper andare oltre Lorenzo Cavina Conclusioni 14 / 15
- 25. ALMA MATER STUDIORUM – UNIVERSITÀ DI BOLOGNA SEDE DI CESENA II FACOLTÀ DI INGEGNERIA CORSO DI LAUREA IN INGEGNERIA INFORMATICA Progettazione e sviluppo di applicazioni Web di nuova generazione mediante AJaX Elaborato in Sistemi Distribuiti L-A Relatore: Creata e presentata da: Prof. Ing. Alessandro Ricci Lorenzo Cavina
Editor's Notes
- Occore definire il contesto in cui AJaX si nasce e si sviluppa Contesto = Web 2.0 Bolla 00-01 – New Economy Rivoluzione o nuova bolla?? Solo il tempo ce lo dirà…ricordarsi che le rivoluzioni vengono spesso riconosciute solo molto tempo dopo il loro effettivo accadimento
- Per capire dove stiamo andando diamo uno sguardo al passato e al presente Web 2.0, ok, ma il Web 1.0 dov’è? Web 1.0 = Web originale Web 1.5 = prima evoluzione del Web (seconda versione), esplosione vera del dot.com con la programmazione distribuita e i servizi Web 2.0 = si dice sia nato dalle ceneri della bolla del 00-01 (CRASH) ATTENZIONE: NUMERI DI VERSIONE NON SONO SW, NON SOTTINTENDONO CAMBIAMENTI STRUTTURALI, ARCHITETTURALI O DI PROTOCOLLO NELLA RETE, MA SOLO CONCETTUALI PER DEFINIRE L’EVOLUZIONE, QUELLA DEL WEB COME ENTITA’ IN CONTINUO DIVENIRE
- WEB 1.0 – BREVISSIMA SPIEGAZIONE DELL’ARCHITETTURA E DEL MODELLO CLIENT: semplice rendering nulla più, fa vedere e basta SERVER: contenitore di pagine, raramente aggiornate, contenuti e info saldate nel codice html, nulla di dinamico, silos di informazione MODELLO D’INTERAZIONE: statico, limitato, scambio di puro html così com’è stato creato, collezione di pagine, ipertesto
- WEB 1.0 – BREVISSIMA SPIEGAZIONE DELL’ARCHITETTURA E DEL MODELLO CLIENT: semplice rendering nulla più, fa vedere e basta SERVER: contenitore di pagine, raramente aggiornate, contenuti e info saldate nel codice html, nulla di dinamico, silos di informazione MODELLO D’INTERAZIONE: statico, limitato, scambio di puro html così com’è stato creato, collezione di pagine, ipertesto
- WEB 1.5 – LA PRIMA GRANDE EVOLUZIONE DEL WEB – FORTISSIMA CRESCITA E INTERESSE Nascita del concetto di applicazione distribuita, linguaggi di programmazione lato server che permettono di creare applicazioni vere e proprie, interfacciamento con basi di dati in continuo aggiornamento, interazione con altre applicazioni di varia natura anche distribuite, pagine con contenuti generati “al volo”, dinamicamente in base alla particolare richiesta inoltrata dal client CLIENT: ancora piuttosto limitato, rendering + JavaScript, limitato cmq a livello locale e più in particolare a form e grafica o poco più (linguaggio di serie B) MODELLO D’INTERAZIONE: ciclo richiesta/elaborazione/risposta con contenuti dinamici, nascita di applicazioni e servizi anche molto complessi, molte applicazioni cominciano ad essere spostate sul web o create appositamente per essere utilizzate sul web, grandissime potenzialità tanto che si pensava che il web fosse arrivato a completa maturazione con applicazioni Web prima e servizi Web poi, giusto o no??
- WEB 1.5 – LA PRIMA GRANDE EVOLUZIONE DEL WEB – FORTISSIMA CRESCITA E INTERESSE Nascita del concetto di applicazione distribuita, linguaggi di programmazione lato server che permettono di creare applicazioni vere e proprie, interfacciamento con basi di dati in continuo aggiornamento, interazione con altre applicazioni di varia natura anche distribuite, pagine con contenuti generati “al volo”, dinamicamente in base alla particolare richiesta inoltrata dal client CLIENT: ancora piuttosto limitato, rendering + JavaScript, limitato cmq a livello locale e più in particolare a form e grafica o poco più (linguaggio di serie B) MODELLO D’INTERAZIONE: ciclo richiesta/elaborazione/risposta con contenuti dinamici, nascita di applicazioni e servizi anche molto complessi, molte applicazioni cominciano ad essere spostate sul web o create appositamente per essere utilizzate sul web, grandissime potenzialità tanto che si pensava che il web fosse arrivato a completa maturazione con applicazioni Web prima e servizi Web poi, giusto o no??
- WEB 1.5 – LA PRIMA GRANDE EVOLUZIONE DEL WEB – FORTISSIMA CRESCITA E INTERESSE Nascita del concetto di applicazione distribuita, linguaggi di programmazione lato server che permettono di creare applicazioni vere e proprie, interfacciamento con basi di dati in continuo aggiornamento, interazione con altre applicazioni di varia natura anche distribuite, pagine con contenuti generati “al volo”, dinamicamente in base alla particolare richiesta inoltrata dal client CLIENT: ancora piuttosto limitato, rendering + JavaScript, limitato cmq a livello locale e più in particolare a form e grafica o poco più (linguaggio di serie B) MODELLO D’INTERAZIONE: ciclo richiesta/elaborazione/risposta con contenuti dinamici, nascita di applicazioni e servizi anche molto complessi, molte applicazioni cominciano ad essere spostate sul web o create appositamente per essere utilizzate sul web, grandissime potenzialità tanto che si pensava che il web fosse arrivato a completa maturazione con applicazioni Web prima e servizi Web poi, giusto o no??
- AJAX NON è UNA TECNOLOGIA Ajax è un approccio, una metodologia da seguire per progettare e creare applicazioni Web ricche In questo è un approccio altamento innovativo, porta con se elementi fortemente innovativi Più dinamiche nel senso più rapide nel rispondere agli stimoli, più veloci nell’eseguire i propri compiti, sembra quasi che risiedano in locale sul client e non su un server remoto Questo risultato lo si ottiene con un giusto mix di 2 elementi fondanti: tecnologie e patterns (uno, l’unico, comunicazione asincrona che spiegheremo in seguito) Portate oltre la loro concezione originale, forse sono parole un po’ forti, ma rendono bene l’idea del passo in avanti che si fa nella creazioe di applicazioni Web con questo nuovo approccio --- Dov’è la grande novità?? La carica innvovativa? COMUNICAZIONE ASINCRONA, concetto ben diverso dalla comunicazione sincrona tipica delle applicazioni Web 1.0 CLIENT RICCO, con ajax non si parla solo di rich applications, ma di rich clients, il client diventa ricco perché parte della logica applicativa si sposta su di esso con l’applicazione che non risiede più totalmente lato server, ma anche lato client, vere applicazioni distribuite sia lato client che lato server, client come piattaforma programmabile….ma come tutto questo??
- AJAX NON è UNA TECNOLOGIA Ajax è un approccio, una metodologia da seguire per progettare e creare applicazioni Web ricche In questo è un approccio altamento innovativo, porta con se elementi fortemente innovativi Più dinamiche nel senso più rapide nel rispondere agli stimoli, più veloci nell’eseguire i propri compiti, sembra quasi che risiedano in locale sul client e non su un server remoto Questo risultato lo si ottiene con un giusto mix di 2 elementi fondanti: tecnologie e patterns (uno, l’unico, comunicazione asincrona che spiegheremo in seguito) Portate oltre la loro concezione originale, forse sono parole un po’ forti, ma rendono bene l’idea del passo in avanti che si fa nella creazioe di applicazioni Web con questo nuovo approccio --- Dov’è la grande novità?? La carica innvovativa? COMUNICAZIONE ASINCRONA, concetto ben diverso dalla comunicazione sincrona tipica delle applicazioni Web 1.0 CLIENT RICCO, con ajax non si parla solo di rich applications, ma di rich clients, il client diventa ricco perché parte della logica applicativa si sposta su di esso con l’applicazione che non risiede più totalmente lato server, ma anche lato client, vere applicazioni distribuite sia lato client che lato server, client come piattaforma programmabile….ma come tutto questo??
- AJAX NON è UNA TECNOLOGIA Ajax è un approccio, una metodologia da seguire per progettare e creare applicazioni Web ricche In questo è un approccio altamento innovativo, porta con se elementi fortemente innovativi Più dinamiche nel senso più rapide nel rispondere agli stimoli, più veloci nell’eseguire i propri compiti, sembra quasi che risiedano in locale sul client e non su un server remoto Questo risultato lo si ottiene con un giusto mix di 2 elementi fondanti: tecnologie e patterns (uno, l’unico, comunicazione asincrona che spiegheremo in seguito) Portate oltre la loro concezione originale, forse sono parole un po’ forti, ma rendono bene l’idea del passo in avanti che si fa nella creazioe di applicazioni Web con questo nuovo approccio --- Dov’è la grande novità?? La carica innvovativa? COMUNICAZIONE ASINCRONA, concetto ben diverso dalla comunicazione sincrona tipica delle applicazioni Web 1.0 CLIENT RICCO, con ajax non si parla solo di rich applications, ma di rich clients, il client diventa ricco perché parte della logica applicativa si sposta su di esso con l’applicazione che non risiede più totalmente lato server, ma anche lato client, vere applicazioni distribuite sia lato client che lato server, client come piattaforma programmabile….ma come tutto questo??
- CONFRONTO DIRETTO!!
- CONFRONTO DIRETTO!!
- CONFRONTO DIRETTO!!
- SPIEGAZIONE DELLE DUE ARCHITETTURE E DEI DUE MODELLI D’INTERAZIONE (veloce) FINALMENTE CAPIAMO MEGLIO COME SI ARRICCHISCE IL CLIENT COME AVVIENE IL DEPLOYMENT DELL’APPLICAZIONE LATO CLIENT CAMBIA IL COMPITO DEL PROGETTISTA E DELLO SVILUPPATORE DI APPLICAZIONI: scenari nuovi, problemi nuovi, complessità nuove, decisioni nuove
- ACHAT Obiettivo Ideat Requisiti: essenzialmente spiegare il concetto di chat come dialogo in tempo reale tra più persone connesse contemporaneamente al servizio pronta e veloce nell’elaborare, niente attese eccessive, facile da utilizzare requisiti di usabilità fondamentali Problemi: - come riesco a fare un broadcasting immediato di ogni messaggio inoltrato al sistema, verso tutti gli utenti connessi al sistema? - come mantenere uno storico dei messaggi? - come mantenere la sessione utente? Problema minore, ma importante per quanto riguarda la fase progettuale…tra poco si capirà perché Scelte progettuali: - broadacasting da server a client? Non posso…protocollo HTTP, comunicazione iniziata obbligatoriamente dal client - simulo il broadcasting con un polling…chi lo effettua? Il client periodicamente dovrà richiedere i dati al server - storico dei messaggi: tramite DB su server remoto - i dati scambiati tra client e server verranno strutturati usando XML Scelte Progettuali 2: analizziamo in modo un po’ più approfondito due aspetti importanti Perché usare AJaX? Praticamente per tutti i suoi vantaggi: veloce, rapido nel rispondere, ottima simulazione di broadcasting, non fastidioso per l’utente che non si trova mai davanti una pagina bianca 2.Posizionare la logica: con ajax chi crea applicazioni si trova davanti a nuove scelte da fare dovute all’introduzione del client come piattaforma programmabile dove posizionare la logica? Perché? Prima il problema non si poneva!!