Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Scaling React.js Applications

Scaling React.js Applications

Max Stoiber

July 04, 2016
Tweet

More Decks by Max Stoiber

Other Decks in Technology

Transcript

  1. @mxstbr react-app-by-type !"" css !"" actions # $"" NavBarActions.js !""

    containers # $"" NavBar.js !"" constants # $"" NavBarConstants.js !"" components # $"" App.js $"" reducers $"" NavBarReducer.js
  2. @mxstbr react-app-by-feature !"" css !"" containers # $"" NavBar #

    !"" NavBar.js # !"" actions.js # !"" constants.js # $"" reducer.js $"" components $"" App.js
  3. @mxstbr .header { /* … */ } .title { background-color:

    yellow; } .footer { /* … */ } .title { border-color: blue; } Conflict! Naming
  4. @mxstbr .footer { /* … */ } .title { /*

    … */ } .MyApp__footer__1co1k { /* … */ } .MyApp__title__2fgr5s { /* … */ }
  5. @mxstbr .header { line-height: 1.5em; } a { line-height: 1.5em;

    } .title { line-height: 1.5em; } Inheritance
  6. @mxstbr .header { line-height: 1.5em; } .title { line-height: 1.5em;

    } Inheritance .footer { line-height: 1em; } .title { line-height: 1em; } Conflict!
  7. @mxstbr react-app-by-feature !"" containers # $"" NavBar # !"" NavBar.js

    # !"" actions.js # !"" constants.js # !"" styles.css # $"" reducer.js $"" components $"" App.js
  8. @mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());

    yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
  9. @mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());

    yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
  10. @mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());

    yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
  11. @mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());

    yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
  12. @mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());

    yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
  13. @mxstbr 2. Group files by feature 3. Isolate Styling 1.

    Containers and Components 4. Use redux-saga
  14. @mxstbr import { fromJS } from ‘immutable’; const state =

    fromJS({ “username”: “@mxstbr” });