Skip to main content
Engineering, Web

Counting Calories: How We Improved the Performance and Developer Experience of UberEats.com

12 February 2020 / Global
Featured image for Counting Calories: How We Improved the Performance and Developer Experience of UberEats.com
Figure 1. In this dependency graph of JavaScript files and components, thin lines indicate a dynamic import, while bold lines indicate a regular import. The colors illustrate one way that these files could be broken into separate bundles. The blue components have been identified as common to all entry points whereas yellow (left) and green (right) could be put in separate bundles.
Figure 2. The UberEats.com backend sends different bundles to users based on the and page being accessed. We use a split entry point, where mobile and desktop devices receive entirely different top-level components. Bundle splitting within these components lets us isolate different features or pages as well as their respective data fetching and presentational needs.
Figure 3. In these screenshots of the checkout screen on mobile devices (left) and desktop (right), we highlighted components shared between platforms in green.
Code transform
Figure 4. In the UberEats.com rewrite, our transform simplifies a ‘for .. of’ to a ‘for’ so that all browsers can use this feature. This transform is provided by a .
Code transform using Babel plugin
Figure 5. When we transform optional chaining to ES5 using a Babel plugin, the code becomes significantly more verbose. In this case, one line of code becomes seven, which increases the bundle size.
Figure 6. We adopted a hybrid approach for loading data on the Restaurants page.
Figure 7. The deployment process for UberEats.com builds starts on the left with ‘code landed’ and follows the arrows until the application is entirely deployed or rolled back (based on business metrics).
Figure 8. We built UberEats.com’s internal style guide using Storybook so developers would have a reference for visual elements such as buttons.
Chris Lewis

Chris Lewis

Chris Lewis is a software engineer on the Uber Eats Prediction team.

Brendan Dean

Brendan Dean

Brendan Dean is a software engineer on the Uber Eats Web team.

Posted by Chris Lewis, Brendan Dean