Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Subramanyan Murali
Engineering Manager, Yahoo Mail
subram@yahoo-inc.com
@rmsguhan
I want to share …
 History of Mail
 Moving to the React way
 The optimistic update use case
A little bit of history …
1999
First gen
C++, HTML
Ajax for world
peace ?
2004
Oddpost
Java, Python, JS
2008
Classic
PHP, JS
2010
The One
PHP, YUI, ...
Modern Mail
PHP, Apache on server
YUI on the client
First byte flush using big pipe
Shared templates between client and se...
Model View Controller
Mail Storage
Model
Controller
View Model
Controller
View
PHPLaunch
YUIWorkspace
Network
Proxy
Server Client
Interesting Moments
Events
Controllers ask for Data & prime models
Models dispatch events handled by views
Views dispatch events handled by ot...
Folder
View
List View Message View
Controller
Message View
Model
Delete Message
Event Handler
msg:remove
Model
Folder View
Controller
fld:change
List View
Co...
Evolving for the future
2015
Next gen
NodeJS, React + Flux,
MicroJS
“ The Age of large platform libraries
is over ”
What we wanted
Predictable flow ~ Easy Debugging
Modernize the code base
Isomorphic application
Independently deployable c...
React + Flux
Message View
MSG_REMOVE
Action
Creator
Folder View
List View
Message Store Folder Store
emit-change
emit-change
emit-chang...
Optimistic Updates
Folder View
List View
Message View MSG_REMOVE
Action
Creator
Message Store Folder Store
emit-change
emit-change
emit-chang...
Folder View
List View
Message View MSG_REMOVE
Action
Creator
Message Store Folder Store
emit-change
emit-change
emit-chang...
Transactional Stores
First Byte Flush
Record and Replay actions
Community can help !
We need to solve …
 First Byte Flush for Flux applications
 Debugging
 Transactional Stores
 XHR Responsibility, Actio...
Yahoo is contributing back
dispatchr
routr
flux-router-component
@mridgway
github.com/yahoo/
See you soon !
Yahoo Mail moving to React
Yahoo Mail moving to React
Upcoming SlideShare
Loading in …5
×

Yahoo Mail moving to React

108,271 views

Published on

Yahoo React meetup

Published in: Technology

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 !

×