yahoo mail moving to react
DESCRIPTION
Yahoo React meetupTRANSCRIPT
Bu i l d ing Yahoo Ma i l ove r t he yea rs
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⎪
I want to share …
History of Mail Moving to the React way The optimistic update use case
A little bit of history …
1999First gen
C++, HTML
Ajax for world peace ?
2004Oddpost
Java, Python, JS
2008ClassicPHP, JS
2010The One
PHP, YUI, JS
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
Model View Controller
Mail Storage
Model
Controller
View Model
Controller
View
PH
P L
au
nch
YU
I Wo
rkspa
ce
Network Proxy
Server Client
Interesting Moments
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
Folder View
List View Message View
Controller
Message View
Model
Delete Message
Event Handlermsg:remove
Model
Folder View
Controller
fld:change
List View
Controller
Model
XHR Request
Web Service
SuccessRequest
Evolving for the future
2015Next 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 components
React + Flux
Message ViewMSG_REMOVE
Action Creator
Folder View
List View
Message Store Folder Store
emit-change
emit-change
emit-change
Dispatcher
callbacks
Optimistic Updates
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
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
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, Actions or stores Testing components Style and Lint checks on JSX Build versioning and bundling
› Server side and on-demand
Yahoo is contributing back
dispatchrroutr
flux-router-component
@mridgwaygithub.com/yahoo/
See you soon !