Tweet
Tweet

Slide 1

Slide 1 text

React+Redux @ Scale

Slide 2

Slide 2 text

@dcousineau

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Rules

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

“Rules”

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Scalability is the capability of a system, network, or process to handle a growing amount of work, or its potential to be enlarged to accommodate that growth. – Wikipedia

Slide 13

Slide 13 text

Part 1: React

Slide 14

Slide 14 text

Rule: Components should be stateless

Slide 15

Slide 15 text

Reality: State is the enemy, but also inevitable

Slide 16

Slide 16 text

onClick(e) { const value = e.target.value; const formatted = value.toUpperCase(); this.setState({value: formatted}); }

Slide 17

Slide 17 text

onClick() { this.setState((previousState, currentProps) => { return { show: !previousState.show, }; }); }

Slide 18

Slide 18 text

onClick(e) { this.setState({value: e.target.value}); this.props.onChange(this.state.value); }

Slide 19

Slide 19 text

onClick(e) { this.setState({value: e.target.value}, () => { this.props.onChange(this.state.value); }); }

Slide 20

Slide 20 text

Rule: Don’t use Context, it hides complexity

Slide 21

Slide 21 text

Reality: Sometimes complexity should be hidden

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

class TextCard extends React.Component { static contextTypes = { metatypes: React.PropTypes.object, }; render() { const {cardData} = this.props; const {metatypes} = this.context; return (
The following is either editable or displayed:
) } } function selectCardComponent(cardData) { switch (cardData.type) { case 'text': return TextCard; default: throw new Error(`Invalid card type ${cardData.type}`); } }

Slide 25

Slide 25 text

class TextCard extends React.Component { static contextTypes = { metatypes: React.PropTypes.object, }; render() { const {cardData} = this.props; const {metatypes} = this.context; return (
The following is either editable or displayed:
) } } function selectCardComponent(cardData) { switch (cardData.type) { case 'text': return TextCard; default: throw new Error(`Invalid card type ${cardData.type}`); } }

Slide 26

Slide 26 text

const metatypesEdit = { text: class extends React.Component { render() { return ; } } } const metatypesView = { text: class extends React.Component { render() { return {this.props.value}; } } }

Slide 27

Slide 27 text

class CardViewer extends React.Component { static childContextTypes = { metatypes: React.PropTypes.object }; getChildContext() { return {metatypes: metatypesView}; } render() { const {cardData} = this.props; const CardComponent = selectCardComponent(cardData); return } }

Slide 28

Slide 28 text

class CardEditor extends React.Component { static childContextTypes = { metatypes: React.PropTypes.object }; getChildContext() { return {metatypes: metatypesEdit}; } render() { const {cardData} = this.props; const CardComponent = selectCardComponent(cardData); return } }

Slide 29

Slide 29 text

Part 2: Redux

Slide 30

Slide 30 text

Rule: “Single source of truth” means all state in the store

Slide 31

Slide 31 text

Reality: You can have multiple “single sources”

Slide 32

Slide 32 text

this.state.checked = true;

Slide 33

Slide 33 text

this.props.checked = true; this.props.checked = true; this.props.checked = true; this.state.checked = true;

Slide 34

Slide 34 text

this.props.checked = true; this.props.checked = true; this.props.checked = true; this.props.checked = true; checked: true connect()();

Slide 35

Slide 35 text

window.location.*

Slide 36

Slide 36 text

Rule: Side effects should happen outside the Redux cycle

Slide 37

Slide 37 text

Reality: This doesn’t mean you can’t have callbacks

Slide 38

Slide 38 text

function persistPostAction(post, callback = () => {}) { return { type: 'PERSIST_POST', post, callback }; } function *fetchPostsSaga(action) { const status = yield putPostAPI(action.post); yield put(persistPostCompleteAction(status)); yield call(action.callback, status); } class ComposePost extends React.Component { onClickSubmit() { const {dispatch} = this.props; const {post} = this.state; dispatch(persistPostAction(post, () => this.displaySuccessBanner())); } }

Slide 39

Slide 39 text

class ViewPostPage extends React.Component { componentWillMount() { const {dispatch, postId} = this.props; dispatch(fetchPostAction(postId, () => this.logPageLoadComplete())); } }

Slide 40

Slide 40 text

Rule: Redux stores must be normalized for performance

Slide 41

Slide 41 text

Reality: You must normalize to reduce complexity

Slide 42

Slide 42 text

https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5

Slide 43

Slide 43 text

{ byId: { ...entities }, keyWindows: [`${keyWindowName}`], [keyWindowName]: { ids: ['id0', ..., 'idN'], ...meta } }

Slide 44

Slide 44 text

{ byId: { 'a': userA, 'b': userB, 'c': userC, 'd': userD }, keyWindows: ['browseUsers', 'allManagers'], browseUsers: { ids: ['a', 'b', 'c'], isFetching: false, page: 1, totalPages: 10, next: '/users?page=2', last: '/users?page=10' }, allManagers: { ids: ['d', 'a'], isFetching: false } }

Slide 45

Slide 45 text

function selectUserById(store, userId) { return store.users.byId[userId]; } function selectUsersByKeyWindow(store, keyWindow) { return store.users[keyWindow].ids.map(userId => selectUserById(store, userId)); }

Slide 46

Slide 46 text

function fetchUsers({query}, keyWindow) { return { type: FETCH_USERS, query, keyWindow }; } function fetchManagers() { return fetchUsers({query: {isManager: true}}, 'allManager'); } function receiveEntities(entities, keyWindow) { return { type: RECEIVE_ENTITIES, entities, keyWindow }; }

