Successfully reported this slideshow.
Your SlideShare is downloading. ×

Yahoo Mail moving to React

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
2310 b 17
2310 b 17
Loading in …3
×

Check these out next

1 of 29 Ad
Advertisement

More Related Content

Similar to Yahoo Mail moving to React (20)

More from Subramanyan Murali (18)

Advertisement

Recently uploaded (20)

Yahoo Mail moving to React

  1. 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. 2. Subramanyan Murali Engineering Manager, Yahoo Mail subram@yahoo-inc.com @rmsguhan
  3. 3. I want to share …  History of Mail  Moving to the React way  The optimistic update use case
  4. 4. A little bit of history …
  5. 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. 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
  7. 7. Model View Controller
  8. 8. Mail Storage Model Controller View Model Controller View PHPLaunch YUIWorkspace Network Proxy Server Client
  9. 9. Interesting Moments
  10. 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. 11. Folder View List View Message View
  12. 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
  13. 13. Evolving for the future
  14. 14. 2015 Next gen NodeJS, React + Flux, MicroJS
  15. 15. “ The Age of large platform libraries is over ”
  16. 16. What we wanted Predictable flow ~ Easy Debugging Modernize the code base Isomorphic application Independently deployable components
  17. 17. React + Flux
  18. 18. Message View MSG_REMOVE Action Creator Folder View List View Message Store Folder Store emit-change emit-change emit-change Dispatcher callbacks
  19. 19. Optimistic Updates
  20. 20. 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
  21. 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_FAIL XHR Failure
  22. 22. Transactional Stores First Byte Flush Record and Replay actions
  23. 23. Community can help !
  24. 24. 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
  25. 25. Yahoo is contributing back
  26. 26. dispatchr routr flux-router-component @mridgway github.com/yahoo/
  27. 27. 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

×