Dropbox Paper

In 2014, Dropbox acquired Hackpad, which they would later re-release as Dropbox Paper in 2015. Dropbox has made some improvements along the way, but in it’s core, Dropbox Paper is still Hackpad.

I’m going to use Hackpad as an alias for Dropbox Paper in most places.

Underneath, Hackpad is a mix of Java and Javascript, sharing large amounts of code with its predecessor Etherpad (a foundational component of Google Docs). Events are send in real-time to clients using streaming HTTP/2 connections. For Firefox, it appears they send XHR requests when the user makes changes and only listen for updates on the stream.

For the client, Hackpad uses the ACE editor. Dropbox additions appear to use React extensively.

Javascript packages found in the bundle

Sadly souremaps aren’t enabled, but we can still find some dependencies with a little grep through the bundle. I think some of these may be dependencies of others.

It looks like most of Dropbox Paper is using react, but there is still jquery there too.

• chrono
• components
• email-addresses
• emojis
• fold-to-ascii
• google-protobuf
• grapheme-splitter
• gzip
• highlight.js
• ifvisible
• immutability-helper
• intl-messageformat
• intl-relativeformat
• Intl.js
• Intl
• invariant
• isMobile
• jquery-migrate
• jquery.ajaxqueue
• jquery.autocomplete
• jquery
• json2
• katex
• kryptos
• lodash
• paramikojs
• platform
• purify
• react-addons-css-transition-group
• react-addons-update
• react-aria-menubutton
• react-clamp
• react-day-picker
• react-intl
• react-redux
• react
• react_dom
• react_dom_server
• rebound
• redux-thunk
• redux
• select2
• sizzlejs
• smartcrop with tracking.js integration
  • exif is probably used here to get image orientation
• tether
• timeme
• tslib
• uri
• wicket-select2e
• zlib.js

protobufs

It appears that protobufs are used for sending some messages. Here is a list of protobuf definition names I found.

proto.paper.CaretPosition
proto.paper.ClientReadyMessage
proto.paper.CollabMessage
proto.paper.CollabMessageList
proto.paper.LoneCaretMessage
proto.paper.StreamingClientControlMessage
proto.paper.StreamingClientControlMessage.HiccupMessage
proto.paper.StreamingClientControlMessage.KillMessage
proto.paper.StreamingClientControlMessage.UseChannelMessage
proto.paper.UserChangesMessage

It seems that Chrome and Firefox don’t support the inspection of the streaming connection. The content-type is text/messages, which isn’t a registered MIME type, so that may be the cause.

bundle size

Dropbox makes extensive use of bundle splitting and progressive loading, so the content loads after about 2.5 seconds, while the onload event fires at 9.5 seconds.