TechPrufer
Get started
Dropbox
Dropbox logoDropbox · Feature trail

Core Web Serving Platform Rewrite

2 posts · Sep 2020 – Apr 2023

What this trail covers

Dropbox re-architected its core web serving stack with the introduction of Edison, a new web framework, stack, and platform. This initiative replaced the legacy DWS webserver and its pagelet architecture with a Single Page Application (SPA) model. Edison enables isomorphic rendering, faster developer iteration cycles, and a more unified web surface, addressing technical debt accrued over 13 years and preparing the platform for future product evolution. This post details the migration of the HelloSign Editor from jQuery to React, improving fidelity, speed, and usability by consolidating the document viewer implementation across Editor, Signer, and Overlay components. The rewrite leveraged React's component model and Storybook for accelerated development and testing, and introduced a new frontend architecture for HelloSign's single-page application.

All Dropbox trails
  1. How Edison is helping us build a faster, more powerful Dropbox on the webThis post details the transition from the legacy DWS webserver and its pagelet architecture to Edison, a new web framework, stack, and platform enabling a Single Page Application (SPA) model. It highlights the challenges of the pagelet architecture, including manual synchronization between backend data fetching and frontend consumption, and the difficulty of cross-pagelet functionality. Edison addresses these by enabling isomorphic rendering and faster developer iteration cycles, aiming to unify the web surface and sunset 13 years of technical debt.
  2. JQuery to React: How we rewrote the HelloSign EditorThis post details the migration of the HelloSign Editor from a jQuery-based implementation to React. The primary technical drivers were to improve fidelity between the Editor, Signer, and final signed document views, increase the speed of component placement and changes in the Editor, and enhance overall Editor usability. The solution involved rewriting the Editor in React to create a single, unified document viewer used across all three components. Key technical decisions included building in layers (transport, editor components, UI), making UI a functional representation of state, consolidating state management, and leveraging Storybook for accelerated development and testing. The post highlights the benefits of React's declarative model over manual DOM manipulation and the advantages of a unified codebase for maintaining consistency.