JQuery to React: How we rewrote the HelloSign Editor

https://dropbox.tech/application/jquery-to-react--how-we-rewrote-the-hellosign-editor

HelloSign is a Dropbox company

In both the Editor and Signer steps of the process, we show you images of your document’s pages and draw the signing fields on top of them. This overlay process draws the fields over a transparent background (instead of the page image itself), which we merge with the original file to present onscreen.

we had some bugs where the Editor experience didn’t always look the same as the Signer experience, and it wasn’t always the same as the final PDF.

the root problem was obvious: we had 3 different implementations of a document viewer:

  • Editor: one 12,000 line jQuery file
  • Signer: React app
  • Overlay: PHP scripts that build the final PDF using Cairo

Our Jest tests can boot the whole Editor with a mock backend, so it makes for a fairly realistic test. The only thing I can think of that didn’t work in JSDOM was a few places that used element.getBoundingClientRect(). JSDOM doesn’t compute layouts, so it returns zero for all values.

UI is a functional representation of state

The new Editor was built under a codebase split, which allowed us to roll it out to specific accounts or groups of accounts without affecting the rest of our customers. Moreover, it allowed us to rollout the new Editor code while working on a UI redesign—the one we had chosen not to include as part of our move to React—simultaneously.

we need to run the Overlay on the server in an environment that is mostly PHP. We’re still working through some details, so this hasn’t made it to production yet.

Edit