1 AJAX and Dapper: The Good, the Bad, and the Ugly Joe Sirott PMEL/NOAA.

Slides:

Advertisements

Similar presentations

The Live Access Server (Access to observational data) Jonathan Callahan (University of Washington) Steve Hankin (NOAA/PMEL – PI) Roland Schweitzer, Kevin.

Advertisements

Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 4: Web Browsing.

Cloud Computing Lecture #7 Introduction to Ajax Jimmy Lin The iSchool University of Maryland Wednesday, October 15, 2008 This work is licensed under a.

Multiple Tiers in Action

Microsoft ASP.NET AJAX - AJAX as it has to be Presented by : Rana Vijayasimha Nalla CSCE Grad Student.

ITWS-2210 / CSCI Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in.

Web-based Portal for Discovery, Retrieval and Visualization of Earth Science Datasets in Grid Environment Zhenping (Jane) Liu.

A closer look Dynamic Webpages Jessica Meyerson March 1, 2011.

Client/Server Architectures

Tools for accessing distributed in-situ data collections Donald W. Denbo, NOAA/PMEL-JISAO Jason E. Fabritz, NOAA/PMEL-JISAO Bernard J. Kilonsky, Sea Level.

WHAT IS A WEB APP? Van Kelly Yeshiva University July 6, 2013.

Beyond DHTML So far we have seen and used: CGI programs (using Perl ) and SSI on server side Java Script, VB Script, CSS and DOM on client side. For some.

Ruth Betcher Ruth Christie

GIS technologies and Web Mapping Services

AJAX By Steven Hernandez Research Analyst NIATEC.

ASP.NET + Ajax Jesper Tørresø ITNET2 F08. Ajax Ajax (Asynchronous JavaScript and XML) A group of interrelated web development techniques used for creating.

AJAX Without the “J” George Lawniczak. What is Ajax?

JavaScript, Fourth Edition Chapter 12 Updating Web Pages with AJAX.

XP New Perspectives on XML, 2 nd Edition Tutorial 10 1 WORKING WITH THE DOCUMENT OBJECT MODEL TUTORIAL 10.

Ajax Technology for the Web Nic Shulver, FCET, Staffordshire University Introduction What is it? Pros and Cons Why is it important? Traditional Client-Server.

AJAX Making Dynamic Web pages more Dynamic Jim Hendricks April 25th, 2006.

Matrix Mapping Tool Sam Gross Internship at Virtual Technology Corporation.

Lecture 19 Web Application Frameworks Boriana Koleva Room: C54

Instructor, Dr. Khalili Bahram Jeevan Kumar Gogineni.

1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe.

HTML. Principle of Programming  Interface with PC 2 English Japanese Chinese Machine Code Compiler / Interpreter C++ Perl Assembler Machine Code.

Weekend MS CS Program Internet and Web Technologies COT 5930 Web Project Development - Ajax Dr. Roy Levow, Associate Chair & Professor

NcBrowse A Graphical netCDF/OPeNDAP Browser Donald Denbo 1 & John Osborne 2 1 UW/JISAO-NOAA/PMEL, 2 OceanAtlas Software

Fisheries Oceanography Collaboration Software Donald Denbo NOAA/PMEL-UW/JISAO Presented by Nancy Soreide NOAA/PMEL AMS 2002/IIPS 10.3.

1 Dapper and Argo Joe Sirott PMEL/NOAA. 2 What is Dapper? Web server that provides distributed access to in-situ data via OPeNDAP protocol Clients include.

Building Rich Web Applications with Ajax Linda Dailey Paulson IEEE – Computer, October 05 (Vol.38, No.10) Presented by Jingming Zhang.

Relational Database vs. Data Files By Willa Zhu JISAO/UW - PMEL/NOAA March 25, 2005.

1 DAPPER: An OPENDAP Server for In-Situ Data Joe Sirott Donald W. Denbo, Willa H Zhu University of Washington PMEL/NOAA.

May 2003National Coastal Data Development Center Brief Introduction Two components Data Exchange Infrastructure (DEI) Spatial Data Model (SDM) Together,

NQuery: A Network-enabled Data-based Query Tool for Multi-disciplinary Earth-science Datasets John R. Osborne.

Session 1 Chapter 1 - Introduction to Web Development ITI 133: HTML5 Desktop and Mobile Level I

Chemical lot - HOW: Infrastructure set up based on SeaDataNet V1 efficient distributed Marine Data Management Infrastructure; Principle of “ADOPTED AND.

Recent developments and trends in Network Access to Oceanographic In-situ Data Nancy Soreide, NOAA/PMEL John “Oz” Osborne, NOAA/PMEL - OceanAtlas Software.

Ajax for Dynamic Web Development Gregory McChesney.

NOAAServer: Unified access to distributed NOAA data Ernest Daddio, NOAA/ESDIM Steve Hankin, NOAA/PMEL Donald Denbo, NOAA/PMEL/JISAO Nancy Soreide, NOAA/PMEL.

