Isomorphic React+Flux at YahooMr. Friday

About me

● MMDays (2007~)● Yahoo TW (2010)● Yahoo US (2011~)

○ Frontpage○ News○ MyYahoo○ ...

Agenda

● Isomorphic● React + Flux● Isomorphic Flux● Challenges● Q&A

Isomorphic Web

Client side Single Page Application

● Benefits: Fast, richer user experiences● Drawbacks:

○ SEO○ Potential double work○ Performance○ Legacy browsers

Examples

● No page reload

● Same URL, different experiences after reload

● Any way to reuse the code ?

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

React JS

● Finite state machine

● Re-render everytime

● Virtual DOM to save perf.

Flux

● Uni-directional data flow

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.

Server side Flux

Implementation details

https://speakerdeck.com/mridgway/isomorphic-flux starting slide 26

https://github.com/yahoo/flux-examples

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

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.

CSS: How facebook did it

https://speakerdeck.com/vjeux/react-css-in-js

CSS: How Yahoo did it

http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/

Holy Grail

Q&A

● questions ?

Thank you !