1 ajax and dapper: the good, the bad, and the ugly joe sirott pmel/noaa

11

AJAX and Dapper: The AJAX and Dapper: The Good, the Bad, and the UglyGood, the Bad, and the Ugly

Joe SirottJoe Sirott

PMEL/NOAAPMEL/NOAA

22

What is Dapper?What is Dapper?

Web server that provides distributed access to Web server that provides distributed access to in-situ data via OPeNDAP protocolin-situ data via OPeNDAP protocol

Clients include GrADS, Matlab, NcBrowse, Java Clients include GrADS, Matlab, NcBrowse, Java Ocean AtlasOcean Atlas

Available data:Available data:– PMEL EPIC databasePMEL EPIC database– ARGO profiles ARGO profiles – NODC World Ocean Database 2001NODC World Ocean Database 2001

All components are open-sourceAll components are open-source

33

What is OPeNDAP?What is OPeNDAP?

OPeNDAP (Open source Project for a OPeNDAP (Open source Project for a Network Data Access Protocol) is a Network Data Access Protocol) is a protocol for remotely accessing scientific protocol for remotely accessing scientific datadata

Uses HTTP as transportUses HTTP as transport

44

What does Dapper do?What does Dapper do?

Efficiently aggregates thousands of in-situ data Efficiently aggregates thousands of in-situ data files (>2000000 for WODB2001)files (>2000000 for WODB2001)Handles several in-situ data formats:Handles several in-situ data formats:– Argo GDAC netCDFArgo GDAC netCDF– PMEL EPIC netCDFPMEL EPIC netCDF– COARDS compliant netCDFCOARDS compliant netCDF

Supports time series or profilesSupports time series or profilesSupports space/time queriesSupports space/time queriesBased on HPCC funded Climate Data Portal Based on HPCC funded Climate Data Portal (Soreide, Zhu, Denbo)(Soreide, Zhu, Denbo)

55

Dapper architectural overviewDapper architectural overview

Uses relational database to store Uses relational database to store metadata and coordinate boundaries for metadata and coordinate boundaries for each profile/time series fileeach profile/time series file

Data maintained in original formatData maintained in original format

All data delivered as OPeNDAP All data delivered as OPeNDAP sequencessequences

66

Dapper architectureDapper architecture

CORBA (IIOP)

Climate Data Portal

MySQL

Java netCDFlibrary

netCDFprofile

netCDFprofile

Dapper HTTP Server

CDPservice

netCDFservice

OPeNDAP clientDChart

OPeNDAP Protocol(HTTP)

Database loader

77

But…But…

OPeNDAP in-situ data is poor stepchild of OPeNDAP in-situ data is poor stepchild of OPeNDAP gridded dataOPeNDAP gridded data

Few desktop clients support itFew desktop clients support it

Even fewer Web apps support itEven fewer Web apps support it

Some recent progress (GrADS, Java Some recent progress (GrADS, Java OceanAtlas) but change is slowOceanAtlas) but change is slow

88

DChartDChart

Browser based in-situ OPeNDAP clientBrowser based in-situ OPeNDAP client

Based on FY2004 HPCC funded project Based on FY2004 HPCC funded project for shipboard display of cruise datafor shipboard display of cruise data

AJAX based user interfaceAJAX based user interface

99

DChart Design GoalsDChart Design Goals

Highly responsive browser based user Highly responsive browser based user interfaceinterface

Low learning curveLow learning curve

Rapid previewing and downloading of Rapid previewing and downloading of Dapper datasetsDapper datasets

Highly interactive map for region selectionHighly interactive map for region selection

No Java applets or proprietary plug-insNo Java applets or proprietary plug-ins

1010

Dapper architecture diagramDapper architecture diagram

CORBA (IIOP)

Climate Data Portal

MySQL

Java netCDFlibrary

netCDFprofile

netCDFprofile

Dapper HTTP Server

CDPservice

netCDFservice

OPeNDAP clientDChart


Database loader

1111

DChart architectureDChart architecture

Web Browser

JavaScript

DChart Servlet Dapper


XML/JavaScript(HTTP)

JFreeChartSGT

OPeNDAPClient

XMLEngine

1212

DChart DemoDChart DemoNDBC videoNDBC videoArgo videoArgo video

1313

What is AJAX?What is AJAX?

Buzzword == AJAX == Asynchronous Buzzword == AJAX == Asynchronous Java and XML == Remote ScriptingJava and XML == Remote Scripting

First idea: Replace synchronous requests First idea: Replace synchronous requests to server with asynchronous requeststo server with asynchronous requests

Second idea: Use JavaScript to Second idea: Use JavaScript to create/change user interfacecreate/change user interface

1414

Traditional Web AppTraditional Web App

(from Adaptive Path)

1515

AJAX Web AppAJAX Web App

(from Adaptive Path)

1616

JavaScript and AJAXJavaScript and AJAX

