Antica presentazione AJAX

Perché Ajax è importante, oggi 25 gennaio 2006

Iacopo Sassarini, Tommaso Torti

© 2006 Quinary SpA

Contenuti

• Alcune applicazioni interessanti• Che cosa è Ajax• Perché oggi?• Il “core Ajax”• I principali problemi delle applicazioni Ajax• Alcuni scenari di utilizzo di Ajax• Coffee break• Ajax Patterns (una selezione)• Toolkits e Frameworks• Ajax Security• Strumenti per lo sviluppo• Evoluzioni della tecnologia Ajax• Cosa offre Quinary, oggi: AjaxScope• Sviluppare con DWR

© 2006 Quinary SpA

Alcune applicazioni interessanti

• WebMail: GMail• Mappe: Google Maps, Mapquest• Search Engines: Google Suggest, Yahoo Instant Search • RSS Aggregators: Google RSS Reader• Photo sharing: Flickr• Desktops virtuali: Netvibes, Google IG, Windows Live, Protopage• Condivisione documenti: Writely• Ajax APIs: Salesforce Ajax Toolkit, Google Maps APIs

© 2006 Quinary SpA

Che cosa è Ajax

© 2006 Quinary SpA

Cos’è Ajax

• Acronimo “Asynchronous Javascript and XML”• Non identifica propriamente una nuova tecnologia, ma piuttosto un tecnica di

utilizzo un insieme di tecnologie consolidate (XHTML, CSS, Javascript, XML) per la creazione in interfacce web di nuova generazione, ricche, dinamiche, usabili.

• E’ oggi una delle possibili risposte tecnologiche all’esigenza di superare o semplicemente arricchire il paradigma document-request su cui è fondato il “Web 1.0”.

© 2006 Quinary SpA

Alternative ad Ajax

• XUL: linguaggio di markup per la definizione di GUI dinamiche. E’ parte del progetto Mozilla. Attualmente è compatibile solo con i browser della famiglia Mozilla

• XAML: è parte integrante del progetto Avalon (UI di prossima generazione Microsoft). E’ una tecnologia proprietaria Microsoft.

• SVG: linguaggio per descrivere grafica vettoriale ed ambedding di grafica raster. Interoperabile con Javascript. W3C recommendation. Richiede skills piuttosto difficili da reperire e le attuali implementazioni non sono completamente mature

• Java Applets• Macromedia Flash Applets

© 2006 Quinary SpA

Ajax ed alternative: tabella comparativa

XUL XAML SVG Flash Applets Ajax

Desktop-like UI * * * * * *

Platform Independance * * *

Vendor Independance *

Skill Set Transferrance * *

http://www.ajaxinfo.com/

© 2006 Quinary SpA

Ajax Client Model

• Superamento dell’ impostazione document-request alla base del Web 1.0• Completo disaccoppiamento tra rendering e scambio di dati• Possibilità di interazioni multiple ed asincrone con il server all’interno

della medesima pagina• I browsers si evolvono da rendering engine a piattaforme che

implementano API standard per il deploy di applicazioni complesse ed altamente interattive

• Mozilla Firefox è oggi il prototipo dei browsers di nuova generazione

© 2006 Quinary SpA

Server

Web/App Server

Backend services

Browser

HTML Page

Form

Server

Web/App Server

Backend services

Browser

HTML Page

Ajax Engine

Form

sub

mit

Load

nuo

va p

agin

a

GU

I eve

ntD

ata

requ

est

GU

I upd

ate

resp

onse

© 2006 Quinary SpA

Tecnologie

• XHTML: struttura GUI• CSS: presentation, stili• Javascript: logica applicativa client-side• Javascript DOM binding: accesso in lettura-scrittura al document

model della pagina• XMLHttpRequest, IFrame, Applet, Flash: bridge tra client e server• Servizi server side (Java, PHP, ASP,…): business logic e storage• XML, JSON: dati e trasporto

© 2006 Quinary SpA

XMLHttpRequest IFrame Applet …

Remoting Toolkit – Client Side DWR, JSON-RPC, dojo.bind, BackBase…

GUI Toolkit Dojo, BackBase, Scriptaculous, SmartClient,…

Java

scrip

t D

OM

bin

ding

Remoting Toolkit – Server Side

Java PHP ASP Ruby …

Trasporto HTTP(S)

© 2006 Quinary SpA

Perché oggi?

© 2006 Quinary SpA

• Applet Java e LiveConnect API• Una applet java nascosta gestisce l’interfaccia HTTP con le componenti

server, espone i propri metodi pubblici e comunica col Javascript engine tramite LiveConnect

• Event handlers Javascript (es. onclick) intercettano azioni dell’utente e chiamano funzioni Javascript sul client, che a loro volta invocano metodi sulla applet

• L’ applet invoca metodi remoti sul server• Il server ritorna codice Javascript che aggiorna lo stato della pagina• L’ applet invoca l’ eval() del codice Javascript:

<APPLET ... MAYSCRIPT>

JSObject.getWindow(this).eval(jsCode);

© 2006 Quinary SpA

HTML

Javascript Client Logic

Applet

LiveConnect Java-Javascript bridge

Server Components

Browser

page

tran

sitio

ns

HTM

L pa

ges

in-p

