David Karger MIT The Web Page as a WYSIWYG End User Customizable Database Backed Information Management Application UIST 2009 David Karger MIT Small Data David Karger MIT Databases for Plain Folks ID: 750898
Download Presentation The PPT/PDF document "Documents with Databases inside them" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Documents with Databases inside them
David KargerMITSlide2
The Web Page as a WYSIWYG End User Customizable Database Backed
Information ManagementApplication (UIST 2009)
David
Karger
MITSlide3
Small Data
David KargerMITSlide4
Databases for Plain FolksDatabase community:Defined key primitives for data managementKnows
building apps over databases offers simplicity, power, and flexibilityPlain
Folks:
Have data to manage
Think databases are black magic
Manage their data by editing documents
Hide databases in plain sight inside documents plain folks can editSlide5
ConclusionPeople should be able to create or customize applications (data, visualization, interaction) for their own information management tasks
The web has evolved a standard metaphor of AJAX-y “active documents” as interfaces to (web) databasesPeople know how to edit documentsSo we can turn them into database engineers by helping them edit web documents like the ones they already useSlide6
ConclusionDIDO is a Data Interactive DOcumentA standalone html document that contains
Some structured data in a databaseAn AJAX-y WYSIWYG interface to view/edit the dataA WYSIWYG “
metaeditor
”
to edit the interface
Persistence simply by saving the document
A broad class of Create/Read/Update/Delete content management applications can be authored (not programmed) using DIDOSlide7
Thank Youhttp://bit.ly/didodidoGoogle “dido exhibit”Slide8
Customizable ApplicationsApplications bring together the data, specialized views, and interactions necessary to perform tasksUser wants to “stretch” the app to their task
hide irrelevant dataincorporate new kinds of datachange how data is presented or manipulatedCan’t, because apps are rigidDeveloper hard-wires “right” data model
And “right” visualizations and interactions with dataSlide9
Migration to the WebMany applications are now web sitesAmazon,
Youtube, CNET, Epicurious, LinkedIn, FlickrStill just as rigid/uncustomizable
as applications
Common Architecture
Database backedEntity-Relation Model
Common interface paradigms
Templates
Sortable
lists
Faceted browsing, text search
maps, timelines, thumbnails, tablesSlide10
Migration to the WebSlide11
Migration to the Web
Text search
Faceted Browsing
Sorting by Properties
Templated
ItemsSlide12
Text search
Faceted Browsing
Sorting by Properties
Templated
ItemsSlide13
Text search
Faceted Browsing
Sorting by Properties
Templated
ItemsSlide14
Text search
Faceted Browsing
Sorting by Properties
Templated
ItemsSlide15
Text search
Faceted Browsing
Sorting by Properties
Templated
ItemsSlide16
Text search
Faceted Browsing
Sorting by Properties
Templated
ItemsSlide17
Text search
Faceted Browsing
Sorting by Properties
Templated
ItemsSlide18
Nothing NewTremendous similarity in many web sitesMuch more uniform than applicationsHelps users know what to expectBoring?
PerhapsBut it creates an opportunity to standardize/packageDefine authorable standard vocabulary of widgetsSlide19
ExhibitSlide20
ExhibitHTML vocabulary extension (new tags) for making interactive pages “like these”ER data model (items
+ properties) Lenses (templates) for rendering individual itemsViews of an object collection:
list, thumbnails, tabular, scatter plot, map, timeline
Facets
to filter the collection based on properties
enumerated list, tag cloud, slider/numeric range
Exhibit
Javascript
library interprets the new tagsSlide21
Exhibit InteractionSlide22
Simple ArchitectureEach facet, view is independently tied to dataSpecify which properties shouldfill in which places in the template
hold latitude/longitude for maphold start/end for timelinebe sortable in the list
be columns in the tabular view
provide filtering values for a facet
Then interact through the data
Clicking value in facet filters data, which changes viewSlide23
DeploymentDeployed 2007Open source Javascript library
http://simile-widgets.org/exhibitBrowser independentScales to ~ 1000 items, tens of properties>1500 exhibits on the webHobbyists, scientists, newspapers, merchantsSlide24Slide25Slide26Slide27Slide28Slide29Slide30Slide31Slide32Slide33Slide34Slide35Slide36Slide37Slide38Slide39Slide40Slide41Slide42
DiscussionVariety of exhibits (> 1500) suggests we’ve approximated “right” interaction vocabulary
Each is just an HTML document (with new tags)All authored by editing data files and HTML source
How do we make them WYSIWYG?Slide43
DidoSlide44
Editing the DataData objects are rendered through lensesWhich “fill in the blanks” using object properties
Changes to the rendered object can map back to changes in the underlying objectNo additional “editing form” requiredSlide45
Change the rendered data,Change the underlying dataSlide46
Editing the InterfaceViews (of collection) and facets (for filtering) are elements on the pageAdd them like other elements---images, mediaMust tie
to data modelBy specifying which properties are used in view/facetLike a chart in a spreadsheet---you specify columnsSlide47Slide48Slide49
Editing Lens TemplatesTemplates say which properties go whereJust HTML, so any WYSIWYG editor will do
Adding template field spawns new data fieldChanging the template changes the schemaSlide50Slide51
PersistenceIt’s just a documentSave itPublish it on your web siteEmail it
Store it in a version control systemCopy it to create a new, different appNot anchored to any particular app or web siteSlide52
ImplementationEverything is in the one HTML file
Data (serialized JSON)Display (HTML, with new tags for view/facet widgets)JavascriptExhibit framework to drive the data widgetsjQuery
TinyMCE
HTML editor
2000 lines of new
Javascript
to wire everything together
No server, no
plugin
, nothing to install/configure
Changes to data or display change the file
So saving the file saves the changesSlide53
DiscussionSlide54
Discussion: Document as Interface“Active Documents” (Xerox PARC) are a great UIAdd elements that react to the userDocument becomes a whole user interface
But still intuitive (it’s just a document)And easy to build (extend document editor/viewer)They have taken over the webEvery web page with Javascript
is one
They are the dominant interfaces to web contentSlide55
Discussion: Authoring Active DocsCurrent web active docs are manually scripted
Web has converged on standard active doc widgetsSortable lists, maps, facets for browsing,…Should become part of HTML standard tagsThese can be inserted in document
Just like an image or other media
And wired to underlying data
Just like a chart in a spreadsheet
So users can WYSIWYG author these active docs Slide56
It’s Just a DocumentNo application to install or configureNew, specialized display for each data set
App as light “CSS” wrapper around the dataCreate new apps by cloning oldno need to start from scratchor learn the rulesSlide57
oops!
Authoring by Copying
Views, lenses in HTML file
Copy it, change the data
(Maybe change the presentation too)Slide58
Scientific PublicationDocument of the futurePublish your paper with the data inside itLet the reader interact with that dataThey’ll better understand/believe your argumentSlide59
Easy ImplementationBrowser as comprehensive UI toolkit2000 lines of JSJust wiring existing open source libraries together
Dido = Exhibit + Tiddlywiki + TinyMCEEven I could do itSlide60
A Cloud Computing ContrarianPopular model: Move all functionality to the cloudDeliver “thin client” web interface using Ajax
We can support the same interface experience without the cloudSlide61
Cloud CostsRequires connectivity
Leaks your dataProvider is attack targetMay not care about your data as much as you doLocks your dataTrapped if provider shuts downOr changes terms of service
Dido avoids all these costs
Keep working on the plane
Manage sensitive data that cannot be leaked
Email
to a friend, publish on a web site, version controlSlide62
Cloud BenefitsPersistence/ubiquityCan persist the document (google docs)
For Big DataValid reasonEven Dido does this for Google MapsBut most data is smallDon’t make cloud downsides ubiquitous just because sometimes necessary!
Even if need cloud for data, UI approach still worksSlide63
One DAPI to rule them allUsually only need cloud for the dataDefine a single data access API
E.g., SQL over httpBuild it into the browserNative javascript invocationMaybe even HTML tagsDefine HTML table using SQL query?
Skip the labor of defining/learning a new API for each application
Simplify client AND server side programmingSlide64
The DB community can leadDefine the right primitives for data access/manipulation in web interfacesPush for a data access standard in HTML
In-browser SQL currently bogged down in debatesHigh-performance in-browser database implementationPush for one cloud-data APIGeneric database equivalent of Apache HTTPD?Ease of adoption
Bring the database to the document!Slide65
Try It!http://bit.ly/didodidohttp://projects.csail.mit.edu/exhibit/Dido
/Remember: it’s a research prototypeWritten by a theory prof.Thanks to Scott
Ostler
and Ryan Lee