# Presentation: 199028

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

- Joe Sirott
- PMEL/NOAA

## What is Dapper?

- Web server that provides distributed access to in-situ data via OPeNDAP protocol
- Clients include GrADS, Matlab, NcBrowse, Java Ocean Atlas
- Available data:
- PMEL EPIC database
- ARGO profiles
- NODC World Ocean Database 2001
- All components are open-source

## What is OPeNDAP?

- OPeNDAP (Open source Project for a Network Data Access Protocol) is a protocol for remotely accessing scientific data
- Uses HTTP as transport

## What does Dapper do?

- Efficiently aggregates thousands of in-situ data files (>2000000 for WODB2001)
- Handles several in-situ data formats:
- Argo GDAC netCDF
- PMEL EPIC netCDF
- COARDS compliant netCDF
- Supports time series or profiles
- Supports space/time queries
- Based on HPCC funded Climate Data Portal (Soreide, Zhu, Denbo)

## Dapper architectural overview

- Uses relational database to store metadata and coordinate boundaries for each profile/time series file
- Data maintained in original format
- All data delivered as OPeNDAP sequences

## Dapper architecture

**CORBA (IIOP)**

** **

**Climate Data Portal **

** **

**MySQL**

** **

**Java netCDF**
**library**

**Dapper HTTP Server**

**OPeNDAP client****DChart**

**OPeNDAP Protocol**
**(HTTP)**

## But...

- OPeNDAP in-situ data is poor stepchild of OPeNDAP gridded data
- Few  desktop clients support it
- Even fewer Web apps support it
- Some recent progress (GrADS, Java OceanAtlas) but change is slow

## DChart

- Browser based in-situ OPeNDAP client
- Based on FY2004 HPCC funded project for shipboard display of cruise data
- AJAX based user interface

## DChart Design Goals

- Highly responsive browser based user interface
- Low learning curve
- Rapid previewing and downloading of Dapper datasets
- Highly interactive map for region selection
- No Java applets or proprietary plug-ins

## Dapper architecture diagram

**CORBA (IIOP)**

** **

**Climate Data Portal **

** **

**MySQL**

** **

**Java netCDF**
**library**

**Dapper HTTP Server**

**OPeNDAP client****DChart**

**OPeNDAP Protocol**
**(HTTP)**

## DChart architecture

## DChart DemoNDBC videoArgo video

## What is AJAX?

- Buzzword == AJAX == Asynchronous Java and XML == Remote Scripting
- First idea: Replace synchronous requests to server with asynchronous requests
- Second idea: Use JavaScript to create/change user interface

## Traditional Web App

- (from Adaptive Path)

## AJAX Web App

- (from Adaptive Path)

## JavaScript and AJAX

- JavaScript uses XmlHttpRequest object to asynchronously request XML from server
- GET _[http://example.com/dchart?action=datasets](http://example.com/dchart?action=datasets)_
- <scichart>
-     <datasets>
-       <dataset id=“1”>
-          <name>argo</name><long_name>Argo profiles</long_name>
-       </dataset>
-     </datasets>
- </scichart>

## JavaScript and AJAX

- XSLT used to transform XML to HTML fragment when XML arrives at browser:
- <scichart>
-     <datasets>
-       <dataset id=“1”>
-          <name>argo</name><long_name>Argo profiles</long_name>
-       </dataset>
-     </datasets>
- </scichart>

## JavaScript and AJAX

- XSLT used to transform XML to HTML fragment when XML arrives at browser:
- <a class=“option” href=“1” onclick=“DsetWidget.option_click(this.event)”>
-    Argo Profiles
- </a>

## JavaScript and AJAX

- DOM used to insert HTML fragment in HTML page:
- <html>
- ...
-    <div>
-      <a class=“option” href=“1” onclick=“DsetWidget.option_click(this.event)”>
-        Argo Profiles
-      </a>
-   </div>
- <html>

## Good stuff

- Much more responsive user interface
- Desktop application functionality in familiar Web browser interface
- Client responsible for state management
- Zero effort software updates (for users!)
- “Cool” factor

## Bad stuff

- Requires “modern” browser
- DChart support currently limited to IE 6, Firefox 1.0.x, Mozilla
- Covers > 90% of users and alternative would be downloading desktop app
- Debugging is difficult
- A lot for developers to learn:
- XML,XPath,XSLT,JavaScript, CSS, DHTML, DOM...
- Libraries/frameworks immature
- Maintenance and testing difficult

## And the ugly...

- Browser incompatibilities still an issue:
- GET limited to 2048 characters in IE
- IE window coordinate system different than Firefox
- IE memory leaks
- Legacy ActiveX reference counting
- Transparent images with alpha channel
- Disappearing DOM nodes with XSLT in IE
- Ugly kludges required:
- GET/POST through Iframe to retain history

## Future plans

- Constraints (QC flags, attributes)
- Multiple plot windows
- Save/restore Web app state
- More datasets

## Lessons Learned

- Desktop applications are moving to the browser.
- It’s easier to move data to servers than servers to data.
- The response time of the back end is critical in AJAX applications.
- It takes a lot more time to develop the back end than the user interface.

## 

Questions?

- Questions?

## More info

- PMEL Dapper Server
- _[http://dapper.pmel.noaa.gov/dapper](http://dapper.pmel.noaa.gov/dapper)_
- PMEL Dapper UI
- _[http://dapper.pmel.noaa.gov/dchart](http://dapper.pmel.noaa.gov/dchart)_
- Downloads, propaganda
- _[http://](http://www.epic.noaa.gov/epic/software/dapper/)__[www.epic.noaa.gov/epic/software/dapper](http://www.epic.noaa.gov/epic/software/dapper/)__[/](http://www.epic.noaa.gov/epic/software/dapper/)_
- Joe.Sirott@noaa.gov

## Back

- _[Back](slide12.xml)_

## Back

- _[Back](slide12.xml)_