yupeng fu kian win ong kevin zhao yannis papakonstantinou michalis petropoulos
DESCRIPTION
The FORWARD SQL-Based Declarative Framework for Ajax Applications. Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos. Vast Majority of Web Applications: Issue simple SQL commands , reflect new state on browser. Browser. Submit. Web Application. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/1.jpg)
Yupeng FuKian Win Ong
Kevin ZhaoYannis Papakonstantinou
Michalis Petropoulos
The FORWARD SQL-Based Declarative Framework
for Ajax Applications
![Page 2: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/2.jpg)
Vast Majority of Web Applications: Issue simple SQL commands, reflect new state on browser
Web Application
Database
Browser
INSERTUPDATEDELETE
SELECT
Submit
2
App server datain main memory
SessionObjectsSessionObjects
SessionObjects
![Page 3: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/3.jpg)
The Paradox
Most web applications are fundamentally simple;yet their development requires large amounts of code,both server-side* and client-side (JavaScript)
* Java, PHP, C#, Ruby etc.3
![Page 4: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/4.jpg)
Where is the extraneous code expended?
Low-level code addressing frictionsof the web application architectures
pre-2005: Pure server-side programming Plumbing code addressing language heterogeneities
post-2005: Ajax (also Flash, Silverlight) Data coordination code between Ajax page
and server state (main memory + database)
4
![Page 5: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/5.jpg)
Pre-2005: Pure server-side programming: Tedious code to integrate across three languages and computation hosts
Browser
Application Server
Database
HTMLDOM
Action
INSERT INTO reviews …
Java
Page Computation
SELECT *FROM proposals…SELECT * FROM reviews …
Java
Code with JDBC/SQL calls to combine database and application-server data
Code to combine database and application server data into HTML
RequestParameters
Database Server
SessionObjectsSessionObjects
SessionObjects
In MVC-coded applications of UCSD’s Web App programming class projects60 lines of plumbing code for each
line of SQL and 2 lines of control flow
5
![Page 6: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/6.jpg)
2005: Enter Ajax:A desktop feel to cloud-based applications
• Asynchronous partial update of the page
• Fancy JavaScript/Ajax componentsmaps, calendars, tabbed windows
6
![Page 7: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/7.jpg)
RequestParameters
Ajax: Mundane data coordination betweenpage state and server state (app server + database)
JavaScript
Action
INSERT INTO reviews …
Java
collect_args();response_handler = function(){ partial_renderer(); }send_request();Browser
Application Server
Database Server Database
Page Computation
SELECT *FROM proposals…SELECT * FROM reviews …
JavaDelta
Queries
Diffs
SessionObjects
HTMLDOM
JavaScriptComponents
SessionObjects
JavaScript/Java code reflects page data & request parameters to the server
JavaScript components have different programmatic interfaces
JavaScript/Java code tuned to incrementally update HTML DOM & JavaScript components
7
![Page 8: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/8.jpg)
For each action, yet another incremental page computation code and partial renderer
BrowserApplication Server
Pure Server-side Model Ajax Model
Page Computation Page Computation 1
Page Computation 2
Page Computation 3
Partial Renderer 1
Partial Renderer 2
Partial Renderer 3
Partial update requires different logic and imperative programming for each user action
Action 1
Action 2
Action 3
INSERT …
DELETE …
UPDATE …
8
Action 1
Action 2
Action 3
INSERT …
DELETE …
UPDATE …
![Page 9: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/9.jpg)
Goal of theFORWARD Web Application Programming Framework
• Remove the architectural frictions– Plumbing code addressing language heterogeneities– Data coordination code between Ajax page and server
state (app server main memory + database)• Make easy things easy while difficult things possible• Novelty: SQL-based declarative programming
1. “Unified application state” virtual database, comprisingentire application stateaccessible via SQL++ distributed queries
2. Ajax page as a rendered SQL++ view that is automatically and incrementally maintained
Actions and pages use just SQL++, no Java or JavaScriptAutomatic optimizations enabled 9
![Page 10: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/10.jpg)
FORWARD Interpreter (e.g., http://forward.ucsd.edu )
FORWARD Application: Set of declarative configurations, interpreted in a location-transparent way
FORWARD Application nsf_reviewingAction ConfigurationAction Configuration save_review
Page ConfigurationPage Configurationreview
Source Configurations & SQL++ Schema Definitions
10
Browser-side FORWARD JavaScript librariesHTMLDOM
JavaScriptComponents
Unified SQL++ Application State
![Page 11: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/11.jpg)
FORWARD Application:Operation
11
FORWARD Interpreter (e.g., http://forward.ucsd.edu )
FORWARD Application nsf_reviewing
Browser-side FORWARD JavaScript librariesHTMLDOM
JavaScriptComponents
Action ConfigurationAction Configuration save_review
Page ConfigurationPage Configurationreview
Source Configurations & SQL++ Schema Definitions
Unified SQL++ Application State
![Page 12: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/12.jpg)
Actions Access Unified Application State via SQL++
12
FORWARD Interpreter (e.g., http://forward.ucsd.edu )
FORWARD Application nsf_reviewing
Browser-side FORWARD JavaScript librariesHTMLDOM
JavaScriptComponents
Unified SQL++ Application StateAction
Outputs
Core PageRequest
ParametersDatabaseSessionObjects
Action ConfigurationAction Configuration save_review
Page ConfigurationPage Configurationreview
Source Configurations & SQL++ Schema Definitions
Core page & request parameters: Abstraction of relevant part of browser state
SQL++ includes:NestingVariabilityIdentityOrdering
![Page 13: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/13.jpg)
Actions as Compositions of Services
Action Configuration save_review
SQL++condition
SQL++update
defaultyesgoto page:
errorgoto page:
home
sent
successfailure
goto page:review
13
noJava
// Insert submitted review into reviews table of the hosted databaseINSERT INTO hosted.reviews(proposalId, comment, rating)VALUES (request.pid, request.myComment, request.myRating)
// Has the reviewer reviewed all assigned proposalsNOT EXISTS( SELECT * FROM … )
![Page 14: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/14.jpg)
Pages as Rendered SQL++ Views,with User Input Attributes
14
FORWARD Interpreter (e.g., http://forward.ucsd.edu )
FORWARD Application nsf_reviewing
Browser-side FORWARD JavaScript librariesHTMLDOM
JavaScriptComponents
Action ConfigurationAction Configuration save_review
Page ConfigurationPage Configurationreview
Source Configurations & SQL++ Schema Definitions
Unified SQL++ Application State
![Page 15: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/15.jpg)
<fstmt:for query=" // proposals assigned to // currently logged-in reviewer SELECT p.id AS pid, p.title FROM hosted.proposals AS p WHERE EXISTS( SELECT * FROM hosted.assignments AS a WHERE a.proposal = p.id AND a.reviewer =
session.user"> <tr> ... <td>{pid}</td> ... </tr></fstmt:for>
Page Configuration Follows Popular Frameworks:HTML + FORWARD statements & expressions, using SQL++
Overall structure reminiscent of XQuery and SQL/XML
15
![Page 16: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/16.jpg)
<fstmt:for query=" SELECT ..."><tr> ... <td> <funit:bar_chart> <bars> <fstmt:for query="SELECT …"> <bar> <id> {gid} </id> <value> {score} </value> </bar> </fstmt:for> </bars> </funit:bar_chart> </td> ...
Page Configuration: Ajax/JavaScript Components Simply by FORWARD Unit Tags
16
After each action, the FORWARD interpreter automatically & incrementally updatesHTML and JavaScript components
![Page 17: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/17.jpg)
Core Page and Request Parameters:Mirror of named page data
<fstmt:for name="proposals" query=" SELECT p.id AS pid, p.title FROM hosted.proposals AS p WHERE ..."><tr>... <funit:editor name="myReview"> ... </funit:editor> ... <funit:select name="myRating"> ... </funit:select> ... <funit:button onclick="save_review"/></tr></fstmt:for>
Core Page
proposals
Automatically inferred
pid my_review rating
17
![Page 18: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/18.jpg)
Implementation Issues Summary
• Incremental page maintenance:Data: Deferred incremental SQL++ view maintenanceVisual units: Efficient wrapping of components from Dojo, Yahoo UI, Google Visualization, Stanford Protovis
• Query optimization for distributed queries over small main memory sources and a large persistent database
• Internal mappings, resolving heterogeneities– query results to visual state– visual state to core and request schemas
18
![Page 19: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/19.jpg)
Related Work on Removing Cross-Layer Frictions
Browser
Database server
Application server
SQL Data
Browser Mirror Java (C#) ObjectsJava (C#)
Database Mirror Java (C#) ObjectsApp Server
Objects
?
19
HTMLDOM
JavaScriptComponents
ASP.NET,GWT
Hibernate,Entity Framework
![Page 20: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/20.jpg)
Future work
• Client side computation optimizations– enabled by declarativeness, location transparency– deliver efficiency, disconnected operation
• Optimizations for updating a myriad views– leveraging pub-sub works
• Visual Do-It-Yourself development
20
![Page 21: Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos](https://reader034.vdocuments.site/reader034/viewer/2022051317/56816739550346895ddbed1b/html5/thumbnails/21.jpg)
21
FORWARD Demo