age

actio

ns

Java

scrip

t cod

e

© 2006 Quinary SpA

• Impossibile sviluppare applicazioni cross-browser a causa della scadente implementazione DHTML sui browser Netscape.

• Non completa gestione degli aspetti di GUI perché le tecnologie DHTML e CSS non erano ancora del tutto mature/complete

• Problemi di freezing e bugs con alcune versioni della JVM Microsoft• Scarsa confidenza nella possibilità di realizzare applicazioni realmente

affidabili e durevoli nel tempo

Però….

• Eresia: MSIE 4.0 era un browser all’avanguardia e per di più documentato in modo eccellente

© 2006 Quinary SpA

• 1998: CSS Level 2 W3C recommendation• 2000: XHTML W3C recommendation• 2000: ECMA-262 Edition 4 (es. regular expressions, try/catch…)• 2000: DOM Level 2 ed ECMAScript binding W3 recommendation• 2000: XMLHttpRequest implementato in MSIE5• 2002: Mozilla 1.0• 2002: Phoenix browser (precursore di Firefox)• 2003: Inizio della fine del dominio MSIE ?• 2004: Firefox 1.0• 2004: “Altri” (Opera, Safari) conquistano quote significative di utenti• Febbraio 2005: J.J. Garrett pubblica “Ajax: A new approach to web

applications”

© 2006 Quinary SpA

© 2006 Quinary SpA

Conseguenze

• Il 2003 segna un’inversione di tendenza: MSIE comincia a perdere utenti a vantaggio dei browsers Mozilla

• Altri players entrano in gioco

Conseguenze:

• Chi realizza applicazioni web deve far riferimento al comune denominatore di tecnologie standard per massimizzare la compatibilità

• Chi fa i browser è costretto ad implementare gli standard in modo robusto se vuole avere diffusione del proprio prodotto

• Oggi non capita quasi più di andare sul sito e doverlo visualizzare per forza con MSIE, ma solo un anno fa….

© 2006 Quinary SpA

Il “core” Ajax

© 2006 Quinary SpA

XMLHttpRequest IFrame Applet …

Remoting Toolkit – Client Side DWR, JSON-RPC, dojo.bind, BackBase…

GUI Toolkit Dojo, BackBase, Scriptaculous, SmartClient…

Java

scrip

t D

OM

Bin

ding

Remoting Toolkit – Server Side

Java PHP ASP Ruby …

Trasporto HTTP(S)

© 2006 Quinary SpA

Il “core” Ajax.

© 2006 Quinary SpA

Ajax Core: Javascript

Javascript ha una pessima reputazione…

• Implementazioni bacate nei browsers• Codice scritto male, duplicato, mischiato all’HTML• Usato principalmente per “web hacking”• Usato da “non programmatori”• Mancanza di tools per sviluppo, debug, test

Però …

• E’ un linguaggio estremamente potente ed estendibile• Supporta Object Orientation tramite prototyping• Il codice può essere strutturato e reso manutenibile• Esistono librerie, componenti riutilizzabili, frameworks• Stanno cominciando ad essere strumenti di sviluppo

© 2006 Quinary SpA

Il “core” Ajax

© 2006 Quinary SpA

• XMLHttpRequest è un HTTP UserAgent Javascript. Supporta i metodi standard HTTP ed il protocollo HTTPS.

• L’introduzione di questo oggetto nelle librerie Javascript dei browsers ha contribuito al consolidamento del modello del client Ajax

• Ha reso più strutturato credibile l’intero approccio fornendo fondamenta documentate, quasi cross-browser

© 2006 Quinary SpA

XMLHttpRequest non è un oggetto standard

• Introdotto in MSIE 5.0 come componente ActiveX• Implementato a partire da Mozilla 1.0, Safari 1.2, Opera 8.0• Non esiste alcuno standard che ne definisce il comportamento, è divenuto

uno standard di fatto.• DOM Level 3 (raccomandazione W3C 2004) include funzionalità simili (load/

save) ed è probabilmente destinato a sostituire a lungo termine l’utilizzo di XMLHttpRequest

• “La maggior parte delle pagine ben progettate che usano XMLHTTP sono destinate a nascondere le implementazioni dell'oggetto XMLHttpRequest incapsulando la sua invocazione con una funzione Javascript” (Wikipedia)

© 2006 Quinary SpA

• Occorre scrivere codice che tenga conto delle diverse implementazioni nei browsers

