Presentation is loading. Please wait.

Presentation is loading. Please wait.

FORWARD: Declarative Ajax Web Applications through SQL++ on a Unified Application State Yupeng Fu Kian Win Ong Yannis Papakonstantinou UC San Diego 1.

Similar presentations


Presentation on theme: "FORWARD: Declarative Ajax Web Applications through SQL++ on a Unified Application State Yupeng Fu Kian Win Ong Yannis Papakonstantinou UC San Diego 1."— Presentation transcript:

1 FORWARD: Declarative Ajax Web Applications through SQL++ on a Unified Application State Yupeng Fu Kian Win Ong Yannis Papakonstantinou UC San Diego 1

2 Web application framework Single language: SQL++ Zero frictions and automatic optimizations – Enable IT personnel to create Ajax apps and interactive visualizations – Improve development productivity Alpha release – http://forward.ucsd.edu – 8 applications (commercial + academic) 2 FORWARD

3 3 FORWARD Website http://forward.ucsd.edu

4 4 Simple Web Application

5 5

6 6

7 Mundane Low-Level Programming for Ajax Applications Browser Application Server Database DOM (XHTML), JavaScript (JSON) Java, Python etc.(Objects) SQL (Tables) Event Side-effect Convert JSON to objects Convert objects to tables Convert tables to objects Convert objects to JSON Challenge #1: Impedance mismatch due to different languages and data models Requires using multiple languages, tedious data modeling and coding 7

8 Mundane Low-Level Programming for Ajax Applications Browser Application Server Database DOM (XHTML), JavaScript (JSON) Java, Python etc.(Objects) SQL (Tables) Event Side-effect Retrieve user input Serialize and parse request Check access rights Parameterize SQL query INSERT INTO... Challenge #2: Distributed data access and programming due to multiple tiers and machines Requires partitioning code manually, and ad-hoc coordination across multiple machines 8

9 Mundane Low-Level Programming for Ajax Applications Browser Application Server Database DOM (XHTML), JavaScript (JSON) Java, Python etc.(Objects) SQL (Tables) Event Side-effect SELECT * FROM... WHERE id =... Instantiate partial HTML and JSON template Incrementally update old state to new state Incrementally re- render DOM and JavaScript components Challenge #3: Incrementally modifying old page to new page due to Ajax programming model Requires identifying data flow dependencies, correctly transitioning from one consistent state to another. 9

10 10 Incremental Updates are Error-Prone New requirements: Libraries with saved comments are green instead of red Multiple code paths to change: Code that loads the page Code that saves the comment Code complexity increases with number of events/actions

11 FORWARD Architecture Actions Unified Application State (UAS) Pages 11 SQL++ as single language (inspired by Hilda and Links) SQL extensions for semi-structured features (nesting, heterogeneity) State machine conceptual model No need for multiple tiers, machines, languages

12 12 Runtime Interpreter FORWARD Architecture Actions Unified Application State (UAS) Pages readwrite side effects next_page http://localhost/libraries Virtual database of different data sources Unifying data model PL/SQL++ INSERT, UPDATE, DELETE statements on UAS Control flow (conditionals, loops, functions)

13 13 Runtime Interpreter FORWARD Architecture Actions Unified Application State (UAS) Pages read Page instance rendering Declarative page as rendered queries Data of page is a SQL++ query over UAS Rendering of page is template markup Template markup for both HTML and rich JavaScript components No side-effects: can only read from UAS

14 14 Runtime Interpreter FORWARD Architecture Actions Unified Application State (UAS) Pages readwrite side effects next_page User Input Page instance rendering Ajax (XHR) read Action only saves comment Action does not specify how to replace the textarea and Save button on the page

15 FORWARD: Single Language, Location Transparent, Declarative Action Specifications Unified Application State (UAS) Specification Page Specifications SQL++ as single language Challenge #1: Impedance mismatch Declarative page as rendered queries Challenge #3: Incrementally modifying old page to new page 15 Virtual database Challenge #2: Distributed data access and programming

16 Motivation Architecture Syntax and Semantics – Unified Application State – SQL++ – Page – Action Future Work 16 Outline

