How did Quip implement the spreadsheet feature? #

I originally posted this on Quora, but I thought it would be good to archive it more permanently here.

For some background on Quip's technology stack, see What technologies were used to build Quip? and How is Quip's web client implemented?

The formula engine for spreadsheets is implemented in JavaScript. This allows the same calculations to be done in a few places:

  • Interactively on the web, without waiting for a server response
  • Interactively on mobile devices (even without a network connection)
  • On the server-side (Quip primarily uses Python on the server, we used pyv8 to wrap the formula engine such that the server could use it).

Spreadsheets are stored using the same data model as documents: divided up into sections (roughly analogous to paragraphs in text) -- each cell, row, column and table is a section. This enables heterogeneous documents, with images, text, list and spreadsheets and allows Quip's syncing engine to be reused for spreadsheets.

Spreadsheet rendering is implemented in JavaScript, HTML and CSS on all three platforms (web, iOS and Android -- Quip's entire document editing codebase is shared). Unlike Quip's previous table feature (where table cells were distinct components), the entire spreadsheet is a single component that handles its own updating of "child" sections (cells, rows and columns). This allows rendering to be much faster, since the spreadsheet component can make certain assumptions about child layout and DOM structure that the more generic table code could not.

Editing is handled in a platform specific manner, since the built-in keyboards on mobile would not have been appropriate for numeric and formula cells. Editing functionality is abstracted out behind an interface, which has a DOM implementation on the web, and a JavaScript stub on mobile platforms that makes the necessary calls to the native cell editing UI.

Post a Comment