WYSIWYG Development of Data Driven Web Applications Fan

WYSIWYG Development of Data Driven Web Applications Fan Yang, Nitin Gupta, Chavdar Botev Cornell University, Ithaca, NY Elizabeth F Churchill, George Levchenko, Jayavel Shanmugasundaram Yahoo! Research, Santa Clara, CA

Abstract • Social Networking sites and Web portals have opened up their APIs • External developers can design their own tools and share it with others • Targeted towards developers with programming expertise and database knowledge • Solution – App. Forge , a WYSIWYG application development platform

App. Forge • WYSIWYG application development platform • Users graphically specify the components of web pages • The database schema and application logic are automatically generated • Provides instantaneous feedback • Not yet open to the public

Solution Space Users Target Audience WYSIWYG development General relationships Yahoo! Pipes Microsoft Pop. Fly Power users App. Forge Jot. Spot Oracle Forms Developers App 2 You Cog. Head Zoho. Creator Dabble. DB Ning Wya. Works Ruby-on-Rails Web. ML Hilda Sophisticated Developers Stateless J 2 EE. NET Simple State Relationships Data Complexity of Applications …

Trends • Web pages are turning into computing platforms • So websites have opened up their API’s for users • But beyond the reach of majority of users • Current solutions: – Yahoo! Pipes, Microsoft Popfly, App 2 You, Cog. Head – Zoho Creator, Ning, Dabble DB, Wya. Works, Jot. Spot, Sale. Force

Drawbacks • Non-WYSIWYG development environment – Two modes • Development mode • Execution mode – Developer has to visualize while in development mode – E. g. La. Tex and Microsoft Word

Drawbacks (contd. . ) • Limited support for creating stateful applications with complex structures – Support stateless web applications – Predefined structure – Support sophisticated stateful applications • But require developer background

Drawbacks (contd. . ) • Limited support for publishing views over multiple related entities – Current systems don’t support views – Require database knowledge

App. Forge • WYSIWYG environment – – Integrates design, deployment and testing Instantaneous feedback Generates database schema and application logic WYSIWYG to target the general user

App. Forge (contd. . ) • Users can create sophisticated stateful applications – Developers focus on display items – Entities and relationships are inferred – Algorithm translates developer actions into database schema

App. Forge (contd. . ) • Users create complex views over multiple entities – Schema Navigation Menu – Hierarchical graph – Algorithm to convert E-R graph to Schema Navigation Menu – Algorithm to translate developers actions on Menu into views

System Architecture

System Components • Application Creation System – Creates and updates the application model – Page View Creation module • Interface for creating and updating web pages – Automatic Schema Generation module • Generates the relational database schema from page views – Application model stored in the file system – Application state is stored in a relational database system

System Components (contd. . ) • Application Runtime System – Loads the application model – Interprets the model – Issues SQL queries over the database

App. Forge GUI

Abstractions • Application – Create and manage multiple applications • Role – Users are divided into multiple roles • Page – Each page can contain one or more Forms and Views • Form – Used to enter new data • View – View and update the application state • Container – Entities in an application

Application Model • Extension of E-R model

Application Model (contd. . ) • Nested Relational Algebra – – Extends Relational model Relaxes first normal form Model Hierarchical Data Two operators • Nest (v) • Unnest( µ )

Nested Relational Algebra

Application Model • Database Model • Specifies the application state • Schema • Constraints • Page Model • Specifies the content, structure and presentation of web pages • Content and Structure • Presentation

Constructing Views • Page View Creation Module • Challenges – Show database schema without exposing the complexity of an E-R graph • Solution: Schema Navigation Menu – Create views without exposing the details of NRA operators such as join and nest. • Solution: Three graphical primitives

Schema Navigation Menu • • Tree structured menu Root is an entity in the E-R graph Algorithm applied to each level of tree Output is list of checkable options

Algorithm Attr. For. Next. Step link, current. Step Items = current. Step. attributes Items += link. attributes foreach relationship r that current. Step is involved in do if r is 2 -way relationship then next. Step = r. other. Side(current. Step) if next. Step is not an aggregation then Items += next. Step else Items += all entities in the next. Step aggregation else if navigation. Path of current. Step contains all entities participating in r then Items += r. attributes

