This document discusses Yahoo's use of isomorphic React and Flux to build web applications. It begins with background on the presenter and an overview of isomorphic web applications. The document then covers React, Flux, and building an isomorphic version by running Flux on the server. Key challenges discussed are handling server-only libraries, including CSS for dynamic modules, and transferring state between server and client. Links are provided to examples of Yahoo's implementation and approaches to CSS. The presentation concludes with time for questions.

1. Isomorphic React+Flux at
Yahoo
Mr. Friday

2. About me
● MMDays (2007~)
● Yahoo TW (2010)
● Yahoo US (2011~)
○ Frontpage
○ News
○ MyYahoo
○ ...

3. Agenda
● Isomorphic
● React + Flux
● Isomorphic Flux
● Challenges
● Q&A

4. Isomorphic Web

5. Client side Single Page Application
● Benefits: Fast, richer user experiences
● Drawbacks:
○ SEO
○ Potential double work
○ Performance
○ Legacy browsers

6. Examples
● No page reload
● Same URL, different
experiences after reload
● Any way to reuse the code ?

10. Yahoo had tried it ...
● “First open source isomorphic framework to
get any press” - Airbnb
● Lesson learned:
○ Server side YUI was too heavy
○ Sync Server/Client state and routing was hard
○ YUI format is problematic in Node

11. React JS
● Finite state
machine
● Re-render
everytime
● Virtual DOM to
save perf.

12. Flux
● Uni-directional data flow

13. Isomorphic + React + Flux ?
● Plain javascript to run efficiently on both
server and client
● State transferring between server/client is
easy
● Challenge: Flux is client side only.

14. Server side Flux

15. Implementation details
https://speakerdeck.com/mridgway/isomorphic-
flux starting slide 26
https://github.com/yahoo/flux-examples

16. Challenges - Server-only Libs
● Every code needs to run on server/client.
Need a way to handle server side only
libraries.
○ Create a service that only runs on server side
○ Move them to APIs
○ Apache traffic server

17. CSS Challenges
● Dynamic modules brings additonal CSS
challenges
● Webpack is not good at including CSS
● In tradition, we use CSS combo tool. Now
we either need to reimplement it in react
environment, or find something else.

18. CSS: How facebook did it
https://speakerdeck.com/vjeux/react-css-in-js

19. CSS: How Yahoo did it
http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/

20. Holy Grail

21. Q&A
● questions ?

22. Thank you !