1.1. JavaScript uses XmlHttpRequest object JavaScript uses XmlHttpRequest object to asynchronously request XML from to asynchronously request XML from serverserver

GET GET http://example.com/dchart?action=datasetshttp://example.com/dchart?action=datasets

<scichart><scichart>

<datasets><datasets>

<dataset id=“1”><dataset id=“1”>

<name>argo</name><long_name>Argo profiles</long_name><name>argo</name><long_name>Argo profiles</long_name>

</dataset></dataset>

</datasets></datasets>

</scichart></scichart>

1717


2.2. XSLT used to transform XML to HTML XSLT used to transform XML to HTML fragment when XML arrives at browser:fragment when XML arrives at browser:

<scichart><scichart>

<datasets><datasets>

<dataset id=“1”><dataset id=“1”>

<name>argo</name><long_name>Argo profiles</long_name><name>argo</name><long_name>Argo profiles</long_name>

</dataset></dataset>

</datasets></datasets>

</scichart></scichart>

1818


2.2. XSLT used to transform XML to HTML XSLT used to transform XML to HTML fragment when XML arrives at browser: fragment when XML arrives at browser:

<a class=“option” href=“1” onclick=“DsetWidget.option_click(this.event)”><a class=“option” href=“1” onclick=“DsetWidget.option_click(this.event)”>

Argo ProfilesArgo Profiles

</a></a>

1919


3.3. DOM used to insert HTML fragment in DOM used to insert HTML fragment in HTML page:HTML page:

<html><html>

……

<div><div>

<a class=“option” href=“1” onclick=“DsetWidget.option_click(this.event)”><a class=“option” href=“1” onclick=“DsetWidget.option_click(this.event)”>

Argo ProfilesArgo Profiles

</a></a>

</div></div>

<html><html>

2020

Good stuffGood stuff

Much more responsive user interfaceMuch more responsive user interface

Desktop application functionality in familiar Desktop application functionality in familiar Web browser interfaceWeb browser interface

Client responsible for state managementClient responsible for state management

Zero effort software updates (for users!)Zero effort software updates (for users!)

““Cool” factorCool” factor

2121

Bad stuffBad stuff

Requires “modern” browserRequires “modern” browser– DChart support currently limited to IE 6, Firefox DChart support currently limited to IE 6, Firefox

1.0.x, Mozilla1.0.x, Mozilla– Covers > 90% of users and alternative would be Covers > 90% of users and alternative would be

downloading desktop app downloading desktop app

Debugging is difficultDebugging is difficultA lot for developers to learn:A lot for developers to learn:

– XML,XPath,XSLT,JavaScript, CSS, DHTML, XML,XPath,XSLT,JavaScript, CSS, DHTML, DOM…DOM…

Libraries/frameworks immatureLibraries/frameworks immatureMaintenance and testing difficultMaintenance and testing difficult

2222

And the ugly…And the ugly…

Browser incompatibilities still an issue:Browser incompatibilities still an issue:– GET limited to 2048 characters in IEGET limited to 2048 characters in IE– IE window coordinate system different than FirefoxIE window coordinate system different than Firefox– IE memory leaks IE memory leaks

Legacy ActiveX reference countingLegacy ActiveX reference counting

Transparent images with alpha channelTransparent images with alpha channel

– Disappearing DOM nodes with XSLT in IEDisappearing DOM nodes with XSLT in IE

Ugly kludges required:Ugly kludges required:– GET/POST through Iframe to retain historyGET/POST through Iframe to retain history

2323

Future plansFuture plans

Constraints (QC flags, attributes)Constraints (QC flags, attributes)

Multiple plot windowsMultiple plot windows

Save/restore Web app stateSave/restore Web app state

More datasetsMore datasets

2424

Lessons LearnedLessons Learned

Desktop applications are moving to the Desktop applications are moving to the browser.browser.

It’s easier to move data to servers than It’s easier to move data to servers than servers to data.servers to data.

The response time of the back end is The response time of the back end is critical in AJAX applications.critical in AJAX applications.

It takes a lot more time to develop the It takes a lot more time to develop the back end than the user interface. back end than the user interface.

2525

Questions?Questions?

2626

More infoMore info

PMEL Dapper ServerPMEL Dapper Serverhttp://dapper.pmel.noaa.gov/dapperhttp://dapper.pmel.noaa.gov/dapper

PMEL Dapper UIPMEL Dapper UIhttp://dapper.pmel.noaa.gov/dcharthttp://dapper.pmel.noaa.gov/dchart

Downloads, propagandaDownloads, propagandahttp://http://www.epic.noaa.gov/epic/software/dapperwww.epic.noaa.gov/epic/software/dapper//

[email protected]@noaa.gov

2727Back

2828

Back

1 ajax and dapper: the good, the bad, and the ugly joe sirott pmel/noaa

Documents