# Yahoo Mail's New Tech Stack, Built for Performance and Reliability

DevFeed: [Yahoo Mail's New Tech Stack, Built for Performance and Reliability](<https://devfeed.tech/articles/yahoo-mail-s-new-tech-stack-built-for-performance-and-reliability-20481.md>)

Original publisher: [Read original article](<https://yahooeng.tumblr.com/post/162320493306>)

Author: mikesefanov

Published: 2017-06-27T15:51:49Z

Content type: release

Language: en

Sources: [Yahoo](<https://devfeed.tech/sources/yahoo.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Node.js](<https://devfeed.tech/topics/node-js.md>), [Redux](<https://devfeed.tech/topics/redux.md>), [Server-side rendering](<https://devfeed.tech/topics/server-side-rendering.md>), [Caching](<https://devfeed.tech/topics/caching.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Routing (disambiguation)](<https://devfeed.tech/topics/routing.md>)

Tags: [cache](<https://devfeed.tech/tags/cache.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [node-js](<https://devfeed.tech/tags/node-js.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [react](<https://devfeed.tech/tags/react.md>), [redux](<https://devfeed.tech/tags/redux.md>), [routing](<https://devfeed.tech/tags/routing.md>), [server-side-rendering](<https://devfeed.tech/tags/server-side-rendering.md>), [yahoo](<https://devfeed.tech/tags/yahoo.md>), [yahoo-engineering](<https://devfeed.tech/tags/yahoo-engineering.md>), [yahoo-mail](<https://devfeed.tech/tags/yahoo-mail.md>)

## AI overview

Yahoo describes a rewritten desktop Yahoo Mail experience built with a front-end stack including React, Redux, Node.js, and open-source technologies. The architecture uses proximity-based routing, server-side rendering, isomorphic code, code bundling, caching, modular CSS, and open-source experimentation tools to improve loading, reliability, and payload size.

## Source excerpt

By Suhas Sadanandan, Director of Engineering When it comes to performance and reliability, there is perhaps no application where this matters more than with email. Today, we announced a new Yahoo Mail experience for desktop based on a completely rewritten tech stack that embodies these fundamental considerations and more. We built the new Yahoo Mail experience using a best-in-class front-end tech stack with open source technologies including React, Redux, Node.js, react-intl (open-sourced by Yahoo), and others. A high-level architectural diagram of our stack is below. New Yahoo Mail Tech Stack In building our new tech stack, we made use of the most modern tools available in the industry to come up with the best experience for our users by optimizing the following fundamentals: Performance A key feature of the new Yahoo Mail architecture is blazing-fast initial loading (aka, launch). We introduced new network routing which sends users to their nearest geo-located email servers (proximity-based routing). This has resulted in a significant reduction in time to first byte and should be immediately noticeable to our international users in particular. We now do server-side rendering to allow our users to see their mail sooner. This change will be immediately noticeable to our low-bandwidth users. Our application is isomorphic, meaning that the same code runs on the server (using Node.js) and the client. Prior versions of Yahoo Mail had programming logic duplicated on the server and the client because we used PHP on the server and JavaScript on the client. Using efficient bundling strategies (JavaScript code is separated into application, vendor, and lazy loaded bundles) and pushing only the changed bundles during production pushes, we keep the cache hit ratio high. By using react-atomic-css, our homegrown solution for writing modular and scoped CSS in React, we get much better CSS reuse. In prior versions of Yahoo Mail, the need to run various experiments in parallel resu