Baby Steps to Synergistic Web Apps  

By Bill Burcham under AJAX, microformats, Web as platform on 21. October 2005

The Web Standards Project holds as a fundamental truth: that document structure should be separated from presentation or visual style. This two-tier division is embodied by the XHTML standard for document structure and the CSS standard for visual style specification. Adoption of this strict separation of concerns provides revolutionary opportunities for the economical production of highly accessible, aesthetically pleasing web sites. At the same time huge strides are being made by AJAX innovators like 37signals to provide web application user interfaces on a par with those of desktop applications.

Concurrent with these breakthroughs in web user interface technology and practice, there is a an explosion of XML vocabularies, exemplified by OASIS, OPML, Microsoft Office XML, Open Office XML. A zillion XML vocabularies are blooming. These vocabulares are not presentational in nature like CSS, nor are they addressing document structure like XHTML. These vocabularies represent various other domains, commerce domains like order management, personal collaboration domains like calendar and contact management, media distribution and syndication domains, and myriad technical domains such as remote procedure call, database query, spreadsheet structural model. These vocabularies constitute a huge and growing, free, “domain model” for our world. Development, refinement and adoption of these shared, free domain models presents an unprecedented opportunity for both producers and users of information systems.

Enter web applications. Not static content-oriented websites, but honest to goodness web applications. Think email, calendaring, authoring, supply chain management, customer relationship management. These web applications are manipulating at their core, domain models. Sure, these applications have to present an interface to the user, but the bulk of what the application does is manipulate and manage domain-specific information.

While these web applications are manipulating domain-specific information they are doing precious little to expose that information in interoperable form. At best a web application may support download or upload of files. A contact management web application may for instance support bulk import or export — but where is the ability to conveniently “pick” an address from that application and use it as a “ship to” address at an online buying site?

Each web application is an island. This monolithic approach to web applications favors those product vendors who can make big bets — vendors who can tackle and deliver huge applications. Mash Ups provide a glimmer of hope — but only for developers — not really for end users.

It is not a new situation, that applications manipulate domain-specific information — information that users need to share with other applications. It has ever been so. So what’s the difference with web applications? The difference is that in the case of web applications, the world of document structure and presentation has not been bridged to the world of domain models. If Web 2.0 truly represents a new platform then perhaps we should consider whether there is anything to be learned from the older platforms in this regard. Where was presentation bridged to domain model for instance on the Macintosh, Windows and X-Windows platforms?

Remember Me — I Sat Behind You in Freshman English

On those predecessor platforms, the clipboard paradigm was one very important bridge. In the clipboard paradigm a platform-wide set of gestures is supported by all applications. Those gestures enable a user to designate content, to copy that content to a clipboard, and to later “paste” that content into a different location — either in the original application or in a separate application. The range of gestures was expanded on some platforms to include drag and drop with added semantics at the drop location to support the notion of linking in addition to the traditional copy-paste and cut-paste a.k.a. “move”.

Fundamental to the notion of clipboard is the idea that there are potentially many representations for a given piece of content. This is where the bridging between presentation and domain model takes place. The clipboard can capture many representations at once — allowing the receiving application, in concert with the user to select precisely the level of presentation versus domain meaning desired. When pasting a circuit diagram (model) into an engineering report a presentational representation may be chosen, whereas when pasting the same content into a circuit simulation tool, a domain-specific (circuit modeling) representation may be chosen.

Could the original notion of the clipboard be updated to fit the Web Application architecture? Clearly the benefits would be significant. A new model, allowing web applications to leverage one another under user control means that smaller bets and therefore more bets can be made (by product vendors). More bets means more vendors, more applications, and more functionality delivered sooner to the 2.0 Web. While less can certainly be a competitive advantage to a product vendor, that advantage is only amplified in an environment where users can combine the functions of multiple products. If cut and paste and even Compound Documents were useful in the old platforms then they’re potentially much more useful now given the explosion of open, standard XML vocabularies. The opportunity for interoperability is greater than ever. Yet here we all sit, uploading and downloading files between applications.