function createXMLHttpRequest(){ try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {}

try {return new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {}

try {return new XMLHttpRequest();} catch(e) {} return null; } ... var client = createXMLHttpRequest();

© 2006 Quinary SpA

Usare XMLHttpRequest in modo sincrono

• XMLHttpRequest può essere utilizzato in modo sincrono

• L’esecuzione rimane bloccata sulla chiamata send(null) fino a quando l’intero stream di risposta è stato letto

• Si tratta di un utilizzo di scarsa utilità in applicazioni reali

var client = createXMLHttpRequest(); client.open(“GET”, “data.xml”, false); client.send(null); var serverResponse = client.responseText;

Modalità sincrona

© 2006 Quinary SpA

var client = createXMLHttpRequest(); client.open(“GET”, “data.xml”, true); client.onreadystatechange = clientChanged; client.send(null);

function clientChanged(){ if (client.readyState == 0){} … }

• L’utilizzo asincrono richiede la registrazione di una funzione di callback• La funzione di callback viene chiamata ad ogni cambio di stato dell’oggetto

© 2006 Quinary SpA

UNINITIALIZED(0)

LOADING(1)

LOADED(2)

INTERACTIVE(3)

COMPLETED(4)

send()

HTTP Statusreceived

First chunk of datareceived

Next chunk of datareceived

Last chunk of datareceived

Last chunk of datareceived

© 2006 Quinary SpA

XMLHttpRequest: metodi

Metodo Descrizioneopen("method", "URL"[, asyncFlag[,"userName"[, "password"]]])

Inizializza la richiesta. asynchFlag controlla il carattere asincrono o meno; username/password sono usati per la basic authentication.send(content) Invia la richiesta (content = POST data)

abort() Interrompe la richiestagetAllResponseHeaders() Restituisce una mappa degli

headersgetResponseHeader("header") Restituisce uno specifico

headersetRequestHeader("label", "value") Imposta header della

request

© 2006 Quinary SpA

XMLHttpRequest: proprietà principali

Proprietà DescrizioneonReadyStateChange Imposta la funzione di callbackreadyState Ritorna lo stato:

0 = uninitialized1 = loading2 = loaded3 = interactive4 = complete

responseText Contenuto della response, plain textresponseXML DOM XML della responsestatus Valore numerico della stato HTTPstatusText Descrizione dello stato HTTP

© 2006 Quinary SpA

• Generazione di contenuti parziali server side

• Inserimento del contenuto negli elementi della pagina tramite innerHTML

• Il server ritorna codice Javascript• Il client effettua un eval() del

codice restituito

Ritornare dati Ritornare HTML Ritornare Javascript

• interfacciare direttamente webservices

• Il client Javascript usa responseXML per accedere ai dati (DOM/E4X)

• JSON

© 2006 Quinary SpA

Il “core” Ajax

© 2006 Quinary SpA

• Il Document Object Model è una interfaccia platform-independent e language-independent per consentire ai programmi di accedere e modificare contenuti, struttura, stili di documenti XML

• DOM fornisce un insieme di oggetti standard per rappresentare documenti HTML ed XML, ed un modello con cui questi oggetti possono essere acceduti e combinati tra loro

• Per Javascript DOM binding si intende l’effettiva implementazione dell’interfaccia DOM nell’engine Javascript implementato nei browsers

• Si tratta di una standardizzazione del DHTML

© 2006 Quinary SpA

• DOM Level 1 (Core): definisce le funzionalità di base per la navigazione e l’alterazione della struttura e del contenuto di documenti XML ed HTML

• DOM Level 2: definisce l’object model per gli stylesheets e funzionalità per manipolare le informazioni di stile legate ad un documento. Definisce inoltre un event model e fornisce supporto per namespaces XML

• DOM Level 3 (draft): definisce le interfacce per load-save, validazione, formattazione del contenuto, estensione dell’event model con la definizione di event groups.

• I browsers di ultima generazione sono compatibili con il DOM Level 2

© 2006 Quinary SpA

• Definisce un generico sistema di eventi che consente la registrazione di event handlers, descrive il flusso di eventi secondo una struttura gerarchica, fornisce informazioni contestuali rispetto a ciascun evento

• Definisce un sottoinsieme comune tra i vari event systems indipendenti introdotti nei browsers della generazione DOM Level 0, al fine di garantire la massima compatibilità degli scripts

© 2006 Quinary SpA

• UI Events: eventi relativi alla user interface. Sono generati in seguito all’interazione per mezzo di un dispositivo esterno (tastiera, mouse…)

• UI Logical Events: sono eventi di alto livello, indipendenti dal dispositivo, ad esempio cambio del focus, modifica di una selezione ecc.

• Mutation Events: causati da una qualsiasi azione che cambia la struttura del documento

• Capturing: processo per mezzo del quale un evento viene gestito da uno degli ancestors prima che venga gestito dal target effettivo

• Bubbling: processo per mezzo del quale un evento viene propagato agli ancestors dopo essere stato gestito dal target

• Cancelable: indica la possibilità di cancellare le azioni di default in seguito all’handling dell’evento stesso

© 2006 Quinary SpA

• Netscape ed Explorer avevano una gestione opposta del meccanismo di cattura degli eventi (IE intercettava nella fase di “bubble”, Netscape in “capture”)

• Il flusso DOM definisce un meccanismo generico di propagazione degli eventi attraverso la gerarchia dei containers della GUI

• Un evento può essere intercettato da qualunque componente coinvolto sia nella fase di “capture”, sia nella fase di “bubble”

© 2006 Quinary SpA

I principali problemi delle applicazioni Ajax

© 2006 Quinary SpA

• Circa il 10% degli utenti della rete ha il browser con Javascript disabilitato

http://www.w3schools.com/browsers/browsers_stats.asp

© 2006 Quinary SpA

Unload accidentale poco controllabile

• Un click sbagliato sul bottone di chiusura del browser, di reload della pagina, dei bottoni di navigazione provoca l’unload della pagina e la perdita del contesto

• L’evento di unload non è cancellabile.• Su alcuni browser l’evento può essere intercettato ed è possibile chiedere

conferma per il salvataggio dei dati (ma non per l’annullamento della chiusura della pagina)

• Opera non consente di intercettare l’evento di unload sulla chiusura della finestra o sui tasti Back/Forward.

• IE e Mozilla supportano l’evento onbeforeunload e la relativa visualizzazione di un dialog box OK/Cancel per confermare la chiusura della pagina. Questo comportamento tuttavia non è definito in alcuno standard

© 2006 Quinary SpA

Bottoni Back/Forward

• I bottoni Back/Forward possono perdere significato in una applicazione Ajax, dove si hanno stati di una singola GUI in luogo di diversi documenti

• Alcuni frameworks e librerie consentono di gestire un mapping con funzionalità simili ad Undo/Redo, es. DOJO, BackBase, RSH (Really Simple History)

• Non esiste tuttavia soluzione generale al problema, la gestione dei tasti B/F deve essere progettata di volta in volta

• Non è un problema esclusivamente Ajax, e non sempre è necessariamente un problema critico. Anche nei siti “normali” capita abbastanza spesso di avere comportamenti non prevedibili facendo Back…

© 2006 Quinary SpA

Bookmarking

• La funzionalità di bookmarking della URL può dare risultati non predicibili, a meno di non essere in grado di associare URL diverse a stati diversi e, successivamente, ricostruire lo stato completo a partire dalla URL

• Anche in questo caso non è un problema esclusivamente Ajax• DOJO, RSH (Real Simple History) ed altre librerie forniscono API per

associare informazioni di stato ad URL diverse usando la hash-part della URL

• Per il salvataggio dello stato si possono usare anche meccanismi di local storage (descritti in seguito)

• In ogni caso la gestione del bookmarking è onerosa e delicata sia a livello di progettazione sia a livello di sviluppo

© 2006 Quinary SpA

Alcuni scenari di utilizzo di Ajax

© 2006 Quinary SpA

• Ajax consente l’integrazione ed aggregazione di servizi direttamente a livello del client, demandando parte del meccanismo di integrazione al browser.

• Può essere utile per alleggerire in parte l’erogazione di servizi da parte del server.

• Ciascun servizio aggregato lato client mantiene le proprie logiche di aggiornamento senza impattare il resto della pagina

• Possibili applicazioni: client side portlets e personalizzazione, aggregatori RSS, dashboards, integrazione di contenuti locali con servizi esterni (mappe, traduzioni, motori di ricerca)

© 2006 Quinary SpA

• Integrazione client side tra Google Maps ed un servizio di geocodifica degli indirizzi italiani: esempio.

Browser

Server

GeocodificaMappe

Server

Browser

GeocodificaMappe

Web application “classica” Versione Ajax

© 2006 Quinary SpA

Nuove forme di erogazione di pubblicità

• E’ un caso particolare dell’integrazione di servizi client side, dove uno dei servizi è un AD server.

• L’erogazione di pubblicità può essere virtualmente innescata da una qualsiasi azione che l’utente effettua sulla GUI

• Links e contenuti pubblicitari possono essere visualizzati in seguito a:• mouse over su qualsiasi nodo del DOM• selezione o click su una parte di contenuto• contenuti parziali inseriti in forms• movimento del mouse all’interno di una mappa• ecc …

© 2006 Quinary SpA

GUI per data entry

• Applicazioni che richiedono data entry complesso ed estremamente strutturato (es. ERP) possono beneficiare di GUI Ajax

• I dati inseriti possono essere validati (server-side!) con il livello di granularità più adatto alle varie situazioni senza fare submit completo delle forms

• Le UI possono essere rese “keyboard-driven”• Esistono frameworks (es. BackBase) che includono widgets (tabelle,

liste, tree views, ecc.) con funzionalità sofisticate e ne facilitano il binding con i dati server side

© 2006 Quinary SpA

Feedbacks sulla user experience

• E’ possibile raccogliere ed inviare al server ogni tipo di informazione su come gli utenti utilizzano l’applicazione

• Si possono raccogliere statistiche su quali elementi della pagina gli utenti si soffermano maggiormente (es. tempi di permanenza del mouse su particolari regioni del contenuto, clicks, selezioni di parole o frasi, ecc)

• Si possono raccogliere informazioni su particolari configurazioni dei browsers (script, banner, popup blocking…) ed intraprendere azioni ad hoc

• Si possono misurare accuratamente i tempi di permanenza su ciascuna pagina e di download dei contenuti

© 2006 Quinary SpA

Coffee Break

© 2006 Quinary SpA

Ajax Patterns

© 2006 Quinary SpA

• Lo sviluppo Ajax ripropone una serie di problemi ben noti a livello di architettura, sviluppo, gestione delle risorse in un contesto tecnologico sostanzialmente nuovo

• L’obiettivo è quello di fornire linee guida per la soluzione di problemi ricorrenti in un determinato contesto tecnologico

• Il sito http://ajaxpatterns.org raccoglie una collezione molto estesa di patterns Ajax

• Qui viene analizzata solo una piccola selezione di patterns particolarmente significativi.

© 2006 Quinary SpA

Ajax Patterns – On-demand Javascript

• DOM-Basedvar head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.id = 'uploadScript'; script.type = 'text/javascript'; script.src = "upload.js"; head.appendChild(script)

• XMLHttpRequest-Based

script = xmlHttpRequestDownload('script.js'); eval(script)

© 2006 Quinary SpA

Ajax Patterns – Tasks scheduling

// one time action function expireTimer() { alert(“Timeout expired!”); } expiryTimer = setTimeout(expireTimer, 5000);

// repeated actions function repeatedAction() { alert(“Interval expired!”); } expiryInterval = setInterval(repeatedAction, 5000);

• Esempio: salvare periodicamente versioni drafts dei contenuti in modo da limitare i danni in caso di unload accidentale (es. autosave drafts GMail e Writely)

© 2006 Quinary SpA

Ajax Patterns – Browser side XSLT

• Ci sono frameworks open-source e cross browser per fare questo lavoro

• Google AjaXSLT (http://goog-ajaxslt.sourceforge.net/)• Sarissa (http://sarissa.sourceforge.net/)

// Sarissa var xsltProc = new XSLTProcessor(); xsltProc.importStylesheet(xsltDoc); var htmlDoc = xsltProc.transformToDocument(xml); var htmlString = Sarissa.serialize(htmlDoc); document.getElementById(“aNode”).innerHTML = htmlString;

© 2006 Quinary SpA

Ajax Patterns – Ottimizzazione performance

• Client-side caching• Guesstimate: invece che accedere a dati in tempo reale fare stime significative

(es. GMail storage counter)• Submission buffering: mantenere i dati temporanei in un buffer ed inviarli al

server ad intervalli di tempo stabiliti (es. Google Suggest)• Multistage download: suddividere i contenuti da downloadare in più parti

indipendenti in modo da poter visualizzare immediatamente i primi dati che arrivano (es. Google Maps).

• Predictive Fetch: anticipare possibili azioni dell’utente ed interagire col server in anticipo per recuperare i dati necessari (es. Google Maps).

© 2006 Quinary SpA

Ajax Patterns – Cross domain proxy

Browser

Application Server

External Service

/remote/service1/?id=1 /getData.jsp?id=1

/getData.jsp?id=1

© 2006 Quinary SpA

Ajax Patterns: Richer Plugin

• Applet Java• Flash (esempio: Flickr Organizer)• Accesso a files locali, storage locale• Multimedia e grafica• Accesso a risorse hardware (stampante, joystick)• Interazioni con OS

© 2006 Quinary SpA

Ajax Patterns: Local Storage

• Cookies: sono la tecnica teoricamente più standard ma è una soluzione altamente inefficiente e limitata (massimo 4K di dati per cookie)

• IE5 supporta una API per fare storage locale dello stato. La soluzione è proprietaria e ha limiti di dimensione (64K)

• AMASS (Ajax Massive Storage System): è un sistema implementato in Flash. Sotto i 100K non necessita autorizzazione di security. Funziona serializzando oggetti Javascript (ma non oggetti nativi)

• Embedded SQL DB: alla ApacheCon 2005 è stato presentato un prototipo che utilizza Derby (erede di Cloudscape, ora parte del progetto Apache) come DB embedded in una applet Java salvare dati localmente in una applicazione Ajax

© 2006 Quinary SpA

Ajax Toolkits e Frameworks

© 2006 Quinary SpA

XMLHttpRequest IFrame Applet …

Remoting Toolkit – Client Side DWR, JSON-RPC, dojo.bind, BackBase…

GUI Toolkit Dojo, BackBase, Scriptaculous, SmartClient…

Java

scrip

t D

OM

bin

ding

Remoting Toolkit – Server Side

Java PHP ASP Ruby …

Trasporto HTTP(S)

© 2006 Quinary SpA

• API di alto livello e cross-browser per la gestione dei componenti standard della GUI HTML e dei relativi stili ed effetti visuali

• Includono emulazioni dei controlli tipici delle applicazioni desktop (tabbed panes, sliders, spinners, finestre MDI, etc.)

• Offrono implementazioni del Drag&Drop• Forniscono librerie di widgets con comportamenti complessi (image

slideshows, rich text editors, etc.)• Possono consentire lo sviluppo di widgets customizzati estendendo le

librerie di widgets standard• Possono definire una diversa interfaccia sull’event system

© 2006 Quinary SpA

• Libreria di effetti visuali e widgets (liste ordinabili, sliders) basata su Prototype

• Fornisce una implementazione di Drag&Drop• Semplice anche per generare effetti ed animazioni complesse• E’ attivamente supportata e sviluppata• http://script.aculo.us/

Prototype• Libreria Javascript general-purpose che fornisce anche una astrazione Ajax

cross browser• E’ building block usato da diverse librerie GUI• http://prototype.conio.net/

© 2006 Quinary SpA

<head> <script src="/javascripts/prototype.js" type="text/javascript“/> <script src="/javascripts/scriptaculous.js" type="text/javascript“/>

<script type="text/javascript" language="javascript"> // <![CDATA[ new Effect.Appear('element_id'); // ]]> </script> </head>

<html> . . .

<div onclick="new Effect.SwitchOff(this)"> Click here if you've seen enough. </div>

</html>

• Esempi di effetti

© 2006 Quinary SpA

• Potente sistema di packages, consente di downloadare lato client on demand solo le librerie necessarie

• Widgets predefiniti customizzabili ed estendibili (es. RichTextEditor, Image Slideshow)

• Event system generico, potente e “non intrusivo” nell’HTML• Widget prototyping consente di definire componenti GUI

riutilizzabili a partire dagli widgets standard• Compressione del codice per minimizzare il tempo di download• Open Source• http://dojotoolkit.org/

© 2006 Quinary SpA

<head> <script src=“dojo.js" type="text/javascript“/> <script language="JavaScript" type="text/javascript"> dojo.require("dojo.widget.Editor"); </script>

</head>

<html>

<!-- Creazione editor DOJO --> <div class=“dojo-Editor”> <h1>Section title</h1> <ul> <li>item1</i> <li>item2</i> <ul> </div>

</html>

• Esempi

© 2006 Quinary SpA

• BackBase definisce un livello di astrazione sopra l’XHTML.• Le GUI sono definite in modo dichiarativo in BXML (BackBase XML)• Lato client il BackBase Presentation Content interpreta il BXML e genera la

GUI in XHTML• Include una libreria di controlli estesa e di alta qualità grafica• Fornisce componenti server-side (remotizzazione)• Molto potente ma anche esigente in termini di risorse ed in termini di

compatibilità browsers• E’ un prodotto commerciale con licenza basata su numero di CPU server• Esiste una edizione community gratuita• Esempi• http://www.backbase.com/

© 2006 Quinary SpA

XMLHttpRequest IFrame Applet …

Remoting Toolkit – Client Side DWR, JSON-RPC, dojo bind, BackBase…

GUI Toolkit Dojo, BackBase, Scriptaculous, SmartClient…

Java

scrip

t D

OM

bin

ding

Remoting Toolkit – Server Side

Java PHP ASP Ruby …

Trasporto HTTP(S)

© 2006 Quinary SpA

Remoting Toolkits

• Forniscono API di alto livello e cross-browser per invocare chiamate remote via Javascript

• Nascondono l’implementazione di basso livello (XMLHttpRequest, IFrame ecc…)

• Possono fornire servizi di marshalling/unmarshalling tra dati e strutture sia lato browser sia lato server, con conseguente gestione del mapping tra data types client e server

• Possono fornire servizi di proxying e remote method invocation• Implementano meccanismi di ottimizzazione (caching, queueing, batch

processing)

© 2006 Quinary SpA

DWR (Direct Web Remoting)

• Consente di creare in modo trasparente proxy Javascript di oggetti server side (Java)

• Comprende sia una libreria client che una libreria server• Richiede che la parte server sia Java. La componente server è una Servet• Il mapping tra oggetti client ed oggetti server è definito in modo dichiarativo

in un descrittore XML (dwr.xml)• Ogni chiamata ad un metodo sul proxy invoca una corrispondente chiamata

remota.• Implementa un meccanismo di chiamata multipla in batch per ottimizzare

l’utilizzo delle risorse• Consente di gestire lo scoping degli oggetti lato server (pagina, sessione)• Include un utile strumento per il debug• http://getahead.ltd.uk/dwr/

© 2006 Quinary SpA

• JSON (Javascript Object Notation) è un formato per lo scambio di dati, alternativo all’XML e molto più leggero da processare da parte dei comuni linguaggi di programmazione

• Non richiede parsing Javascript ad hoc (JSON è un sottoinsieme dell’ECMA 262)

[{ “name”: “Dion Almaer”, “age” : 12, “pets”: [“sandy”, “fluffy”] }, { “name”: “Ben Galbraith”, “age” : 11, }]

© 2006 Quinary SpA

• JSON-RPC definisce una specifica di interazione equivalente ad XML-RPC• Utilizza JSON come trasporto

• Esistono implementazioni nei principali linguaggi. (per Java esiste JSON-RPC-Java)

POST /JSON-RPC HTTP/1.1 User-Agent: Mozilla/4.0 Content-Type: text/plain Content-length: 59 { “method”: “examples.getStateName”, “params”: [ 41 ] }

© 2006 Quinary SpA

• Marshalling/unmarshalling di:• Tipi primitivi (int, long, short, byte, boolean, char, float, double)• Numbers (Float, Integer, etc...), Strings, Char and Byte arrays• Java Beans (in generale ogni Object con getters e setters)• Arrays di tipi primitivi, Strings, Numbers, Collections and Java Beans• Exceptions (ma non viene conservato il tipo di eccezione)• Collezioni concrete ed astratte:

• List, ArrayList, LinkedList, Vector• Map, HashMap, TreeMap, LinkedHashMap• Set, HashSet, TreeSet, LinkedHashSet• Dictionary, Hashtable

• Combinazioni arbitrarie di questi tipi

© 2006 Quinary SpA

• E’ un sottoinsieme del framework DOJO• E’ una generica API asincrona per effettuare chiamate remote

che incapsula diversi layers di trasporto (IFrames, XMLHttpRequest,..)

• L’API accetta un singolo oggetto Javascript che descrive la configurazione della chiamata (URL, headers, funzioni di callback, condizioni di errore)

• Funzionalità per intercettare il click del bottone Back/Forward ed invocare azioni ad-hoc

• http://dojotoolkit.org/

© 2006 Quinary SpA

dojo.io.bind, un esempio

var sampleFormNode = document.getElementById("formToSubmit");

dojo.io.bind({ formNode: sampleFormNode url: "http://foo.bar.com/processForm.cgi", load: function(type, evaldObj){ // hide the form when we hear back that it submitted // successfully sampleFormNode.style.display = "none"; }, backButton: function(){ // ...and then when the user hits // "back", re-show the form sampleFormNode.style.display = ""; }, forwardButton: function(){ // and if they hit "forward" before making //another request, this happens: sampleFormNode.style.display = "none";}, } );

• Esempio di submit di una form (sampleFormNode) e meccanismo di gestione dei bottoni Back/Forward

© 2006 Quinary SpA

Ajax Security

© 2006 Quinary SpA

• Il codice Javascript è eseguito all’interno di una sandbox che impedisce l’apertura di connessioni verso hosts diversi da quello di origine (analoga alla policy della sandbox delle JVM nei browsers)

• IFrames possono essere istruiti programmaticamente in Javascript per caricare dati da hosts diversi, ma la sandbox impedisce che contenuti di IFrames di hosts diversi possano essere acceduti/alterati via Javascript

Private network Browser Public

internet

XMLHttpRequest.open(“GET”, “http://192.168.0.1”)

© 2006 Quinary SpA

URL Notehttp://www.mysite.com/script1.jshttp://www.mysite.com/script2.js

OK

http://www.mysite.com:8080/script1.jshttp://www.mysite.com/script2.js

KO Il numero di porta non coincide

https://www.mysite.com/script1.jshttp://www.mysite.com/script2.js

KO Protocollo differente

http://www.mysite.com/script1.jshttp://192.168.0.1/script2.js

KO Anche se gli IP coincidono…

http://www1.mysite.com/script1.jshttp://www2.mysite.com/script2.js

dipende…

OK se entrambi gli script troncano il dominio:

document.domain=“mysite.com”;

© 2006 Quinary SpA

• Proxy locale del servizio remoto (discusso nei patterns)

oppure:

• Interazione con il security manager del browser• Internet Explorer: chiede conferma durante la prima connessione verso la

risorsa remota. Le successive connessioni sono effettuate senza conferma• Mozilla: è necessario scrivere codice che interagisca con l’oggetto

netscape.security.PrivilegeManager, che tuttavia per default non è esposto al Javascript (occorre impostare a true il valore della variabile di configurazione signed.applets.codebase_principal_support)

Oppure ancora:

• Codice client signed, che tuttavia è un’opzione disponibile solo per i browsers Mozilla

© 2006 Quinary SpA

• Non esiste attualmente alcuna API standardizzata per interfacciare il security model del browser

• I principali browsers hanno comportamenti estremamente diversi quando si tratta di accedere a risorse esterne alla sandbox

• La soluzione migliore al momento appare quella del proxying locale

• Nota: usando le funzionalità di proxying di Apache è possibile mappare URL locali su servizi remoti in modo molto semplice

ProxyPass /remote/ http://remoteserver.com/

© 2006 Quinary SpA

• Ajax supporta HTTPS (XMLHttpRequest ed IFrames supportano url “https://”)

…ma c’è un problema…

• La sandbox del browser non consente cross-content e cross-scripting tra risorse HTTP ed HTTPS

• Quindi anche se HTTPS è richiesto solo per poche transazioni, molte risorse devono essere scaricate con lo stesso protocollo

• HTTPS richiede encription “on the fly” ed è oneroso in termini di risorse, dovrebbe essere usato solo ove strettamente necessario

• Esempio: pagina di login di GMail.

© 2006 Quinary SpA

• Può essere una alternativa all’HTTPS in situazioni quali la autenticazione tramite password

• Esistono librerie Javascript che implementano generatori MD5 (JavaScript MD5)

1. Client: Richiesta al server di una chiave pubblica random2. Client: Concatenazione password+chiave pubblica3. Client: calcolo MD54. Client: submit5. Server: Concatenazione password memorizzata+chiave pubblica6. Server: calcolo MD57. Server: verifica che i digests coincidano

• Questa soluzione ha comunque il problema che la password deve essere memorizzata in chiaro lato server, quindi deve essere passata in chiaro o in HTTPS in fase di registrazione

© 2006 Quinary SpA

Strumenti di sviluppo

© 2006 Quinary SpA

IDE ed editors che supportano code completion, ed utilities per Javascript• JSEclipse Eclipse plugin • JetBrains Intellij IDEA

Librerie per il logging client side• Lumberjack (logging + console Javascript)• Log4js (API simile a Log4j)

Debuggers• Venkman (estensione di Firefox)• Microsoft Script Debugger/Microsoft Script Editor

Unit Testing• Selenium• JSUnit (port di JUnit in JavaScript)

© 2006 Quinary SpA

• Mozilla Firefox è uno strumento insostituibile per lo sviluppo di applicazioni Ajax• Esistono numerose estensioni di Firefox realizzate per il supportare lo sviluppo

ed il troubleshooting• WebDeveloper: validazioni HTML, CSS, Javascript, informazioni su headers e

cookies, ogni tipo di hacking sulla struttura del documento.• DOM Inspector: visualizzazione struttura del DOM e ricerche XPath• Selenium Recorder: consente di registrare azioni sulla GUI e di salvarle in

uno script Selenium per il successivo utilizzo in una suite di tests automatici• ExecuteJs: console per l’esecuzione di codice Javascript nel contesto della

pagina visualizzata• Venkman: Javascript debugger

© 2006 Quinary SpA

Evoluzioni della tecnologia Ajax

© 2006 Quinary SpA

ECMAScript for XML (E4X)

• Estensione del linguaggio per supportare nativamente l’XML• Notevole semplificazione rispetto all’API DOM• Implementato su Firefox 1.5

var order=<order> <customer> <firstname>John</firstname> <lastname>Doe</lastname> </customer> <item> . . . </item> </order>

var x = 3;

var fullname = order.customer firstname + ‘ ‘ + order.customer.lastname;

Var total = order.item.price * order.item.quantity;

Creazione DOM: Attraversamento DOM tree:

© 2006 Quinary SpA

• Opera Platform: è un application framework per lo sviluppo di applicazioni per dispositivi mobili basata sul Opera Browser

• Opera Application Player: versione estesa del browser Opera mobile che supporta Ajax ed abilita le applicazioni Web ad utilizzare funzioni native dei telefoni (es. messaging, calendar, livelli batteria e segnale, fotocamera ecc…).

• Application Framework: fornisce utilities ed elementi GUI predefiniti per facilitare lo sviluppo di applicazioni

© 2006 Quinary SpA

Cosa offre Quinary, oggi.

AJAXSCOPEAJAX enrichment program: “ripulisci” il tuo sito con Ajax.

• analisi del vostro sito e identificazione di una sezione o di un servizio migliorabile con Ajax

• valutazione sulle opportunità di miglioramento ottenibili con Ajax• supporto tecnologico (scouting e design architetturale)• deliverable

• proof of concept di applicazione di Ajax alla sezione o al servizio identificato• piano di intervento per la migrazione ad Ajax

• costo: 5.000 €• durata: 2/3 settimane

© 2006 Quinary SpA

Contacts

Milan Office - Via Pietrasanta 14(20141) Milano – Italia

Telefono: + 39 (02) 3090 1500

Rome Office – Via Ercolano Salvi 18(00143) Roma – Italia

Telefono: + 39 (06) 4340 11

[email protected]

Informativa Privacy ai sensi del D.Lgs. 196/03. Quinary SpA, quale Titolare del trattamento dei dati personali, la informa che i suoi dati verranno trattati nel pieno rispetto del D.Lgs. 196/03. Il testo completo dell’Informativa ed i riferimenti ai Responsabili sono visionabili alla sezione Privacy del website: www.quinary.com.

© 2006 Quinary SpA

Approfondimenti

© 2006 Quinary SpA

• Un Object Constructor è una normale funzione Javascript • Istanze sono create per mezzo dell’operatore new.• Proprietà assegnate a this sono pubbliche• Variabili di chiarate con var sono private

function Cat(name){ var priv = “I am a private variable”; this.name = name; this.talk = function(){ alert(this.name + " say meeow!"); } }

cat1 = new Cat("felix"); cat1.talk(); //alerts "felix says meeow!“

cat2 = new Cat("ginger"); cat2.talk() //alerts "ginger says meeow!"

© 2006 Quinary SpA

• In genere i metodi si definiscono via prototyping e non tramite inner function• L’inner function viene duplicata su ogni nuova istanza quindi occupa memoria

function Cat(name){ this.name = name; this.talk = function(){ alert(this.name + " say meeow!"); } }

Cat.prototype.changeName = function(name){ this.name = name; }

firstCat = new Cat(“Felix"); firstCat.changeName("Bill"); firstCat.talk() //alerts "Bill says meeow!"

© 2006 Quinary SpA

• E’ possibile usare il prototyping per estendere ed arricchire gli oggetti predefiniti (solo quelli istanziabili via new).

• Esempio: alcuni browsers non supportano shift() ed unshift() per gli arrays….

if(!Array.prototype.shift){ Array.prototype.shift = function(){ firstElement = this[0]; this.reverse(); this.length = Math.max(this.length-1,0); this.reverse(); return firstElement; } }

if(!Array.prototype.unshift){ ... }

© 2006 Quinary SpA

• Javascript supporta ereditarietà per mezzo del prototyping diversamente dall’usuale ereditarietà basata sul concetto di classe

function Base(){ this.override = function(){alert(“Base::override”);} this.baseFunction = function(){“Base::baseFunction”} }

function Derive(){ this.override = function(){alert(“Derive::override”)}; }

Derive.prototype = new Base();

d.override(); // Alerts “Base::baseFunction” d.baseFunction(); // Alerts “Derive::override”

© 2006 Quinary SpA

• In Javascript ciascun oggetto è rappresentabile come un array associativo• Gli operatori typeof ed instanceof consentono di determinare a runtime il tipo di un

oggetto

function Cat(name){ this.name = name; this.talk = function(){ alert(this.name + " say meeow!"); } }

theCat = new Cat(“miao"); alert(theCat[‘name’]); // miao alert(typeof theCat[‘talk’]); // function alert(theCat instanceof Cat); // true