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
Transcript
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
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
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
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
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
Views
Actions
Embeds 2,980
Report content
Models dispatch events handled by views
Views dispatch events handled by other views
Dispatched events causing cycle reaction
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
- Maintaining previous state
Rollbacks
Call to the community to help address
Transitional Stores
Error Reporting and Metric collection