Information Technology: GrADS INTEGRATED USER INTERFACE Maps, Charts, Animations Expressions, Functions of Original Variables General slices of { 4D Grids.

A Climate Data Portal Focused on realtime and retrospective in situ data Nancy Soreide, Don Denbo, Willa Zhu, NOAA/PMEL Charles Sun, NOAA/NODC Bernie Kilonsky,

INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.

1 Adventures in Web Services for Large Geophysical Datasets Joe Sirott PMEL/NOAA.

Summer 2007 Florida Atlantic University Department of Computer Science & Engineering COP 4814 – Web Services Dr. Roy Levow Part 1 – Introducing Ajax.

1 What is JQuery. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax* interactions.

AJaX and SOA Partha Kuchana. Agenda What is AJaX Benefits & Problems AJaX & SOA AJaX architecture AJaX with No XML.

1 OceanShare: Interactive Access to Distributed In Situ Data in a Collaborative Tool Environment D.W. Denbo C.R. Windsor NOAA/Pacific Marine Environmental.

AJAX Use Cases for WSRP Subbu Allamaraju BEA Systems Inc WSRP F2F Meeting, May 2006.

A Climate Data Portal An FY2000 HPCC Proposal Nancy Soreide, Don Denbo, Willa Zhu, PMEL Charles Sun, NODC Bernie Kilonsky, U of Hawaii HPCC Project Review.

Distributed Data Servers and Web Interface in the Climate Data Portal Willa H. Zhu Joint Institute for the Study of Ocean and Atmosphere University of.

A Climate Data Portal Focused on realtime and retrospective in situ data Nancy Soreide, Don Denbo, Willa Zhu, PMEL Charles Sun, NODC Bernie Kilonsky, U.

INNOV-2: Build a Better Web Interface Using AJAX Chris Morgan Pandora Software Systems

Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.

 AJAX technology  Rich User Experience  Characteristics  Real live examples  JavaScript and AJAX  Web application workflow model – synchronous vs.

PHP and AJAX. Servers and Clients For many years we tried to move as much as possible to the server. Weak clients, poor bandwidth, browser compatibility..

EPIC Tools for in-situ data collections Donald W. Denbo, NOAA/PMEL Willa H. Zhu, NOAA/PMEL/JISAO John Osborne, OceanAtlas Software Christopher Moore, NOAA/PMEL/JISAO.

Introduction to ASP.NET development. Background ASP released in 1996 ASP supported for a minimum 10 years from Windows 8 release ASP.Net 1.0 released.

NcBrowse: A Graphical netCDF File Browser Donald Denbo NOAA-PMEL/UW-JISAO

In Situ Data Access Some reasons for success or failure Nancy N. Soreide, Donald W. Denbo NOAA Pacific Marine Environmental Laboratory IIPS Session 3B.

NQuery: A Network-enabled Data-based Query Tool for Multi-disciplinary Earth-science Datasets John R. Osborne 1, Kevin T. McHugh 2, and Donald W. Denbo.

NcBrowse: OPeNDAP Server Access and 3-D Graphics Presented by Nancy N. Soreide NOAA/PMEL Donald W. Denbo UW/JISAO-NOAA/PMEL.

Vineel Vutukuri. What is SPA? Why SPA? Pros & Cons When to use SPA?

INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Ken Wilner VP of Technology Progress Software.

Subbu Allamaraju BEA Systems Inc

HYCOM CONSORTIUM Data and Product Servers

Lecture 1: Multi-tier Architecture Overview

ExPLORE Complex Oceanographic Data

Presentation transcript:

1 AJAX and Dapper: The Good, the Bad, and the Ugly Joe Sirott PMEL/NOAA

2 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

3 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

4 What does Dapper do? Efficiently aggregates thousands of in-situ data files (> 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)

5 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

6 Dapper architecture CORBA (IIOP) Climate Data Portal MySQL Java netCDF library netCDF profile netCDF profile Dapper HTTP Server CDP service netCDF service OPeNDAP client DChart OPeNDAP Protocol (HTTP) Database loader

7 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

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

9 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

10 Dapper architecture diagram CORBA (IIOP) Climate Data Portal MySQL Java netCDF library netCDF profile netCDF profile Dapper HTTP Server CDP service netCDF service OPeNDAP client DChart OPeNDAP Protocol (HTTP) Database loader

11 DChart architecture Web Browser JavaScript DChart ServletDapper OPeNDAP Protocol (HTTP) XML/JavaScript (HTTP) JFreeChart SGT OPeNDAP Client XML Engine

12 DChart Demo NDBC video Argo video NDBC video Argo video NDBC video Argo video

13 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

14 Traditional Web App (from Adaptive Path)

15 AJAX Web App (from Adaptive Path)

16 JavaScript and AJAX 1. JavaScript uses XmlHttpRequest object to asynchronously request XML from server GET <scichart> argo Argo profiles argo Argo profiles </scichart>

17 JavaScript and AJAX 2. XSLT used to transform XML to HTML fragment when XML arrives at browser: <scichart> argo Argo profiles argo Argo profiles </scichart>

18 JavaScript and AJAX 2. XSLT used to transform XML to HTML fragment when XML arrives at browser: Argo Profiles Argo Profiles</a>

19 JavaScript and AJAX 3. DOM used to insert HTML fragment in HTML page: <html>… Argo Profiles Argo Profiles <html>

20 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

21 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

22 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

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

24 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.

25 Questions?

26 More info PMEL Dapper Server PMEL Dapper UI Downloads, propaganda /

27 Back

28 Back