Yahoo Mail moving to React
•Download as PPTX, PDF•
122 likes•112,646 views
Yahoo React meetup
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Yahoo Mail moving to React
Similar to Yahoo Mail moving to React (20)
More from Subramanyan Murali
More from Subramanyan Murali (18)
Recently uploaded
Recently uploaded (20)
Yahoo Mail moving to React
- 1. Building Yahoo Mail over 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 to share … History of Mail Moving to the React way The optimistic update use case
- 4. A little bit of history …
- 5. 1999 First gen C++, HTML Ajax for world peace ? 2004 Oddpost Java, Python, JS 2008 Classic PHP, JS 2010 The One PHP, YUI, JS
- 6. Modern Mail PHP, Apache on server YUI on the client First byte flush using big pipe Shared templates between client and server C grade to A grade browser support
- 8. Mail Storage Model Controller View Model Controller View PHPLaunch YUIWorkspace Network Proxy Server Client
- 10. Events Controllers ask for Data & prime models Models dispatch events handled by views Views dispatch events handled by other views Dispatched events causing cycle reaction
- 11. Folder View List View Message View
- 12. Controller Message View Model Delete Message Event Handler msg:remove Model Folder View Controller fld:change List View Controller Model XHR Request Web Service Success Request
- 14. Evolving for the future
- 15. 2015 Next gen NodeJS, React + Flux, MicroJS
- 16. “ The Age of large platform libraries is over ”
- 17. What we wanted Predictable flow ~ Easy Debugging Modernize the code base Isomorphic application Independently deployable components
- 18. React + Flux
- 19. Message View MSG_REMOVE Action Creator Folder View List View Message Store Folder Store emit-change emit-change emit-change Dispatcher callbacks
- 21. Folder View List View Message View 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 Message View 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 Byte Flush Record and Replay actions
- 25. Community can help !
- 26. We need to solve … 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. Yahoo is contributing back
- 29. See you soon !
Editor's Notes
- Controllers ask for Data & prime models Models dispatch events handled by views Views dispatch events handled by other views Dispatched events causing cycle reaction
- 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
- Optimistic updates - Maintaining previous state Rollbacks Call to the community to help address Transitional Stores Error Reporting and Metric collection