Wednesday, January 7th, 2009

Technical Details Behind iWork.com

Category: Apple, Canvas

>As soon as I heard about the new iWork.com site launched yesterday, I knew I wanted to know more about how it was made. iWork.com is a web-based way to share and collaborate over your iWork documents. I searched around the blogosphere seeing if anyone knew any technical details, but didn’t find anything, so I had to crack open Firebug and see what was under the covers. I really wanted to know whether the apps were built with Flash or Ajax or something else.

I downloaded a trial version of iWork 2009 and published a Keynote presentation. The new Sharing function unfortunately requires you to configure and use the Apple Mail program, which I did before I could test out to see how the iWork.com shared documents work.

Looking at the JavaScript files, I see SproutCore and Prototype being pulled in, so everything is built with Ajax and web technologies. It’s also using WebDAV to pull in the metadata about the document, which is interesting (though it’s piping the WebDAV over some kind of proxy):

http://publish.iwork.com/iw/p159985190/.iWork/Share/Untitled.pages/Metadata/?webdav-method=PROPFIND

That URL returns an XML WebDAV document with the document metadata properties:

  1. < ?xml version="1.0" encoding="utf-8" ?>
  2. <multistatus xmlns="DAV:">
  3. <d :response xmlns:D="DAV:">
  4.  </d><d :href>/iw/p159985190/.iWork/Share/Untitled.pages/Metadata/</d>
  5.  <d :propstat>
  6.   </d><d :prop>
  7.    </d><d :resourcetype>
  8.     <d :collection />
  9.    </d>
  10.    <d :getlastmodified>Wed, 07 Jan 2009 02:07:51 GMT</d>
  11.  
  12.    <d :modificationdate>2009-01-07T02:07:51Z</d>
  13.    <d :comment>1231293220308</d>
  14.    <x :Heckler.pages xmlns:X="urn:iwork:property">[{"guid":1,"type":"Page","w":612,"h":792}
  15. ]
  16. </x>
  17.    <x :Heckler.downloads xmlns:X="urn:iwork:property">[{"size":198284,"path":"Untitled.pages","guid":1,"downloadType":"pages09","type":"Download"},{"size":73533,"path":"Untitled.pdf","guid":2,"downloadType":"pdf","type":"Download"},{"size":30720,"path":"Untitled.doc","guid":3,"downloadType":"word","type":"Download"}]</x>
  18.    <x :Heckler.document xmlns:X="urn:iwork:property">[{"publishName":"Untitled.pages","publishDate":1231293215,"title":"Untitled","appBuildDate":"Dec 21 2008, 01:44:15","type":"Document","size":604363,"viewers":0,"marketeerPublishName":"b4d96779c707ea0d05ba5d33989ba0e45f874d3b40204a46895cdac1bd2fafac","guid":"Untitled.pages","nativeDownload":"Untitled.pages","authorEmail":"bradneuberg@gmail.com","documentType":3,"pageCount":1,"documentVersion":92008102400,"passwordProtected":false}]</x>
  19.  
  20.  
  21.   <d :status>HTTP/1.1 200 OK</d>
  22.  
  23.  
  24. </multistatus>

Notice how some of the metadata payload is JSON as well.

The web-based iWork apps are themselves built above SproutCore, using that framework to organize and do things. For example, there appears to be something named CoreHeckler that has to do with the commenting system, all built using SproutCore.

Using the Firebug Inspector, I see that the slides are a combination of an image file, the Canvas tag, and transparent DIVs that overlay; if there are hyperlinks on the page they are overlaid on a separate DIV that lies over the canvas. Comments also float on top of the Canvas using another DIV. The Canvas appears to be used for comments somehow, but I’m not sure how. I see CoreHeckler.Graphics being bound to the Canvas element; I’m not super familiar with SproutCore however.

