# Yahoo Mail Published articles for Yahoo Mail. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Achieving Major Stability and Performance Improvements in Yahoo Mail with a Novel Redux Architecture DevFeed: [Achieving Major Stability and Performance Improvements in Yahoo Mail with a Novel Redux Architecture]() Original publisher: [Read original article]() Author: mikesefanov Published: 2018-04-18T14:04:59Z Content type: article Language: en Sources: [Yahoo]() Topics: [Redux](), [React](), [API](), [JavaScript]() Tags: [api](), [developers](), [engineering](), [improvements](), [javascript](), [open-source](), [performance](), [react](), [redux](), [yahoo-engineering](), [yahoo-mail]() ### AI overview Yahoo Mail describes changes to its Redux architecture that improved stability, page-load performance, frame-rendering time, and API-call efficiency. The article explains how action syncers separate API interactions from action creators and components, enabling techniques such as batching and deduplication. ### Source excerpt yahoodevelopers: By Mohit Goenka, Gnanavel Shanmugam, and Lance Welsh At Yahoo Mail, we're constantly striving to upgrade our product experience. We do this not only by adding new features based on our members' feedback, but also by providing the best technical solutions to power the most engaging experiences. As such, we've recently introduced a number of novel and unique revisions to the way in which we use Redux that have resulted in significant stability and performance improvements. Developers may find our methods useful in achieving similar results in their apps. Improvements to product metrics Last year Yahoo Mail implemented a brand new architecture using Redux. Since then, we have transformed the overall architecture to reduce latencies in various operations, reduce JavaScript exceptions, and better synchronized states. As a result, the product is much faster and more stable. Stability improvements: when checking for new emails - 20% when reading emails - 30% when sending emails - 20% Performance improvements: 10% improvement in page load performance 40% improvement in frame rendering time We have also reduced API calls by approximately 20%. How we use Redux in Yahoo Mail Redux architecture is reliant on one large store that represents the application state. In a Redux cycle, action creators dispatch actions to change the state of the store. React Components then respond to those state changes. We've made some modifications on top of this architecture that are atypical in the React-Redux community. For instance, when fetching data over the network, the traditional methodology is to use Thunk middleware. Yahoo Mail fetches data over the network from our API. Thunks would create an unnecessary and undesirable dependency between the action creators and our API. If and when the API changes, the action creators must then also change. To keep these concerns separate we dispatch the action payload from the action creator to store them in the Redux state for later ## How to Make Your Web App More Reliable and Performant Using webpack: a Yahoo Mail Case Study DevFeed: [How to Make Your Web App More Reliable and Performant Using webpack: a Yahoo Mail Case Study]() Original publisher: [Read original article]() Author: mikesefanov Published: 2017-12-13T18:27:36Z Content type: tutorial Language: en Sources: [Yahoo]() Topics: [Webpack](), [web applications](), [JavaScript](), [Development]() Tags: [case-study](), [css](), [dependency](), [developers](), [how-to](), [javascript](), [oath](), [web-app](), [webpack](), [yahoo](), [yahoo-engineering](), [yahoo-mail]() ### AI overview This Yahoo Mail case study explains how the team adopted webpack as its JavaScript module bundler to improve development cycles, reliability, and performance at scale. It describes webpack's dependency-graph and bundling model, plugin selection and development, Grunt integration, and bundle optimization before production deployment. ### Source excerpt yahoodevelopers: By Murali Krishna Bachhu, Anurag Damle, and Utkarsh Shrivastava As engineers on the Yahoo Mail team at Oath, we pride ourselves on the things that matter most to developers: faster development cycles, more reliability, and better performance. Users don't necessarily see these elements, but they certainly feel the difference they make when significant improvements are made. Recently, we were able to upgrade all three of these areas at scale by adopting webpack® as Yahoo Mail's underlying module bundler, and you can do the same for your web application. What is webpack? webpack is an open source module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs. Then it packages all of those modules into a small number of bundles, often only one, to be loaded by the browser. webpack became our choice module bundler not only because it supports on-demand loading, multiple bundle generation, and has a relatively low runtime overhead, but also because it is better suited for web platforms and NodeJS apps and has great community support. Comparison of webpack to other open source bundlers How did we integrate webpack? Like any developer does when integrating a new module bundler, we started integrating webpack into Yahoo Mail by looking at its basic config file. We explored available default webpack plugins as well as third-party webpack plugins and then picked the plugins most suitable for our application. If we didn't find a plugin that suited a specific need, we wrote the webpack plugin ourselves (e.g., We wrote a plugin to execute Atomic CSS scripts in the latest Yahoo Mail experience in order to decrease our overall CSS payload**). During the development process for Yahoo Mail, we needed a way to make sure webpack would continuously run in the background. To make this happen, we decided to use the task runner Grunt. Not only does Grunt ## Yahoo Mail's New Tech Stack, Built for Performance and Reliability DevFeed: [Yahoo Mail's New Tech Stack, Built for Performance and Reliability]() Original publisher: [Read original article]() Author: mikesefanov Published: 2017-06-27T15:51:49Z Content type: release Language: en Sources: [Yahoo]() Topics: [React](), [Node.js](), [Redux](), [Server-side rendering](), [Caching](), [Front end](), [Web Development](), [Routing (disambiguation)]() Tags: [cache](), [engineering](), [node-js](), [open-source](), [react](), [redux](), [routing](), [server-side-rendering](), [yahoo](), [yahoo-engineering](), [yahoo-mail]() ### 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 ## Yahoo Mail's Continuous Delivery Pipeline for Frequent, Stable Releases DevFeed: [Yahoo Mail's Continuous Delivery Pipeline for Frequent, Stable Releases]() Original publisher: [Read original article]() Author: mikesefanov Published: 2017-06-27T15:50:35Z Content type: article Language: en Sources: [Yahoo]() Topics: [CI/CD](), [Testing](), [code productivity](), [Front end](), [browsers]() Tags: [browsers](), [ci-cd](), [continuous-delivery](), [continuous-integration](), [developer](), [pipelines](), [testing](), [yahoo](), [yahoo-engineering](), [yahoo-mail]() ### AI overview An engineering article describes Yahoo Mail's continuous delivery pipeline, designed to support frequent product updates while maintaining release stability. It covers extensive unit and integration testing, staged rollout through internal, alpha, beta, and canary environments, and strategies for handling intermittent frontend test failures. ### Source excerpt By Mohit Goenka, Senior Engineering Manager Building the technology powering the best consumer email inbox in the world is no easy task. When you start on such a journey, it is important to consider how to deliver such an experience to the users. After all, any consumer feature we build can only make a difference after it is delivered to everyone via the tech pipeline. As we began building out the new version of Yahoo Mail, we wanted to ensure that our internal developer productivity would not be hindered by how our pipelines work. Keeping this in mind, we identified the following principles as most important while designing the delivery pipeline for the new Yahoo Mail experience: Product updates are pushed at regular intervals Releases are stable Builds are not blocked by irrational test failures Developers are notified of code pushes Hotfixes Rollbacks Heartbeat pushes Product updates are pushed at regular intervals We ensure that our engineers can push any code changes to all Mail users everyday, with the ability to push multiple times a day, if necessary or desired. This is possible because of the time we spent building a solid testing infrastructure, which continues to evolve as we scale to new users and add new features to the product. Every one of our builds runs 10,000+ unit tests and 5,000+ integration tests on various combinations of operating systems and browsers. It is important to push product updates regularly as it allows all our users to get the best Mail experience possible. Releases are stable Every code release starts with the company's internal audience first, where all our employees get to try out the latest changes before they go out to production. This begins with our alpha and beta environments that our Mail engineers use by default. Our build then goes out to the canary environment, which is a small subset of production users, before making it to all users. This gives us the ability to analyze quality metrics on internal and canary servers b