View
221
Download
0
Category
Preview:
Citation preview
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
OPeNDAP Protocol(HTTP)
Database loader
1111
DChart architectureDChart architecture
Web Browser
JavaScript
DChart Servlet Dapper
OPeNDAP Protocol(HTTP)
XML/JavaScript(HTTP)
JFreeChartSGT
OPeNDAPClient
XMLEngine
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
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
JavaScript and AJAXJavaScript and AJAX
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
JavaScript and AJAXJavaScript and AJAX
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
JavaScript and AJAXJavaScript and AJAX
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.
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//
Joe.Sirott@noaa.govJoe.Sirott@noaa.gov
Recommended