1 / 30

FORWARD: Declarative Ajax Web Applications through SQL++ on a Unified Application State

FORWARD: Declarative Ajax Web Applications through SQL++ on a Unified Application State. Yupeng Fu Kian Win Ong Yannis Papakonstantinou UC San Diego. FORWARD. Web application framework Single language: SQL++ Zero frictions and automatic optimizations

maine
Download Presentation

FORWARD: Declarative Ajax Web Applications through SQL++ on a Unified Application State

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. FORWARD:Declarative Ajax Web Applications through SQL++ on aUnified Application State Yupeng FuKian Win OngYannisPapakonstantinouUC San Diego

  2. FORWARD • 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)

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

  4. Simple Web Application

  5. Simple Web Application

  6. Simple Web Application

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

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

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

  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 • 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 Actions Pages Unified Application State (UAS)

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

  13. FORWARD Architecture • 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 rendering Runtime Interpreter Page instance Actions Pages read Unified Application State (UAS)

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

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

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

  17. 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) UAS Specification select... fromdb.libraries leftjoinsession.noteson ... where... Source Specification definesqlsourcedboptions{ driver : 'postgresql', host : 'book_db_host', port : 5432, database : 'libraries', user : 'postgres', password : '9xk8NToA' } Unified Application State (UAS) SQL Source Wrapper RDBMS(Tables) User Input(JSON) Session(Objects) URL Params (KV Pairs)

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

  19. SQL++ Data Model value = null | scalar | tuple | table scalar = primitive | type "(" primitive ")" tuple= "{" ( name : value "," )* "}” table= "[" ( key? tuple "," )* "]" key = "(" primitive ")" • 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

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

  21. Page Instance Also SQL++ query Also Page Specification SQL++ Value Template Markup _1_html : { template : '<body>...', children : { _2_google_map_Maps : { markers : [ { position : { lat : 32.7, lng : -117.2 }, infowindow : _3_html: { template : '<div>...', children : ... } } ... ] } } } <% html %> <body> .. <% unit google.map.Maps %> { markers: [ { position : { lat : 32.7, lng: -117.2 }, infowindow : <% html %> <div> ... </div> <% end html %> } ... ] } <% end unit %> </body> <% end html %> Syntactic sugar: inline HTML Syntactic sugar: visual units

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

  23. Page Specification – Static Page <% html %> ... <% unit google.map.Maps %> { markers: [ { position : { lat : 32.7, lng: -117.2 }, infowindow : <% html %> Library: Del Mar Library <br /> Comment: <% unit html.TextArea %> { value : Great! } <% end unit %> <br /> <buttonvalue="Save"> <% end html %> } ... ] } <% end unit %> <% end html %> • 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. Page Specification – Dynamic Visualization <% with librariesas select* fromdb.libraries leftjoinsession.noteson ... where... %> <% unit google.map.Maps %> { markers : [ <% forlinlibraries primarykey(library_id) %> { position : { lat : <%=l.lat%> lng : <%=l.lng%> }, ... } <% end for %> ] } <% end unit %> View • Declarative visualization page using only template markup and SQL++ queries • Dynamic data of page specified by SQL++ queries over UAS Syntactic sugar: iteration Substitution

  25. Page Specification – Dynamic Visualization <% with librariesas select* fromdb.libraries leftjoinsession.noteson ... where... %> <% unit google.map.Maps %> { markers : [ <% forlinlibraries primarykey(library_id) %> { position : { lat : <%=l.lat%> lng : <%=l.lng%> }, ... } <% end for %> ] } <% end unit %> with libraries as select... fromdb.libraries leftjoinsession.noteson ... where... { markers : select position : { l.lataslat, l.lngaslng } from libraries as l primary key (library_id) } • Incremental updates are delegated to FORWARD’s • Incremental renderers • Incremental view maintenance

  26. Page Specification – User Input Variable in user input source of UAS • Declarative page for visualization and user input • User input is bound into the UAS • Events trigger an action with its context <% definecommentstring%> infowindow: <% html %> Library: <%=l.library_name%> <br /> Comment: <% ifl.commentis null%> <% unit html.TextArea %> { value : <% bindcomment%> } <% end unit %> <br /> <button value="Save" <% event click ajax/save_note%>> <% else %> <%=l.comment%> <br /> <button value="Delete" <% event click ajax/delete_note%>> <% end if %> <% end html %> <% with librariesas select* fromdb.libraries leftjoinsession.noteson ... where... %> <% unit google.map.Maps %> { markers : [ <% forlinlibraries primarykey(library_id) %> { position : { lat : <%=l.lat%> lng : <%=l.lng%> }, ... } <% end for %> ] } <% end unit %> Binds to variable Event / Action

  27. Action Specification • An action is a URL mapped to a function (procedure) that causes side-effects • Action can access all variables in the event’s context • define (mutable) • with(immutable) • for ... in(immutable) • insert, updateand deletestatements writes to UAS • next_page() chooses the next page to be evaluated and displayed defineaction /save_note functionsave_note; definefunctionsave_note() as begin insert intosession.notes (library_ref, comment) values ( context.l.library_ref, context.comment ); next_page('map'); end;

  28. Related and Future Work in FORWARD • Incremental view maintenance (IVM) of pages • Incremental update of pages is delegated to FORWARD’s optimizations • First IVM prototype by reduction to delta-based, relational IVM • Y. Fu, K. Kowalczykowski, K. W. Ong, Y. Papakonstantinouand K. K. Zhao. Ajax-based Report Pages as Incrementally Rendered Views. SIGMOD 2010. • Work-in-progress based on algebraic rewrite rules that propagate predicates (as opposed to data) • Distributed query processor • Virtual database is enabled by FORWARD’s distributed query processor • Recent work led to distributor that is tuned for data of web applications: large database and small in-memory objects • Lightweight JavaScript components • Visual unit wrappers for components with 50++ attributes / methods require upfront time and effort to translate between state and behavior • Work in progress: enable translation for subset of attributes / methods that matter to a page

  29. Cloud-based IDE

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

More Related