Algorithm (contd. . ) if link forms an aggregation Agg then foreach relationship r that Agg is involved in do if r is 2 -way relationship then next. Step = r. other. Side(Agg) if next. Step is not an aggregation then Items += next. Step else Items += next. Step. all. Entities else if navigation. Path of Agg contains all entities participating in r then Items += r. attributes

Schema Navigation Menu c. S attributes c. S direct relnships/ entities c. S indirect relnships/ entities

Algorithm Output • Entity Attributes – Attributes of current. Step • Relationship Attributes – Attributes of link with current. Step • Navigational Link – Entities involved in relationships

Graphical Primitives • Select Menu Item • Move up/down columns • Create filter

View Generation ) eventid, topic, date, {username} Attend Event ( Presentation name, {event} ( Speaker ( eventid (Users) userid ) )

Select Menu item • Entity Attributes and Relationship Attributes – Only select attributes to show – Corresponds to the projection operator in NRA • Navigational link – Joins the new entity through the navigation relationship

Graphical Primitives (contd. ) • Move up/down columns – Developers can change the view structure • If column is moved down, they will be asked about the nested column it should be put in. • Create Filter – Specify a filter predicate – Can be any comparison operator

Automatic Schema Generation • Generates complex schemas based on two actions – Creating forms/views – Adding columns to forms/views • Algorithm – Input when adding new forms/views to a page • Name: Name of the form/view • Attrs: Columns in the new form/view – Input when adding columns to views • Target: The position in the view where developer clicks • new. Attr. Name: The name of the column to be added • Type: The type of the column to be added

Add new forms/view /* Triggered when developers add new forms/views to a page. */ Input : name : Name of the new form/view attrs : Columns in the new form/view on. New. Form. View. Event name, attrs Add. Entity (name, attrs)

Algorithm to edit view Input : target : The position in the view where the developer clicks new. Attr. Name : The name of the column to be added type : The type of the column to be added on. Add. Attribute. Event target, new. Attr. Name, type if target is a non-nested column of the view or beside the view then target. Entity = root entity of the view Else target. Entity = the entity that the target column belongs to

if NOT is. Entity(type) then if target. Entity is root entity then Add. Attribute (target. Entity, new. Attr. Name, type) else navigation. Path = get. Navigation. Path(target. Entity) if navigation. Path contains two entities then r = the relationship that connects the two entities in navigation. Path else if exists relationship r that connects all entities in the navigation. Path AND exists a constraints that r depends on all 2 -way relationships in the navigation. Path then r = get. The. Relationship(navigation. Path) else r = create. Relationship(navigation. Path) create a constraint that r depends on all 2 -way relationships in navigation. Path. Add. Attribute (r, new. Attr. Name, type)

else if target. Entity is root entity then create. Relationship (target. Entity, get. Entity(type), new. Attr. Name) else navigation. Path = get. Navigation. Path(target) if exists an aggregation over the navigation. Path) then aggregation = get. Aggregation(navigation. Path) else aggregation = create. Aggregation(navigation. Path) create. Relationship(aggregation, get. Entity(type), new. Attr. Name)

Creating/Editing Entities

Creating Relationships

Creating Aggregations

Preliminary Study • The user study consisted of three groups of two people, pairs, who were given three tasks to complete. – Group 1: Our first pair were two researchers who have advanced degrees in computer science. Both are actively involved in designing programming and using databases. – Group 2: Our second pair were both researchers trained with advanced degrees in computer science, but neither is a database expert. – Group 3: Our third pair were both experienced computer users.

Test Application • Members of a Yahoo! Group would like to give away unwanted stuff for free. Please create an application that provides the following functionality to members – Post items that they want to give way. Each item includes a name, a description and the original owner (who posted the item). – List all the items posted by everyone up to now. Each listing should include the name, description and the owner of the item, and the list of members who have placed a request for the item. The current member can add herself to the requesters list. – List the items given away by the current member. Each listing should show the name and description of an item, and the persons requesting the item.

Results • People who had extensive database experience found mapping and logic very easy • Others did not find the visual presentation quite so intuitive • Group 3 were the most challenged.

Feedback from Tests • • Redesigned the interface Personalization pop-window Exposed the notion of containers Improved database terminology

Related work • • • Web. ML Visual Query Builder Dream. Weaver Zoho Creator Ning SAP Visual Composer