Some will say, “but my browser supports cut and paste”. Well yes, the browser does support a limited form of cut and paste. But without access to the domain model, the browser is incapable (without help) of providing a cut and paste capability that goes deeper than document structure. Since the browser sees only the style sheet and the document — and not the underlying domain objects, it has no way (on its own) of loading a clipboard with a RDF vCard for instance, because that RDF vCard structure is never seen in its native form by the browser at all. At best an XHTML representation of that RDF vCard is seen at the browser.

Even if the RDF vCard could make its way onto the clipboard somehow, perhaps along with an XHTML representation and maybe a styled representation as well — there is no standard for presenting the multifaceted contents of the clipboard to the receiving web application. Is there a way to bridge the gap between domain structures and document structure?

What Are We Waiting For

Hang on… doesn’t AJAX provide a way out? Doesn’t AJAX allow various gestures to be captured and acted upon? Doesn’t AJAX allow arbitrary requests and responses between the browser and a web application in response to those gestures? Well sure it does!

If a source application could somehow get a standard “web application clipboard” structure onto the desktop clipboard, and if that structure could be sent by the user to a destination web application then the opportunity would arise for users to create “on the fly” Mash Ups. Users would recapture their lost ability to bridge applications requiring various levels of meaning (remember the circuit diagram example?) Web Applications could be combined by mere mortals in ways unforeseen by the original designers.

So what do we need to do to make it happen? Do we need to form a technical committee in a standards body? Do we need to go make a pitch to the software industry Old Guard? Sounds like it could take a long time and involve a lot of risk.

No I don’t think we need to do anything so heavy weight. Who’s in charge here anyway? We don’t have to ask anyone’s permission, and we really don’t have to ask for anyone’s help. Here’s how I see it going down:

  1. we agree on a standard, almost trivial, vocabulary for describing the clipboard itself. http://www.lesscode.org/clipboard/v0p1
  2. ECMAscript for capturing the cut and copy gestures (in a source application), sends an XMLHttpRequest to the source web application, along with the current “selection” and a command verb — one of “identify”, “copy” or “cut”. Here “selection” is a URI ending in an XPointer identifying the XHTML designated by the user. http://www.lesscode.org/clip-source-request/v0p1
  3. The web application returns a clipboard structure. The structure may contain multiple representation elements. The elements have a well-defined order so that the receiving application knows where the most “presentational” representations are and where the most “domain specific” ones are. Note that the source application may choose in the case of “copy” to place content in the representations either “by value” or “by reference”. The latter necessitates subsequent communication between the destination application and the source application. In the case of “cut”, the content is always returned by value. In the case of “identify” it’s always returned by reference. The “identify” verb is for future expansion to support drag and drop gestures. schema: http://www.lesscode.org/clip-source-response/v0p1 and sample instance document: http://www.lesscode.org/clip-source-response/sample-1
  4. ECMAscript for capturing paste gesture (in destination applications), sends an XMLHttpRequest to the destination application along with the current destination selection (a URI ending in an XPointer) and the current web application clipboard structure and a command verb — either “paste” or “link”. In the case of “paste” the destination application will either paste the content directly from the clipboard (if the content is provided by value) or will acquire the content from the source application (if the content was provided by reference). http://www.lesscode.org/clip-destination-request/v0p1
  5. The destination web application returns a status code. http://www.lesscode.org/clip-destination-response/v0p1

This basic scheme will support copy/paste and cut/paste gestures today and set the stage for drag with drop-copy, drop-move and drop-link later. By focusing first on “by value” cut/copy and paste we avoid thorny issues of distributed trust. The user is in control of the clipboard and there is no direct application to application communication required. Let Big Brains working on things like SAML tackle federated identity management issues. Addressing the clipboard now, and composite applications later constitutes walking before running — or flying. We leave the door open, however, for eventual application to application communication — both for simple efficiency, i.e. avoiding unnecessary routing content through the browser, and for composite application construction.

What Could Happen After That

Picking up what was lost with the move to the Web platform sets the stage for going beyond the predecessor platforms:

  • bridge desktop platform clipboards to web application clipboard - this sounds like a job for the Firefox folks!
  • browser gesture standards for drag and drop including copy, move, link between applications
  • deployment of federated trust standards to support cross-linking of content between web applications
  • A pragmatic approach to exposing the domain model to the browser is to use the class attribute in XHTML to attach semantic or domain meaning to what would otherwise be solely a representation of document structure. This is the approach taken by microformats.org. In fact there is even an XHTML alternative to RDF vCard called hCard. The microformats.org approach unifies document structure with domain models by merging the two. Will XHTML with class tags obviate the need for a web application clipboard protocol? Will microformats make the browser all knowing?

