TechPrufer
Get started
Yahoo
Yahoo logoYahoo · Feature trail

Yahoo Mail Web App Performance and Reliability with Webpack

2 posts · Jun 2017 – Dec 2017

What this trail covers

Yahoo Mail has significantly improved its web application's reliability and performance by adopting a new tech stack including React, Redux, and Node.js. This migration led to faster development cycles by reducing code reflection time from minutes to seconds, enhanced reliability by shifting JavaScript bundle generation from runtime to build time, and improved performance through substantial reductions in gzipped JavaScript payload size, server-side render time, and overall launch performance. This post details the introduction of proximity-based routing, server-side rendering for isomorphic applications, efficient bundling strategies, improved CSS reuse with react-atomic-css, and the use of Mendel for bucket testing isomorphic web apps. It also highlights the reduction in JavaScript and CSS footprint by approximately 50%, faster search and message read operations, and reduced memory consumption. The new version boasts a 99.99% success rate on core flows and significantly reduced client-side errors. Product agility is enhanced through independently deployable components and a robust CI/CD pipeline enabling daily pushes. Developer effectiveness is improved through the use of open-source technologies and a consistent onboarding program. Accessibility has been state-of-the-art with enhanced visual themes and optimization for assistive technologies. Key components like Mendel have been open-sourced.

All Yahoo trails
  1. How to Make Your Web App More Reliable and Performant Using webpack: a Yahoo Mail Case StudyThis post details the integration of webpack as Yahoo Mail's module bundler, leading to faster development cycles (30s-1min to 5s), improved reliability by shifting JavaScript bundle generation from runtime to build time, and better performance with a 75KB gzipped payload reduction, 50% reduction in server-side render time, and 10% improvement in launch performance metrics. It also describes the development of a custom plugin for Atomic CSS generation.
  2. Yahoo Mail’s New Tech Stack, Built for Performance and ReliabilityThis post details the introduction of proximity-based routing for reduced time to first byte, server-side rendering for isomorphic applications using Node.js, efficient bundling strategies (application, vendor, lazy-loaded bundles), improved CSS reuse with react-atomic-css, and the use of Mendel for bucket testing isomorphic web apps. It also highlights the reduction in JavaScript and CSS footprint by approximately 50%, faster search and message read operations, and reduced memory consumption. The new version boasts a 99.99% success rate on core flows and significantly reduced client-side errors. Product agility is enhanced through independently deployable components and a robust CI/CD pipeline enabling daily pushes. Developer effectiveness is improved through the use of open-source technologies and a consistent onboarding program. Accessibility has been state-of-the-art with enhanced visual themes and optimization for assistive technologies. Key components like Mendel have been open-sourced.