Page Configuration

fishglugSoftware and s/w Development

Dec 13, 2013 (3 years and 5 months ago)

69 views

Yupeng

Fu

Kian Win Ong

Kevin Zhao

Yannis

Papakonstantinou

Vicky
Papavasiliou

Michalis

Petropoulos

The
FORWARD

SQL
-
Based Declarative Framework

for Ajax Applications

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

Email

Paypal

charge

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

Where is the extraneous code expended?


Low
-
level code addressing frictions


of the web application architectures


pre
-
2005:

Pure server
-
side programming


post
-
2005
: Ajax


post
-
2007:

browser went mobile


4

Pre
-
2005:

Pure server
-
side programming: Code to plumb

across layers; code to optimize data access

Browser

Application Server

Database

HTML

DOM

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

Request

Parameters

Database Server

Session

Objects

Session

Objects

Session

Objects

5

HTML

DOM

JavaScript

Components

Data access optimization questions:

-
A single query that gets both proposals & reviews

of reviewer currently in session

-

or a single “proposals” query followed by one

“reviews” query for each proposal

-

or a single “proposals” query with one “reviews”

query that lists all relevant proposal id’s

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

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();


Browser

Application Server

Database Server

Database


Page Computation

SELECT
*

FROM
proposals…

SELECT

*

FROM

reviews …

Java

Delta

Queries

Diffs

Session

Objects

HTML

DOM

JavaScript

Components

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

7

For each action
, yet another incremental page
computation code and partial renderer

Browser

Application 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



Mobile,
iPad

& HTML5


form factor


Client data & devices;
geolocation



Slower & more unreliable connections


higher need for client autonomy & low latency



HTML5


back to web
-
based standardization


browser
-
based database


multithreaded asynchronous processing abilities

9

HTML5: Data and computations at the browser.

And yet another integration, coordination

exercise

Action

Browser

Application Server

Database Server

Database


Page Computation

Session

Objects

HTML

DOM

JavaScript

Components

Session

Objects

10

HTML5

storage

Action

Action

Page Computation

Action

Page Computation

Action and page
computation may have
enough browser
-
side data
to fully avoid server access

Low latency: Browser
-
side
computation returns
immediately available data
instantly, while
asynch

requests to the server

initiated for reads or writes

Goal of the

FORWARD

Web Application Programming Framework



Remove architectural frictions & manual optimizations


Plumbing code addressing language heterogeneities


Data coordination, optimization code


Novelty: SQL
-
based declarative programming

1.
“Unified application state” virtual database, comprising




entire application state




accessible via SQL++ distributed queries

2.
Application semantics: Action
-
> Page cycle

3.
Ajax page as a rendered SQL++ view that is automatically
and incrementally maintained at each round

Actions and pages can use just SQL++, no Java or JavaScript


Make easy things easy while difficult things possible


11

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

Page Configuration

review

Source Configurations & SQL++ Schema Definitions

12

Browser
-
side FORWARD JavaScript libraries

HTML

DOM

JavaScript

Components

Unified SQL++ Application State

FORWARD Application:

Operation

13

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

insert
-
review

Page Configuration

Page Configuration

review
-
proposals

Source Configurations & SQL++ Schema Definitions

Unified SQL++ Application State

Actions Access Unified Application State via SQL++

14

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

Core Page

Request
Parameters

Database

Session

Objects

Action Configuration

Action Configuration

insert
-
review

Page Configuration

Page Configuration

review
-
proposals

Source Configurations & SQL++ Schema Definitions

Core page &

request parameters:
Abstraction of relevant
part of browser state

SQL++ includes:

Nesting

Variability

Identity

Ordering

Actions in PL/SQL dialect over the Unified Application State

which access the main memory also (request, session)

15

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
)

Java

actions

Pages as Rendered SQL++ Views over the

Unified Application State

16

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

insert
-
review

Page Configuration

Page Configuration

review
-
proposals

Source Configurations & SQL++ Schema Definitions

Unified SQL++ Application State

<
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

17

<
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

18

After each action, the
FORWARD interpreter
automatically &
incrementally updates

HTML and JavaScript
components

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