24 Responses to “Baby Steps to Synergistic Web Apps”

  1. Scott Moody:

    Here Here! This is probably one of the most important technology-related posts I’ve seen in quite a while. I hope this sees the light of day. Count me in as a supporter.

    • Scott

    comment at 21. October 2005

  2. ryan king:

    In fact there is even an XHTML alternative to RDF vCard called hCard.

    Actually, vCard isn’t RDF, it’s a MIME headers style format. While there is, in fact, an RDF version, the original is the normative version we base hCard on.

    comment at 22. October 2005

  3. Bogle’s Blog » Bill Burcham on Baby Steps to Synergistic Web Apps:

    […] Bill Burcham has a must-read post called Baby Steps to Synergistic Web Applications in which he proposes an AJAX approach to solving the “every webapp is an island” problem. He begins with the low hanging fruit of creating a “web cliboard” to facilitate information transfer across webapps […]

    pingback at 23. October 2005

  4. Ryan Tomayko:

    I wish I had two or three case scenarios for this. The concept is really intriguing. Phil Bogle has the way of it, though:

    To push this forward we need adoption by a pair of webapps for which a web clipboard for structured data is a compelling addition. I need to do some more brainstorming about what these apps might be.

    That’s a really good idea. I’ve been doing quite a biy of AJAX related coding lately so I could help out here if someone gets some use cases together.

    Also, I can’t help thinking that this would be a perfect demo in the Microformats Zen Garden we’ve been talking about.

    Speaking of Microformats, Bill ends the article saying:

    A pragmatic approach to exposing the domain model to the browser is to use the class attribute in XHTML to attach semantic or domain meaning to what would otherwise be solely a representation of document structure. This is the approach taken by microformats.org. In fact there is even an XHTML alternative to RDF vCard called hCard. The microformats.org approach unifies document structure with domain models by merging the two. Will XHTML with class tags obviate the need for a web application clipboard protocol? Will microformats make the browser all knowing?

    I don’t think this is an either or situation. Using semantically rigid XHTML (microformats) as a clipboard representation would make a ton of sense, IMO. Besides that, I don’t think it’s possible to copy XHTML using a browser’s native copy/paste features. If you could, I’m positive you could not then paste it anywhere useful.

    I don’t know. It seems like the general concept Bill lays out here could be really useful. I have a feeling some of the implementation details are going to need to come down a notch (XPointer, RDF, etc.) in the beginning. But this idea of having a sort of shared quick storage area / server-side clipboard thing that multiple webapps could send pieces of content to and to then have each of them be able to extract, embed, query, whatever that shared space gets me excited. I’m wondering if its not completely unlike what Joe Gregorio proposes in Dreaming of an Atom Store.

    Yes, yes. Right. Hold on. So how about this. Take Mark Pilgrim’s Greasemonkey scripts for parsing/manipulating Microformats, combine it with Joe’s Atom Store, and then put Bill’s ideas for how user interaction might work (e.g. the clipboard concept, using AJAX to transfer representations, etc.) and I think there’s something really fricking interesting going on here.

    I’m really surprised to see this was posted on Friday and there hasn’t been more discussion on it. It’s a solid concept, no? I think case scenarios would go a long way in having people pick this up and run with it.

    comment at 23. October 2005

  5. Bill Burcham:

    To ryan king’s observation that “vCard isn’t RDF”… I should have made it clearer in the original post — when I refer to RDF vCard I mean the RDF scheme derived from the MIME-oriented (original) vCard. RDF vCard (a W3C note) was used in my post only for illustration purposes — as an example of the kind of domain content one could transfer over the clipboard.

    comment at 23. October 2005

  6. kimmo.takatalvi.net » Jargonille kenkää:

    […] lesscode.org: Baby Steps to Synergistic Web Apps Jätä kommentti […]

    pingback at 24. October 2005

  7. developers.org.ua » Blog Archive » web clipboard:

    […] Bill Burcham предложил, на мой взгляд, гениальную идею - перенести метафору “буфера обмена” в мир веб-приложений. Причем, как и в случае обычных десктоп-приложений, инициирует операцию пользователь, а от приложений требуется либо предоставить информацию в определенном формате(ах) либо быть готовым принять информацию в определенном формате. […]

    pingback at 24. October 2005

  8. dchud:

    Great stuff!

    Some of us over in library land have been working on something similar recently. Though, we’ve based it on obscure library specifications and given it an even more-obscure name to guarantee its ongoing irrelevance. :) In any case, I’ve got a little writeup with sample screenshots based around examples on my weblog of what we’ve been calling “COinS” and “COinS-PMH” if you’re interested.

    It doesn’t speak directly to the full cut-copy-paste set of actions, but could certainly support it. Or, we could support what you’re specifying or something like it. From a library perspective, a lot of what we publish is read-only, so, we didn’t work that into the model, and you’re right to emphasize it.

    Thanks for this! -dchud

    comment at 24. October 2005

  9. Phil Bogle:

    As discussed above, next step is identifying and implementing the most compelling scenarios for a web clipboard.

    In the service that I work on, we have the ability to import a list of names and email addresses using a CSV file, which is an incredibly clunky experience for the end user. What if I could just tag and copy a bunch of email addresses from my gmail account and paste them into my service?

    For me at least, such a scenario would be compelling. What scenarios do you all find most interesting?

    comment at 24. October 2005

  10. Bill Burcham:

    Oh, I find these scenarios interesting (from Flock’s five ways to… get started):

    1. …get ready to share your favorite sites: go grab a del.icio.us account.
    2. …get yourself a blog.
    3. Start blogging!
    4. Check out your history right from the search box.
    5. Forget old-school bookmarks. Meet Flock’s Favorites.

    (BTW I cut/pasted that ordered list from the Flock site using “view source” — feel the self-reference!)

    Seriously, and with all due respect to Flock, which is a really cool idea even if it’s not cooked yet — why should I need a new browser if all I want to do is organize bookmarks that are stored online? Or if all I want to do is have a WYSIWYG interface to wordpress? Or if I want a “shelf”?!?

    There are already many web apps that manage bookmarks online — problem is the interface between those web apps and the window I’m actually browsing in at any particular moment is clunky. There are many WYSIWYG HTML editing web apps emerging — again, the problem is one of composition — I can’t point that WYSIWYG web app at my wordpress server — it’s pointing e.g. at Gmail’s API’s.

    The “shelf” application seems like a natural though. In a way it’s the visual counterpart to the web app clipboard itself. ‘Course it kind of begs the question right? A “shelf” isn’t really a useful apps can provide content to the shelf and other apps can consume content from the shelf — under user control.

    Another application I want, and this one is kind of scary to even think about , is a keychain application. I am sick and tired of managing passwords across my Mac at home, and the XP laptop I use for work and travel.

    comment at 24. October 2005

  11. Graham Fawcett:

    If you didn’t check out Dan Chudnov’s COinS example, or didn’t grok it upon first reading, go back and read it again. :-) There’s more crossover here than might be apparent at first blush.


    comment at 24. October 2005

  12. Ryan Tomayko:

    No, seriously. Go read it.

    I’d really like to keep this discussion going if at all possible. I think we have 3-4 people who are quite interested in moving this to the next level and getting two sites to talk. I think the Gmail idea is a great one but it would be easier if we owned both sites.

    All of lesscode.org’s resources are at your guys’ disposal. Bill has SSH access and I can assist where needed.

    comment at 25. October 2005

  13. dchud:

    I’m definitely interested in developing more examples. Fyi there’s a diverse group of people hanging out on gcs-pcs-list who developed COinS, and discussion for COinS-PMH started there. If you want to follow up, you’re welcome to join.

    Within a day or two unalog.com will speak COinS-PMH if you want to fiddle with data from there. Would be fun to do the same, or to try out Bill’s proposed API, on lesscode.org. pbinkley is working on an OAI plugin for wordpress, no stable url yet though.


    comment at 25. October 2005

  14. Phil Bogle:

    If there are two apps with critical mass where we own both sides, that would be ideal.

    If not, Greasemonkey is always available to come to the (temporary) rescue.
    If we demonstrate a compelling user experience, buy-in from the sites can come later.

    I think there are many folks who would happily install a greasemonkey script to liberate some of their data bottled up in a particular web app and make it easily transferrable to other web apps.

    comment at 26. October 2005

  15. Phil Bogle:

    I find Bill Burcham’s shelf scenario compelling.

    The form I would like this to take would be a clipboard stack in the cloud. That is, as I was browsing the web, I would like to be able to simply hit copy to add the current selection to the stack. (The selection could include text, images, and hyperlinks, of course.)

    The clipboard stack would include a history of last 100 or so items I had copied. The stack would live on the server, so I could view it from whatever PC I happened to be browsing. AJAX would keep the browser view of the stack synchronized with the server.

    As with Flock’s shelf, I’d want to be able to perform various actions on the items in the stack– insert into the current text entry field, search them, add the containing page to my bookmarks, etc.

    comment at 26. October 2005

  16. Half a Baby Step [@lesscode.org]:

    […] In a previous post I proposed the notion of a web app clipboard. The basic idea was that AJAX could be used to request content from a source application. The content would land on the operating system clipboard in a simple format (the web app clipboard format) and could then be transmitted to a destination application. Now I’m thinking that the original proposal was overbold. As Ryan Tomayko intimated, there ought to be a way to marry the microformats approach with the web app clipboard. Perhaps its profitable to think initially in terms of the source content being scraped directly off the page, without requiring the additional request to the sourcing web app. We’ve got that functionality in hand. With that in hand we could focus on the other side of the equation — where to send the content. The effect would be that we would no longer have to create both producing and consuming applications — we could start with just consuming ones. […]

    pingback at 02. November 2005

  17. inkdroid » a citation microformat - when worlds collide:

    […] Tim White has taken the time to prod the microformats list about the citation microformat that’s been floating around for a few months. It’s really encouraging that a developer at Gale is thinking of using a citation microformat. While I also work in the industry I’ve been coming at the citation microformat from a slightly different angle. For the past few months I’ve been monitoring activity in microformat land and also in another group and I’ve been watching them slowly come together. Recently, Bill Burcham’s Baby Steps to Synergistic Web Apps and Half a Baby Step confirmed my hunch that the two communities were converging. […]

    pingback at 03. November 2005

  18. Bogle’s Blog » The Web Clipboard is coming:

    […] Last October, I blogged on Bill Burcham’s idea of a web clipboard.  Web clipboard standardization is looking more and more likely to happen, based on the recent initiatives such as Live Clipboard and unAPI .  (There are undoubtedly other efforts going on secret that we can expect to hear about soon.) […]

    pingback at 15. March 2006

  19. metapundit.net:

    Ray Ozzie and Microformats

    That said, I think some credit should be given to other people. I have no doubt that the idea occurred to Ozzie independently and he has gone so far as to implement something. It would be nice, however, if he mentioned Tantek Celik who has practically …

    trackback at 15. March 2006

  20. BrainBlog:

    More copy paste web on Ajaxian

    I was playing with some new blog stats I found at http://performancing.com/ the other day. When I noticed Ajaxian picked up on the Copy-Paste-Web post from last week. Thanks to Chris Cornutt for the write up. Metapundit remarks that there…

    trackback at 15. March 2006

  21. Bill Burcham’s memeRocket » Ray Ozzie Demos Web App Clipboard:

    […] The approach requires no proprietary technology — instead relying solely on open standards: HTTP, XML, HTML, ECMAscript (JavaScript), DOM. This means it runs not only in IE but also in Firefox and Safari, for real, right now. (I just tried Opera 8.52 — no joy.) Microsoft has released the concept and code under the Creative Commons Attribution-Share Alike license. As a result I see no intellectual property hangups associated with this thing. No Slugworths mumbling inducements for you to sell out. No grassy knolls. I do have a minor quibble on the IP front though: Ozzie dubs this technology “Live Clipboard” thus infecting the concept with the Microsoft “Windows Live” brand. I have been using the term “Web Application Clipboard” to describe the same concept for a while now. I prefer a “brand free” term — remember all the confusion caused by the infection of JavaScript with the Java brand? […]

    pingback at 21. March 2006

  22. Ray Ozzie Got the Memo:

    […] On March 7, in his talk at the O’Reilly Emerging Technology Conference, Ray Ozzie, CTO Microsoft, demonstrated (short screencasts, live demo page) a method by which users can cut/copy/paste structured content between web applications and between web applications and Windows ones. Alert lesscode readers will notice that Ray’s blog post describing his inspiration and motivation for the idea bears a striking resemblance to my own post from last October.  A deeper look at the screencasts, the live demo and the technical introduction remove any doubt that what Ray demonstrated, and in fact what Microsoft is offering under the Creative Commons Attribution-Share Alike license (you heard me right) is in fact the Web Application Clipboard as described in that original lesscode post and followup. This is in no way meant to diminish the Microsoft folks’ brilliant implementation. The portable trick used to actually hook the browser’s built-in cut/copy/paste functionality is inspired.  The design tradeoff resulting in a visible representation (scissors icon) of every clipboard-capable element is all their own, and quite frankly, is probably a necessary tradeoff if the Web Application Clipboard is to actually get traction.  There’s a more technical analysis posted posted on my personal personal blog, but the executive summary is:Live Clipboard (Microsoft’s name for Web Application Clipboard) is awesome and I believe sites will adopt it. I wish the name weren’t “infected” with the Windows Live brand but that won’t matter a whole lot so long as the specification is good and open. Right now though I can’t find any specification at all but I’m keeping hope alive on that front anyway (you listening Gandi? MLK?)What I find more interesting than that technical stuff though is the amount of mindshare this thing got “all of a sudden”. First off, note that Ray’s March 7 blog post on this subject comprises the only thing he’s blogged since the end of January.  A whole month of the Microsoft CTO’s time — how many dog-years is that?  Now realize that the good guys over at the Gillmor Gang podcast spent a full 48 minutes on this single topic on March 16 (Ozzie Gang I, Ozzie Gang II), most of which was spent interviewing Ray Ozzie himself.  They were downright effusive. From Ozzie Gang II:Mike Arrington 4:45“Does this signify any sort of shift organization where people in microsoft who have ideas that can help the Web … that they can also get things through the politics and through the system fast enough so it doesn’t take and years?”John Udell 17:52“Ray this is great.  I just personally want to thank you for doing it.  I think it’s a tremendous step.”Steve Gillmor 17:57“Yeah, and I think that everybody is knocked out that somebody with your intuition is in such a powerful position at Microsoft.  You know, bringing Microsoft into the community has been very difficult to do and you seem to be doing it.”Dan Farber 18:31“I think as everybody on this call has said, we’re quite impressed with this very simple little notion that seems to be well executed and that it comes from Microsoft now really injecting itself into the big old Web community.  It’s cool!”Dan Farber 19:13“If you go to the desktop and you consider cut and paste, copy and paste, you know it’s everywhere… to be able to do that on the web… it’s like a big gift — it’s a contribution to the Web”Mike Arrington 22:18“I think the big story here is that  we’re starting to see with Ray’s leadership that Microsoft is able to do things that seem selfless and simply good for their own sake and SSE is one example and (Live Clipboard) is another stunning example…”Steve Gillmor 24:05“I think that Microsoft may well be on the threshold, whether they fully realize it or not at all levels of the organization, of winning by accepting a part in the community, and I think that’s a huge story.”Strange and wonderful times indeed. […]

    pingback at 22. March 2006

  23. Code4Lib2006 - Day 1 - Morning at ebyblog:

    […] Since the conference this idea has taken off even more, but even then it was ramping up and I was interested in learning more. I haven’t been keeping as good of track as I should and don’t understand everything about it. My general understanding is that it is a simple microformat coupled with a simple API that allows you to move metadata for objects around. The official site says “unAPI is a tiny HTTP API for the few basic operations necessary to copy discrete, identified content from any kind of web application”. Your best bet is to go through the examples on the site. The one thing that is clear is that there is a need for the ability to copy/paste information on the web similar to copy/paste on the desktop. There’s also some posts by Jon Udell and over at Lesscode that may bring you up to speed on the issue. […]

    pingback at 24. March 2006

  24. Noli San Jose:

    Ray Ozzie has just recently posted a blog (http://spaces.msn.com/rayozzie/PersonalSpace.aspx) referencing and acknowledging the ideas on this page.

    comment at 02. April 2006