Evolving Yahoo Mail

.@Yahoo chose @ReactJS + Flux for building their next generation Mail:

  • Link: Yahoo Mail moving to React
  • For the next generation Yahoo Mail platform, we wanted
  • The “one way data flow” appealed to all developers in the team as a neat way to think about a UI application interactions.
  • Yahoo Engineering – All Rights Reserved.
  • Last month Yahoo hosted the React JS meetup in the Sunnyvale Campus .

Evolving Yahoo Mail Yahoo Mail has been around since 1999. Over the years, the code base has evolved from a completely server rendered Web 1.0 app all the way to one of the largest YUI based rich…

@ReactiveConf: .@Yahoo chose @ReactJS + Flux for building their next generation Mail:

Yahoo Mail has been around since 1999. Over the years, the code base has evolved from a completely server rendered Web 1.0 app all the way to one of the largest YUI based rich internet web application today.

Last month Yahoo hosted the React JS meetup in the Sunnyvale Campus. We had over 120 people attending and it was great to share knowledge and exchange ideas about Javascript, React, Flux etc. I gave a quick update about Yahoo Mail’s evolution over the years and the rationale for choosing ReactJS + Flux as the platform of choice for building the next generation Mail product.

Model-View-Controller is the architectural pattern of choice in the current mail platform both on the server and on the client. The pattern provided a great foundation for how the components were built. However, with any code base that has multiple developers changing code over many years, things start to get complex. Like any MVC architecture, Controllers in the Yahoo Mail platform ask for data & prime models, Models dispatch events handled by views, views dispatch events handled by other views. Events are the gel that hold everything together and YUI events provide a great robust foundation to handle such “interesting moments”.

This is also where the code started becoming hard to debug. Dispatched events were causing cascading reactions and fixing any issues required a lot of background about the mail code base. For a new developer, coming in and grasping the code was never easy. 

For the next generation Yahoo Mail platform, we wanted

When we were reviewing the technology to use, we evaluated Ember JS and Angular JS. Both of these frameworks force you into their own suggested way of doing things. Relying on past experiences and noticing the trends in the community we also recognized that the age of large frameworks or platform libraries is over. So we evaluated libraries like KnockOut, Durandal and Rivets that can provide a foundation for our custom framework along with a few micro-libraries. In the end we decided to go with React JS and Flux because of the following reasons 

The “one way data flow” appealed to all developers in the team as a neat way to think about a UI application interactions. This also felt like a good solution to make debugging and understand data flows much easier and predictable. With React JS, we have the luxury of just one language in our code base across the client and the server. The Virtual DOM implementation on React JS makes it easier to render the UI on the server using Node.js. 

Though we are aware that not everything can be thought of as a one way data flow and we are cautious not to over engineer the interaction between Action-Creators and Stores. We will post more on that later.

The slides for the talk I presented at the meet up are below 

Link: Yahoo Mail moving to React

You can meet the Yahoo Mail team at the next React JS meetup 

Evolving Yahoo Mail