17 17 UAS Specification Unified Application State (UAS) RDBMS (Tables) Session (Objects) URL Params (KV Pairs) User Input (JSON) define sql source db options { driver : 'postgresql', host : 'book_db_host', port : 5432, database : 'libraries', user : 'postgres', password : '9xk8NToA' } Source Specification SQL Source Wrapper Developer provides source specification Framework provides capability-based source wrappers that execute different subsets of SQL++ SQL++ queries over UAS virtual database Run by FORWARD distributed query processor Current sources: SQL database In-memory SQL++ values Future sources: JSON databases (MongoDB, CouchDB) Large-scale data services (BigQuery, Redshift) select... from db.libraries left join session.notes on... where...

18 18 SQL++ Data Model value = null | scalar | tuple | table scalar = primitive | type "(" primitive ")" tuple = "{" ( name : value "," )* "} table = "[" ( key? tuple "," )* "]" key = "(" primitive ")" { lat : 0.0, lng : 12.3,... } [ (1) { lat : 0.0, lng : 12.3 }, (2) { lat : 0.0, lng : 45.6 } ] 12.3 date('2013-08-30') Extended JSON syntax with rich types and keys Opposite of Math conventions! Data model designed to capture both SQL tables and JSON for the need of pages Captures subset of JSON used in ~30 JavaScript components

19 19 SQL++ Data Model Extensions over SQL tables: Optional type checking Root value Nesting Heterogeneity Optional keys Extensions over JSON Optional keys Rich scalar types (e.g. dates) Work in progress Order Table of scalars/tables Analogous SQL++ extensions to query language value = null | scalar | tuple | table scalar = primitive | type "(" primitive ")" tuple = "{" ( name : value "," )* "} table = "[" ( key? tuple "," )* "]" key = "(" primitive ")"

20 20 Page Instance _1_html : { template : '...', children : { _2_google_map_Maps : { markers : [ { position : { lat : 32.7, lng : -117.2 }, infowindow : _3_html : { template : '...', children :... } }... ] } } } SQL++ Value State of JavaScript component HTML string template with placeholders for children

21 21 Page Instance _1_html : { template : '...', children : { _2_google_map_Maps : { markers : [ { position : { lat : 32.7, lng : -117.2 }, infowindow : _3_html : { template : '...', children :... }... ] } SQL++ Value.. { markers : [ { position : { lat : 32.7, lng : -117.2 }, infowindow :... }... ] } Syntactic sugar: inline HTML Template Markup Syntactic sugar: visual units Also SQL++ query Also Page Specification

22 Motivation Architecture Syntax and Semantics – Unified Application State – SQL++ – Page – Action Future Work 22 Outline

23 23 Page Specification – Static Page... { markers : [ { position : { lat : 32.7, lng : -117.2 }, infowindow : Library: Del Mar Library Comment: { value : Great! } }... ] } Declarative static page using only template markup HTML Visual unit wrappers for JavaScript components Visual unit wrappers translate between state and behavior Translation via renderers and collectors No JavaScript code is needed on the page specification

24 24 Page Specification – Dynamic Visualization <% with libraries as select * from db.libraries left join session.notes on... where... %> { markers : [ <% for l in libraries primary key (library_id) %> { position : { lat : lng : },... } ] } Declarative visualization page using only template markup and SQL++ queries Dynamic data of page specified by SQL++ queries over UAS View Syntactic sugar: iteration Substitution

25 25 Page Specification – Dynamic Visualization <% with libraries as select * from db.libraries left join session.notes on... where... %> { markers : [ <% for l in libraries primary key (library_id) %> { position : { lat : lng : },... } ] } with libraries as select... from db.libraries left join session.notes on... where... { markers : select position : { l.lat as lat, l.lng as lng } from libraries as l primary key (library_id) } Incremental updates are delegated to FORWARDs Incremental renderers Incremental view maintenance

26 26 Page Specification – User Input <% with libraries as select * from db.libraries left join session.notes on... where... %> { markers : [ <% for l in libraries primary key (library_id) %> { position : { lat : lng : },... } ] } infowindow : Library: Comment: { value : }


Download ppt "FORWARD: Declarative Ajax Web Applications through SQL++ on a Unified Application State Yupeng Fu Kian Win Ong Yannis Papakonstantinou UC San Diego 1."

Similar presentations


Ads by Google