Downloaded 200 times
Uploaded bySubramanyan Murali
Yahoo Mail moving to React
This document summarizes the history of building Yahoo Mail over the years from 1999 to 2015. It describes moving from early versions built with C++ and Java to the current implementation using PHP, YUI, and JavaScript. It outlines the transition to using React and Flux to modernize the codebase and make it more modular. Key aspects discussed include implementing optimistic updates in React/Flux by dispatching actions before XHR requests complete and challenges around first byte flushing, debugging, and testing Flux applications.
Yahoo Mail moving to React
- 1. Building Yahoo Mailover the years R e a c t M e e t u p ⎪ S e p t e m b e r 2 5 , 2 0 1 4
- 2. Subramanyan Murali Engineering Manager,Yahoo Mail subram@yahoo-inc.com @rmsguhan
- 3. I want toshare … History of Mail Moving to the React way The optimistic update use case
- 4. A little bitof history …
- 5. 1999 First gen C++, HTML Ajaxfor world peace ? 2004 Oddpost Java, Python, JS 2008 Classic PHP, JS 2010 The One PHP, YUI, JS
- 6. Modern Mail PHP, Apacheon server YUI on the client First byte flush using big pipe Shared templates between client and server C grade to A grade browser support
- 7.
- 8.
- 9.
- 10. Events Controllers ask forData & prime models Models dispatch events handled by views Views dispatch events handled by other views Dispatched events causing cycle reaction
- 11.
- 12. Controller Message View Model Delete Message EventHandler msg:remove Model Folder View Controller fld:change List View Controller Model XHR Request Web Service Success Request
- 14. Evolving for thefuture
- 15. 2015 Next gen NodeJS, React+ Flux, MicroJS
- 16. “ The Ageof large platform libraries is over ”
- 17. What we wanted Predictableflow ~ Easy Debugging Modernize the code base Isomorphic application Independently deployable components
- 18.
- 19. Message View MSG_REMOVE Action Creator Folder View ListView Message Store Folder Store emit-change emit-change emit-change Dispatcher callbacks
- 20.
- 21. Folder View List View MessageView MSG_REMOVE Action Creator Message Store Folder Store emit-change emit-change emit-change Dispatcher callbacks XHR Request Web Service MSG_REMOVE_SUCCESS XHR Success
- 22. Folder View List View MessageView MSG_REMOVE Action Creator Message Store Folder Store emit-change emit-change emit-change Dispatcher callbacks XHR Request Web Service MSG_REMOVE_FAIL XHR Failure
- 24. Transactional Stores First ByteFlush Record and Replay actions
- 25.
- 26. We need tosolve … First Byte Flush for Flux applications Debugging Transactional Stores XHR Responsibility, Actions or stores Testing components Style and Lint checks on JSX Build versioning and bundling › Server side and on-demand
- 27.
- 28.
- 29.
Editor's Notes
- #10 Controllers ask for Data & prime models Models dispatch events handled by views Views dispatch events handled by other views Dispatched events causing cycle reaction
- #20 Actions originate from user interactions with the views Actions call into the dispatcher. Data to be changed is the payload of an action The dispatcher then invokes the callbacks that the stores have registered with it, effectively dispatching the data payload contained in the actions to all stores. The stores then emit a "change" event to alert the controller-views that a change to the data layer has occurred
- #26 Optimistic updates - Maintaining previous state Rollbacks Call to the community to help address Transitional Stores Error Reporting and Metric collection