• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Download It
 

Download It

on

  • 428 views

 

Statistics

Views

Total Views
428
Views on SlideShare
428
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Download It Download It Presentation Transcript

    • 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) netCDF profile netCDF profile CDP service netCDF service Database loader
    • 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) netCDF profile netCDF profile CDP service netCDF service Database loader
    • DChart architecture Web Browser JavaScript DChart Servlet Dapper OPeNDAP Protocol (HTTP) XML/JavaScript (HTTP) JFreeChart SGT OPeNDAP Client XML Engine
    • 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
      • <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?
    • More info
      • PMEL Dapper Server
      • http://dapper.pmel.noaa.gov/dapper
      • PMEL Dapper UI
      • http://dapper.pmel.noaa.gov/dchart
      • Downloads, propaganda
      • http:// www.epic.noaa.gov/epic/software/dapper /
      • [email_address]
    • Back
    • Back