Looking through the CSS I see they are using a few -webkit- specific CSS style rules, mostly around rounded border corners and shadows. They are also using the Webkit CSS Gradients and Clipping.

I wanted to see how things were handled in Internet Explorer. When I look at a published iWork.com document in Internet Explorer a very interesting dialog box first appears:

It was indeed slow; it took about 17 seconds to load the document in IE. Clicking on individual slides took about 4 to 5 seconds to show.

I used the Internet Explorer Developer Toolbar to get into the DOM and see how things run on IE. The first thing I see is that the Canvas tag is in the DOM:

However, notice a glitch that it has the <CANVAS> and </CANVAS> tags as separate elements, which can sometimes happen when IE is dealing with unknown tags. They are also definently using VML (Vector Markup Language) on IE, since I see them pulling in the VML behavior for IE on the main page. I wonder why they didn’t just use the Google-ExCanvas library that emulates Canvas for Internet Explorer (Disclosure: I work for a team at Google that promotes open web technologies like this).

One other thing I noticed is that if you are on the iPhone you get redirected to an iPhone version of the app. This just replaces the URL /document/ section with /iphone/. When you navigate to this you get a PDF version of the page — that must be the iPhone version, a PDF file!

I wanted to see how the Pages application does things as well, so I published a document there. The published text is selectable in the browser! The document itself appears to be an image file. To do selection, whenever I run over some text it appears that a Canvas element is created and a ‘highlighted’ type graphic is drawn over the correct characters. Internet Explorer also supports similar highlighting, though on there it appears to be using VML to do the highlighting.

All in all this is a very interesting web-based application built with Ajax and JavaScript!

Related Content:

  • New book details the concepts behind Java performance
    Java Performance, by Charlie Hunt and Binu John is a very technical guide to fine tuning Java applications for Windows, Linux, and Solaris systems....
  • Chapter 4: 'Technical Exercises'
    As an integral part of end-to-end process integration, this book provides both experienced and new SAP XI developers with a detailed overview of the...
  • Facts behind the figures
    It has been a lean time for job seekers - with precious little to choose from despite the impression created by...
  • No Objects Left Behind
    Java's automated memory management has been a constant source of confusion for many trying to obtain predictability in response times. A significant...
  • The code behind the beat
    Continuing our series looking at unusual IT jobs, Graham Trott tells us how he uses his coding skills in the radio...

Posted by Brad Neuberg at 6:30 am
4 Comments

++++-
4 rating from 23 votes

4 Comments »

Comments feed TrackBack URI

I think you missed something in your investigation. The documents themselves are embedded in the canvas as pdf files.

I was curious how they were going to handle formatting, fonts, and images in documents. They handle it by generating pdf pages (actually separate pdf files per page) that is used in the main document view. Therefore, they can ensure the document looks exactly like it did in iWork on the desktop.

This also means that they are a long way away from allowing someone to edit the document through iWork.com.

Take a look at the files being downloaded using the network timeline (easiest in Safari) to see the pdf files.

Comment by grigs — January 7, 2009

I’d be very interested in seeing whether anyone releases similar apps in the future for people to host on their own websites. Even “just” having comment mark-up is great.

Comment by PACraddock — January 8, 2009

I’m also fascinated that they are using VML in IE instead of ExCanvas… seems like a huge wasted effort to build it with another technology and then warn everyone that it will be horribly slow.

Flash is the other main technology that can be used to build this, but perhaps Apple felt they would be heavily criticized for using using Flash when it is not on the iPhone.

@PACraddock – There are quite a few other sites like iWork.com out there. Check out Backboard for example. (Disclosure: I helped start the site, and we chose Flash over canvas so that we could support IE.)

Comment by jseibert — January 8, 2009

The JSON-in-XML reminds me of this: http://thedailyajaxian.com/Articles/Keep-it-Simple-and-Stupid.aspx

Comment by whyisjasontaken — January 12, 2009

Leave a comment

You must be logged in to post a comment.