documents with databases inside them
DESCRIPTION
Documents with Databases inside them. 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. Database community: - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/1.jpg)
DOCUMENTS WITH DATABASES INSIDE THEM
David KargerMIT
![Page 2: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/2.jpg)
THE WEB PAGE AS A WYSIWYG END USER CUSTOMIZABLE DATABASE BACKED INFORMATION MANAGEMENTAPPLICATION (UIST 2009)
David KargerMIT
![Page 3: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/3.jpg)
SMALL DATA
David KargerMIT
![Page 4: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/4.jpg)
Databases for Plain Folks Database
community: Defined key
primitives for data management
Knows building apps over databases offers simplicity, power, and flexibility
Plain 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 edit
![Page 5: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/5.jpg)
Conclusion People 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) databases
People know how to edit documents So we can turn them into database
engineers by helping them edit web documents like the ones they already use
![Page 6: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/6.jpg)
Conclusion DIDO is a Data Interactive DOcument A standalone html document that contains
Some structured data in a database An AJAX-y WYSIWYG interface to view/edit the
data A 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 DIDO
![Page 7: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/7.jpg)
Thank You http://bit.ly/didodido Google “dido exhibit”
![Page 8: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/8.jpg)
Customizable Applications Applications bring together the data,
specialized views, and interactions necessary to perform tasks
User wants to “stretch” the app to their task hide irrelevant data incorporate new kinds of data change how data is presented or manipulated
Can’t, because apps are rigid Developer hard-wires “right” data model And “right” visualizations and interactions with
data
![Page 9: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/9.jpg)
Migration to the Web Many applications are now web sites
Amazon, Youtube, CNET, Epicurious, LinkedIn, Flickr Still just as rigid/uncustomizable as applications Common Architecture
Database backed Entity-Relation Model
Common interface paradigms Templates Sortable lists Faceted browsing, text search maps, timelines, thumbnails, tables
![Page 10: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/10.jpg)
Migration to the Web
![Page 11: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/11.jpg)
Migration to the WebText search
Faceted Browsing
Sorting by Properties
Templated Items
![Page 12: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/12.jpg)
Text search
Faceted Browsing
Sorting by Properties
Templated Items
![Page 13: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/13.jpg)
Text search
Faceted Browsing
Sorting by Properties
Templated Items
![Page 14: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/14.jpg)
Text search
Faceted Browsing
Sorting by Properties
Templated Items
![Page 15: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/15.jpg)
Text search
Faceted Browsing
Sorting by Properties
Templated Items
![Page 16: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/16.jpg)
Text search
Faceted Browsing
Sorting by Properties
Templated Items
![Page 17: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/17.jpg)
Text search
Faceted Browsing
Sorting by Properties
Templated Items
![Page 18: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/18.jpg)
Nothing New Tremendous similarity in many web sites Much more uniform than applications Helps users know what to expect Boring?
Perhaps But it creates an opportunity to
standardize/package Define authorable standard vocabulary of
widgets
![Page 19: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/19.jpg)
EXHIBIT
![Page 20: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/20.jpg)
Exhibit HTML vocabulary extension (new tags) for
making interactive pages “like these” ER data model (items + properties) Lenses (templates) for rendering individual
items Views 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 tags
![Page 21: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/21.jpg)
Exhibit Interaction
![Page 22: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/22.jpg)
Simple Architecture Each facet, view is independently tied to
data Specify which properties should
fill in which places in the template hold latitude/longitude for map hold start/end for timeline be 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 view
![Page 23: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/23.jpg)
Deployment Deployed 2007 Open source Javascript library
http://simile-widgets.org/exhibit Browser independent Scales to ~ 1000 items, tens of
properties >1500 exhibits on the web
Hobbyists, scientists, newspapers, merchants
![Page 24: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/24.jpg)
![Page 25: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/25.jpg)
![Page 26: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/26.jpg)
![Page 27: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/27.jpg)
![Page 28: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/28.jpg)
![Page 29: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/29.jpg)
![Page 30: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/30.jpg)
![Page 31: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/31.jpg)
![Page 32: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/32.jpg)
![Page 33: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/33.jpg)
![Page 34: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/34.jpg)
![Page 35: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/35.jpg)
![Page 36: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/36.jpg)
![Page 37: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/37.jpg)
![Page 38: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/38.jpg)
![Page 39: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/39.jpg)
![Page 40: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/40.jpg)
![Page 41: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/41.jpg)
![Page 42: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/42.jpg)
Discussion Variety 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?
![Page 43: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/43.jpg)
DIDO
![Page 44: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/44.jpg)
Editing the Data Data objects are rendered through
lenses Which “fill in the blanks” using object
properties Changes to the rendered object can map
back to changes in the underlying object No additional “editing form” required
![Page 45: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/45.jpg)
Change the rendered data,Change the underlying data
![Page 46: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/46.jpg)
Editing the Interface Views (of collection) and facets (for
filtering) are elements on the page Add them like other elements---images,
media Must tie to data model
By specifying which properties are used in view/facet
Like a chart in a spreadsheet---you specify columns
![Page 47: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/47.jpg)
![Page 48: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/48.jpg)
![Page 49: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/49.jpg)
Editing Lens Templates Templates say which properties go where Just HTML, so any WYSIWYG editor will
do
Adding template field spawns new data field
Changing the template changes the schema
![Page 50: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/50.jpg)
![Page 51: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/51.jpg)
Persistence It’s just a document Save it Publish it on your web site Email it Store it in a version control system Copy it to create a new, different app
Not anchored to any particular app or web site
![Page 52: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/52.jpg)
Implementation Everything is in the one HTML file
Data (serialized JSON) Display (HTML, with new tags for view/facet widgets) Javascript
Exhibit framework to drive the data widgets jQuery 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 changes
![Page 53: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/53.jpg)
DISCUSSION
![Page 54: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/54.jpg)
Discussion: Document as Interface “Active Documents” (Xerox PARC) are a
great UI Add elements that react to the user Document 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 web
Every web page with Javascript is one They are the dominant interfaces to web
content
![Page 55: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/55.jpg)
Discussion: Authoring Active Docs Current web active docs are manually scripted Web has converged on standard active doc
widgets Sortable lists, maps, facets for browsing,… Should become part of HTML standard tags
These 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
![Page 56: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/56.jpg)
It’s Just a Document No application to install or configure New, specialized display for each data
set App as light “CSS” wrapper around the data
Create new apps by cloning old no need to start from scratch or learn the rules
![Page 57: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/57.jpg)
oops!
Authoring by Copying Views, lenses in
HTML file Copy it, change
the data (Maybe change
the presentation too)
![Page 58: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/58.jpg)
Scientific Publication Document of the future Publish your paper with the data inside it Let the reader interact with that data They’ll better understand/believe your
argument
![Page 59: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/59.jpg)
Easy Implementation Browser as comprehensive UI toolkit 2000 lines of JS
Just wiring existing open source libraries together
Dido = Exhibit + Tiddlywiki + TinyMCE Even I could do it
![Page 60: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/60.jpg)
A Cloud Computing Contrarian Popular model:
Move all functionality to the cloud Deliver “thin client” web interface using
Ajax
We can support the same interface experience without the cloud
![Page 61: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/61.jpg)
Cloud Costs Requires connectivity Leaks your data
Provider is attack target May not care about your data as much as you do
Locks your data Trapped if provider shuts down Or 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
control
![Page 62: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/62.jpg)
Cloud Benefits Persistence/ubiquity
Can persist the document (google docs) For Big Data
Valid reason Even Dido does this for Google Maps But most data is small Don’t make cloud downsides ubiquitous just
because sometimes necessary! Even if need cloud for data, UI approach
still works
![Page 63: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/63.jpg)
One DAPI to rule them all Usually only need cloud for the data Define a single data access API
E.g., SQL over http Build it into the browser
Native javascript invocation Maybe even HTML tags
Define HTML table using SQL query? Skip the labor of defining/learning a new
API for each application Simplify client AND server side
programming
![Page 64: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/64.jpg)
The DB community can lead Define the right primitives for data
access/manipulation in web interfaces Push for a data access standard in HTML
In-browser SQL currently bogged down in debates High-performance in-browser database
implementation Push for one cloud-data API Generic database equivalent of Apache
HTTPD? Ease of adoption
Bring the database to the document!
![Page 65: Documents with Databases inside them](https://reader035.vdocuments.us/reader035/viewer/2022081604/56816963550346895de11f23/html5/thumbnails/65.jpg)
Try It! http://bit.ly/didodido http://projects.csail.mit.edu/exhibit/Dido/
Remember: it’s a research prototype Written by a theory prof.
Thanks to Scott Ostler and Ryan Lee