type=“integer”
>


...


</
funit:select
>


...


<
funit:button


onclick
="
save_review
"/
>

</tr>

</
fstmt:for
>

Core Page

proposals

Automatically
inferred or
explicitly declared

pid

my_review

rating

19

FORWARD

Demo

20

FORWARD

Interpreter

Program

Email, etc.

Service

Browser State

System Architecture and Optimizations

Browser

Server

Page Configuration


Visual Units

Page Query in
SQL++

HTML

DOM

JavaScript
Components

INSERT, UPDATE,

DELETE

Services

Unified

Application State

Database

State

Session
State

Page
State

21

Argument Collectors

1

Program Invoker

2

Modification Log

Partial Renderers

4

Incremental View
Maintenance

3

Incremental view
maintenance of data
using modification
log

Incremental
rendering of
JavaScript
components

Visual Page State =

Page Query + Constants (visual template)

Core Data

Request Data


Visual Page
State

Reduction of web programming problems into

data management problems with rich prior work


Incremental Ajax page maintenance



Resolving data heterogeneities between the logic visual
layers of the application



Query optimization for distributed queries over small
main memory sources and a persistent database



Location transparent code development and low
latency optimizations for mobile

22

Incremental Ajax maintenance


Use incremental view
maintenance as an efficient
implementation of the page
queries




Data model features


Nesting (decorrelation)


Variability (decorrelation)


Ordering (ordering attributes)


Deferred view maintenance


Large number of small view
instances


Deletions & updates as
commands that utilize
provenance IDs


23

Partial renderers of

visual units


HTML +
Javascript

State

Page Configuration


Visual Units

Page Query in
SQL++

Incremental View
Maintenance of

Page Query

Incremental Rendering of JavaScript Components

new bar_chart();

...

Insert Bar Chart

BarChartUnit

bar_chart.destroy();

...

Delete Bar Chart

bar_chart.getBar(id);

bar_chart.replace(...);

...

Replace Bar

Browser State

HTML

DOM

JavaScript
Components

Render


5

3

barchart

bar

value

id

Int

Tuple

Int

Diffs


Find most specific
renderer for unit diff

Visual units are provided by
framework, and have
renderers that call into
methods of JavaScript
components.

24

Incremental Rendering of JavaScript Components

new bar_chart();

...

Insert Bar Chart

BarChartUnit

bar_chart.destroy();

...

Delete Bar Chart

Browser State

HTML

DOM

JavaScript
Components

Render


5

3

bar

value

id

Int

Tuple

Int

Diffs


Simulate renderers
when necessary

25

Resolving heterogeneities between logical and visual aspects
of the page

26

Output of
Page Query


Visual Page

Visually typed

Core Page


Request


Report attribute types
and logical structure
dictated by page query

Input attribute types dictated
by input units

Typed core
page


Configuration

Page

(logical abstraction of
page)

q2c

c2v

v2c

c2c

c2t

t2r

Atomic types

dictated by what developer
wants; validation errors

Types dictated by input
units

Query optimization for distributed queries over small
main memory sources and a persistent database

27

Unified SQL++ Application State

Action (PL/SQL)

Variables

Core Page

Request
Parameters

Database

Session

Objects

Action (PL/SQL)



Distributed Queries

Page Configuration


Page query

Replacing the manual specification of data access optimizations that one does

In Ruby
-
on
-
Rails, Hibernate

Related Industrial 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

?

28

HTML

DOM

JavaScript

Components

ASP.NET,

GWT

Hibernate,

Entity Framework

Data management research community efforts: A progression
towards ever more powerful declarative web application specs


Strudel


HTML pages as rendered views


WebML


From schemas to forms and reports, easily


Relational transducer


Hinted that the business logic of many web
applications is captured within SQL


HILDA


Unit
-
based pages & logic


Client
-
server computation


29

Future work


More on algorithms that emulate what “a
good developer would do”


Client side computation


enabled by
declarativeness


location transparency


deliver low latency, disconnected operation


Optimizations for updating a myriad views


leveraging pub
-
sub works


Visual Do
-
It
-
Yourself development

30