Slide 47

Slide 47 text

function reducer(state = defaultState, action) { switch(action.type) { case FETCH_USERS: return { ...state, keyWindows: uniq([...state.keyWindows, action.keyWindow]), [action.keyWindow]: { ...state[action.keyWindow], isFetching: true, query: action.query } }; case RECEIVE_ENTITIES: return { ...state, byId: { ...state.byId, ...action.entities.users.byId }, keyWindows: uniq([...state.keyWindows, action.keyWindow]), [action.keyWindow]: { ...state[action.keyWindow], isFetching: false, ids: action.entities.users.ids } }; } }

Slide 48

Slide 48 text

function reducer(state = defaultState, action) { switch(action.type) { case FETCH_USERS: return { ...state, keyWindows: uniq([...state.keyWindows, action.keyWindow]), [action.keyWindow]: { ...state[action.keyWindow], isFetching: true, query: action.query } }; case RECEIVE_ENTITIES: return { ...state, byId: { ...state.byId, ...action.entities.users.byId }, keyWindows: uniq([...state.keyWindows, action.keyWindow]), [action.keyWindow]: { ...state[action.keyWindow], isFetching: false, ids: action.entities.users.ids } }; } }

Slide 49

Slide 49 text

function selectUsersAreFetching(store, keyWindow) { return !!store.users[keyWindow].isFetching; } function selectManagersAreFetching(store) { return selectUsersAreFetching(store, 'allManagers'); }

Slide 50

Slide 50 text

function reducer(state = defaultState, action) { switch(action.type) { case UPDATE_USER: return { ...state, draftsById: { ...state.draftsById, [action.user.id]: action.user } }; case RECEIVE_ENTITIES: return { ...state, byId: { ...state.byId, ...action.entities.users.byId }, draftsById: { ...omit(state.draftsById, action.entities.users.byId) }, keyWindows: uniq([...state.keyWindows, action.keyWindow]), [action.keyWindow]: { ...state[action.keyWindow], isFetching: false, ids: action.entities.users.ids } }; } }

Slide 51

Slide 51 text

function reducer(state = defaultState, action) { switch(action.type) { case UPDATE_USER: return { ...state, draftsById: { ...state.draftsById, [action.user.id]: action.user } }; case RECEIVE_ENTITIES: return { ...state, byId: { ...state.byId, ...action.entities.users.byId }, draftsById: { ...omit(state.draftsById, action.entities.users.byId) }, keyWindows: uniq([...state.keyWindows, action.keyWindow]), [action.keyWindow]: { ...state[action.keyWindow], isFetching: false, ids: action.entities.users.ids } }; } }

Slide 52

Slide 52 text

function selectUserById(store, userId) { return store.users.draftsById[userId] || store.users.byId[userId]; }

Slide 53

Slide 53 text

function reducer(state = defaultState, action) { switch(action.type) { case UNDO_UPDATE_USER: return { ...state, draftsById: { ...omit(state.draftsById, action.user.id), } }; } }

Slide 54

Slide 54 text

Part 3: Scale

Slide 55

Slide 55 text

Rule: Keep dependencies low to keep the application fast

Slide 56

Slide 56 text

Reality: Use bundling to increase PERCEIVED performance

Slide 57

Slide 57 text

class Routes extends React.Component { render() { return ( ); } }

Slide 58

Slide 58 text

require('bundle-loader?lazy&name=admin!../admin’)

Slide 59

Slide 59 text

const lazy = loader => class extends React.Component { componentWillMount() { loader(mod => this.setState({ Component: mod.default ? mod.default : mod }) ); } render() { const { Component } = this.state; if (Component !== null) { return ; } else { return
Is Loading!
; } } };

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Rule: Render up-to-date data

Slide 62

Slide 62 text

Reality: If you got something render it, update it later

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Epilog: Scale?

Slide 70

Slide 70 text

Rule: Scale is bytes served, users concurrent

Slide 71

Slide 71 text

Reality: Scale is responding to bytes served and users concurrent

Slide 72

Slide 72 text

How fast can you deploy?

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Pre: Clear homebrew & yarn caches 1. Reinstall node & yarn via brew 2. Clone repo 3. Run yarn install 4. Run production build 1. Compile & Minify CSS 2. Compile Server via Babel 3. Compile, Minify, & Gzip via Webpack 190.64s ~3 min

Slide 75

Slide 75 text

}>

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Team 1 Team 2 Merge Feature A Merge Feature B Deploy Deploy OMG ROLLBACK DEPLOY!!! Merge Feature C Merge Bugfix for A Deploy Deploy BLOCKED!!! Deploy

Slide 78

Slide 78 text

Team 1 Team 2 Merge Feature A Merge Feature B Deploy Deploy Rollout Flag A Rollout Flag B OMG ROLLBACK FLAG A!!! Merge Feature C Deploy Merge Bugfix for A Deploy Rollout Flag A Rollout Flag C

Slide 79

Slide 79 text

Can you optimize your directory structure around team responsibilities? If teams are organized by “product domain”, Can you organize code around product domain?

Slide 80

Slide 80 text

Final Thoughts

Slide 81

Slide 81 text

Strict rules rarely 100% apply to your application. Remembering the purpose behind the rules is valuable.

Slide 82

Slide 82 text

Code behavior should be predictable and intuitable. Be realistic about the problem you’re actually solving.

Slide 83

Slide 83 text

You will not get it perfect the first time. Optimize your processes for refactoring.

Slide 84

Slide 84 text

Questions?