Scaling React.js Applications (short version)

48619fc17b3ab68472aebd56c0106278?s=47 Max Stoiber
September 16, 2016

Scaling React.js Applications (short version)

25 minute super-speed introduction to scaling react applications!

48619fc17b3ab68472aebd56c0106278?s=128

Max Stoiber

September 16, 2016
Tweet

Transcript

  1. 2.
  2. 5.
  3. 6.
  4. 14.

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

    containers # $"" NavBar.js !"" constants # $"" NavBarConstants.js !"" components # $"" App.js $"" reducers $"" NavBarReducer.js
  5. 16.

    @mxstbr react-app-by-feature !"" css !"" containers # $"" NavBar #

    !"" NavBar.js # !"" actions.js # !"" constants.js # $"" reducer.js $"" components $"" App.js
  6. 23.

    @mxstbr .header { /* … */ } .title { background-color:

    yellow; } .footer { /* … */ } .title { border-color: blue; } Conflict! Naming
  7. 26.

    @mxstbr .footer { /* … */ } .title { /*

    … */ } .MyApp__footer__1co1k { /* … */ } .MyApp__title__2fgr5s { /* … */ }
  8. 27.

    @mxstbr .header { line-height: 1.5em; } a { line-height: 1.5em;

    } .title { line-height: 1.5em; } Inheritance
  9. 28.

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

    } Inheritance .footer { line-height: 1em; } .title { line-height: 1em; } Conflict!
  10. 33.

    @mxstbr react-app-by-feature !"" containers # $"" NavBar # !"" NavBar.js

    # !"" actions.js # !"" constants.js # !"" styles.css # $"" reducer.js $"" components $"" App.js
  11. 38.

    @mxstbr function fetchData() { return (dispatch) => { dispatch(dataFetching()); fetch(‘myapi.com/‘,

    (data) => { // TODO: Error handling dispatch(dataFetched(data)); }); } }
  12. 40.

    @mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());

    const data = yield call(fetch(‘myapi.com/'); put(dataFetched(data)); } }
  13. 41.

    @mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());

    const data = yield call(fetch(‘myapi.com/'); put(dataFetched(data)); } }
  14. 42.

    @mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());

    const data = yield call(fetch(‘myapi.com/'); put(dataFetched(data)); } }
  15. 43.

    @mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());

    const data = yield call(fetch(‘myapi.com/'); put(dataFetched(data)); } }
  16. 44.

    @mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());

    const data = yield call(fetch(‘myapi.com/'); put(dataFetched(data)); } }
  17. 45.

    @mxstbr function* fetchData() { while (true) { yield take(FETCH_DATA); put(dataFetching());

    const data = yield call(fetch(‘myapi.com/'); // TODO: Error handling put(dataFetched(data)); } }
  18. 49.

    @mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());

    yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
  19. 50.

    @mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());

    yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
  20. 51.

    @mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());

    yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
  21. 52.

    @mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());

    yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
  22. 53.

    @mxstbr function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer());

    yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); } }
  23. 55.

    @mxstbr 2. Group files by feature 3. Isolate Styling 1.

    Containers and Components 4. Use redux-saga
  24. 57.
  25. 58.
  26. 59.
  27. 60.
  28. 61.
  29. 63.
  30. 69.

    @mxstbr import { fromJS } from ‘immutable’; const state =

    fromJS({ “username”: “@mxstbr” });
  31. 72.
  32. 73.