1. Yupeng Fu Kian Win Ong Kevin Zhao Yannis Papakonstantinou Michalis Petropoulos The FORWARD SQL-Based Declarative Framework for Ajax Applications

2. Vast Majority of Web Applications: Issue simple SQL commands, reflect new state on browser Web Application Database Browser INSERT UPDATE DELETE SELECT Submit 2 App server data in main memory Session Objects Session Objects Session Objects Session Objects Session Objects Session Objects

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

4. Where is the extraneous code expended? Low-level code addressing frictions of 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

5. Pre-2005: Pure server-side programming: Tedious code to integrate across three languages and computation hosts Browser Application Server Database HTML DOM Action INSERT INTO reviews … Java Page Computation SELECT * FROM proposals… SELECT * FROM reviews … 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 Request Parameters Request Parameters Database Server Session Objects Session Objects Session Objects Session Objects Session Objects Session Objects In MVC-coded applications of UCSD’s Web App programming class projects 60 lines of plumbing code for each line of SQL and 2 lines of control flow 5

6. 2005: Enter Ajax: A desktop feel to cloud-based applications Asynchronous partial update of the page Fancy JavaScript/Ajax components maps, calendars, tabbed windows 6

7. Request Parameters Request Parameters Ajax: Mundane data coordination between page state and server state (app server + database) JavaScript Action INSERT INTO reviews … Java collect_args(); response_handler = function(){ partial_renderer(); } send_request(); collect_args(); response_handler = function(){ partial_renderer(); } send_request(); Browser Application Server Database Server Database Page Computation SELECT * FROM proposals… SELECT * FROM reviews … SELECT * FROM proposals… SELECT * FROM reviews … Java Delta Queries Delta Queries Diffs Session Objects Session Objects HTML DOM JavaScript Components Session Objects Session Objects 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 JavaScript/Java code tuned to incrementally update HTML DOM & JavaScript components 7

8. For each action, yet another incremental page computation code and partial renderer Browser Application Server Pure Server-side ModelAjax 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 …

9. Goal of the FORWARD 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, comprising entire application state accessible 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 JavaScript Automatic optimizations enabled 9

10. FORWARD Interpreter (e.g., http://forward.ucsd.edu ) FORWARD Application: Set of declarative configurations, interpreted in a location-transparent way FORWARD Application nsf_reviewing Action Configuration Action Configuration save_review Page Configuration review Page Configuration review Source Configurations & SQL++ Schema Definitions 10 Browser-side FORWARD JavaScript libraries HTML DOM JavaScript Components Unified SQL++ Application State

11. FORWARD Application: Operation 11 FORWARD Interpreter (e.g., http://forward.ucsd.edu ) FORWARD Application nsf_reviewing Browser-side FORWARD JavaScript libraries HTML DOM JavaScript Components Action Configuration Action Configuration save_review Page Configuration review Page Configuration review Source Configurations & SQL++ Schema Definitions Unified SQL++ Application State

12. Actions Access Unified Application State via SQL++ 12 FORWARD Interpreter (e.g., http://forward.ucsd.edu ) FORWARD Application nsf_reviewing Browser-side FORWARD JavaScript libraries HTML DOM JavaScript Components Unified SQL++ Application State Action Outputs Action Outputs Core Page Request Parameters Database Session Objects Session Objects Action Configuration Action Configuration save_review Page Configuration review Page Configuration review Source Configurations & SQL++ Schema Definitions Core page & request parameters: Abstraction of relevant part of browser state SQL++ includes: Nesting Variability Identity Ordering

13. Actions as Compositions of Services Action Configuration save_review SQL++ condition SQL++ update SQL++ update default yes goto page: error goto page: error goto page: home goto page: home email sent success failure goto page: review goto page: review 13 no Java // Insert submitted review into reviews table of the hosted database INSERT INTO hosted.reviews(proposalId, comment, rating) VALUES (request.pid, request.myComment, request.myRating) // Has the reviewer reviewed all assigned proposals NOT EXISTS( SELECT * FROM … )

14. 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 libraries HTML DOM JavaScript Components Action Configuration Action Configuration save_review Page Configuration review Page Configuration review Source Configurations & SQL++ Schema Definitions Unified SQL++ Application State

15. <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">... {pid}... Page Configuration Follows Popular Frameworks: HTML + FORWARD statements & expressions, using SQL++ Overall structure reminiscent of XQuery and SQL/XML 15

16. <fstmt:for query=" SELECT...">... {gid} {score}... Page Configuration: Ajax/JavaScript Components Simply by FORWARD Unit Tags 16 After each action, the FORWARD interpreter automatically & incrementally updates HTML and JavaScript components

17. 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...">............... <funit:button onclick="save_review"/> Core Page proposals Automatically inferred pidmy_reviewrating 17

18. Implementation Issues Summary Incremental page maintenance: Data: Deferred incremental SQL++ view maintenance Visual 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

19. Related Work on Removing Cross-Layer Frictions Browser Database server Application server SQL Data Browser Mirror Java (C#) Objects Java (C#) Database Mirror Java (C#) Objects App Server Objects App Server Objects ? 19 HTML DOM JavaScript Components ASP.NET, GWT ASP.NET, GWT Hibernate, Entity Framework Hibernate, Entity Framework

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

21. FORWARD Demo 21