Interactive Web-based Analysis Clients using AJAX: examples for …ifae2006/talks/... · 2006. 4....

IFAE06 - Pavia - Italy April 2006http://iguana.web.cern.ch

Interactive Web-based Analysis

Clients using AJAX: examples for

CMS, ROOT and GEANT4

Giulio EulisseGeorge AlversonShahzad MuzaffarIanna OsborneLucas TaylorLassi Tuura

Northeastern University, Boston (MA), U.S.A.

http://iguanacms.web.cern.ch


IFAE06 - Pavia - Italy- April, 2006 Giulio Eulisse, Northeastern Universityhttp://iguana.web.cern.ch

What is AJAX?

2



IFAE06 - Pavia - Italy - April, 2006 Giulio Eulisse, Northeastern Universityhttp://iguana.web.cern.ch

What AJAX is not...

3




What AJAX is not...

4




What AJAX is not...

5




Asynchronous

Javascript

And

XML

6




AJAX

AJAX is a buzz-word used to indicate a set of techniques and programming patterns, involving Javascript and XML, which allow to create web applications that give the same feel and

responsiveness of traditional desktop applications.

7




Traditional web pages workflow

8

Client

Server

HTTP GET Request

The client does an HTTP GET Request to the server

time





9

Client

Server

The server constructs the full web page

time





10

Client

Server

The full page is sent...

time





11

Client

Server

...and processed by the client...

time





12

Client

Server

If the complete web page is complex enough, a big interval of time intercours between request for a page and its actual availability to the user

time

Big latency!





13

Client

Server

moreover the user cannot use the web page until fully loaded.

time

Period the web page is unavailable to the user




AJAX

14

Client

Server

The client does an HTTP GET Request to the server

time




AJAX

15

Client

Server

The server constructs the minimal web page for the user to start browsing

time




AJAX

16

Client

Server

The minimal page is sent

time




AJAX

17

Client

Server

The client processes the web page

time




AJAX

18

Client

Server

...if (and only if) more information is requested by the user....

time




AJAX

19

Client

Server

a new request for DELTAs is done

time

XMLHTTPRequest




AJAX

20

Client

Server

the server processes the request and decides what has changed

time

Server processing deltas




AJAX

21

Client

Server

response is given formatting delta into XML

time

with deltas




AJAX

22

Client

Server

the delta is processed asynchronously using javascript

time

Asynchronous processing




AJAX

23

Client

Server

and the page is finally updated

time

Page update




AJAX

24

Client

Server

iterate on new user’s requests

time




The AJAX advantage

25

Client

Server

time




The AJAX advantage

26

Client

Server

time

LOW LATENCY!




The AJAX advantage

27

Client

Server

time

Reduced time the web page is not available




The AJAX advantage

28

Traditional AJAX

data

sen

t

time

Initial user’s request

User’s request / page

update

User’s request / page

update

On update only deltas are sent




IGUANA and AJAX

29




Interactive

Graphics for

User

Analysis

30



CHEP06 - Mumbai - INDIA - February, 2006 Giulio Eulisse, Northeastern Universityhttp://iguana.web.cern.ch

IGUANA object model and visualization toolkit

Data sources

Offline softwareOnline software Data Quality Monitoring G4

QT Open Inventor ROOT

31





Data sources



32





Data sources



33





Data sources



34





Data sources



35





Data sources



36





Data sources


QT Open Inventor ROOT IGUANA embedded HTTP/1.1 server IGUANA Web Services Framework

IGUANA Web Services IGUANA Javascript GUI library

37





Data sources




38





Data sources




39





Data sources




40





Data sources




41





Data sources




42





Data sources




43




G4 Visualization

44

Tree browser with the full G4 description of CMS, as found in the old OSCAR

simulation program

Live, navigable by mouse dragging

3D window.Does not require any plugin.

Framework controller.

Panning and zooming

controllers




CMS offline software

45

Getting ready for CMS cosmic challenge




Generic DQM GUI

46

QT & ROOT




Generic DQM GUI

47

AJAX&ROOT




Generic DQM GUI

48

The two implementations share most of the code!!!

AJAX allows to have the same behaviour of desktop and web applications.

QT AJAX




Generic DQM GUI

49

DQM Services

Internal object representations

Controller

Root ModelQT Tree Model

QT GUI and controls




Generic DQM GUI

50

DQM Services

Internal object representations

Controller

Root ModelQT Tree Model

QT GUI and controls

XML Tree Model

IGUANA Web Services for controls

JAVASCRIPT GUI




MC Request system

51

Javascript generated GUI with connection to backend DBs via CORAL




MC Request system

52

Tree widget populated on the fly with requests from the request DB.

Actions performed by the toolbars and menus are lazily loaded only when clicking.




Google Map

53




Tracker Map

54




Final words

55




AJAX recap

v AJAX breaks the GET/DISPLAY/RELOAD paradigm used by standard web pages.

v In AJAX web applications data is transferred a little bit at the time in small chunks, when the user requests for it.

v The updates of web pages are asynchronous and happen without touching what the user sees until the end.

v It allows complex, interactive, low latency web applications, without the need for external plugins or JAVA virtual-machine (JAVASCRIPT is not related to JAVA !!!)

56




IGUANA and AJAX

IGUANA provides a framework for creating AJAX applications and has examples for a variety of tasks

CMS, ranging from event display to data quality monitoring to MC request system.

57




Who else uses AJAX

v There are a few “startups” ;) that are using AJAX techniques more and more as well...

58




Who else uses AJAX


59




Who else uses AJAX


60




and a few others...

61



Date post:	17-Aug-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

Interactive Web-based Analysis Clients using AJAX: examples for …ifae2006/talks/... · 2006. 4....

Documents