Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React+Redux @ Scale
Search
Daniel Cousineau
June 26, 2017
Programming
1
310
React+Redux @ Scale
Given at QCon NYC 2017
https://qconnewyork.com/ny2017/presentation/reactredux-scale-talk
Daniel Cousineau
June 26, 2017
Tweet
Share
More Decks by Daniel Cousineau
See All by Daniel Cousineau
Time is a Social Construct
dcousineau
1
530
React @ Scale
dcousineau
0
150
Frontend Performance & You
dcousineau
0
260
Feature Flags & You
dcousineau
2
88
Reframing The Problem - DCJS July 2016
dcousineau
0
120
YAFT
dcousineau
2
150
Queues and the beanstalkd
dcousineau
1
640
How Not Writing PHP Makes You Better At PHP
dcousineau
0
370
JavaScript for PHP Developers
dcousineau
4
680
Other Decks in Programming
See All in Programming
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
260
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
280
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
620
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
960
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.5k
インターフェース設計のコツとツボ
togishima
2
490
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
がんばりすぎないコーディングルール運用術
tsukakei
1
180
イベントストーミングから始めるドメイン駆動設計
jgeem
3
430
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Cult of Friendly URLs
andyhume
78
6.4k
Bash Introduction
62gerente
614
210k
Statistics for Hackers
jakevdp
799
220k
Speed Design
sergeychernyshev
30
970
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Invisible Side of Design
smashingmag
299
50k
Code Reviewing Like a Champion
maltzj
523
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Raft: Consensus for Rubyists
vanstee
137
7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
A Tale of Four Properties
chriscoyier
159
23k
Transcript
React+Redux @ Scale
@dcousineau
None
None
None
None
Rules
None
“Rules”
None
None
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
Part 1: React
Rule: Components should be stateless
Reality: State is the enemy, but also inevitable
onClick(e) { const value = e.target.value; const formatted = value.toUpperCase();
this.setState({value: formatted}); }
onClick() { this.setState((previousState, currentProps) => { return { show: !previousState.show,
}; }); }
onClick(e) { this.setState({value: e.target.value}); this.props.onChange(this.state.value); }
onClick(e) { this.setState({value: e.target.value}, () => { this.props.onChange(this.state.value); }); }
Rule: Don’t use Context, it hides complexity
Reality: Sometimes complexity should be hidden
None
None
class TextCard extends React.Component { static contextTypes = { metatypes:
React.PropTypes.object, }; render() { const {cardData} = this.props; const {metatypes} = this.context; return ( <div> The following is either editable or displayed: <metatypes.text value={cardData.text} onChange={this.props.onChange} /> </div> ) } } function selectCardComponent(cardData) { switch (cardData.type) { case 'text': return TextCard; default: throw new Error(`Invalid card type ${cardData.type}`); } }
class TextCard extends React.Component { static contextTypes = { metatypes:
React.PropTypes.object, }; render() { const {cardData} = this.props; const {metatypes} = this.context; return ( <div> The following is either editable or displayed: <metatypes.text value={cardData.text} onChange={this.props.onChange} /> </div> ) } } function selectCardComponent(cardData) { switch (cardData.type) { case 'text': return TextCard; default: throw new Error(`Invalid card type ${cardData.type}`); } }
const metatypesEdit = { text: class extends React.Component { render()
{ return <input type="text" {...this.props} />; } } } const metatypesView = { text: class extends React.Component { render() { return <span>{this.props.value}</span>; } } }
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 <CardComponent cardData={cardData} /> } }
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 <CardComponent cardData={cardData} /> } }
Part 2: Redux
Rule: “Single source of truth” means all state in the
store
Reality: You can have multiple “single sources”
this.state.checked = true;
this.props.checked = true; this.props.checked = true; this.props.checked = true; this.state.checked
= true;
this.props.checked = true; this.props.checked = true; this.props.checked = true; this.props.checked
= true; checked: true connect()();
window.location.*
Rule: Side effects should happen outside the Redux cycle
Reality: This doesn’t mean you can’t have callbacks
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())); } }
class ViewPostPage extends React.Component { componentWillMount() { const {dispatch, postId}
= this.props; dispatch(fetchPostAction(postId, () => this.logPageLoadComplete())); } }
Rule: Redux stores must be normalized for performance
Reality: You must normalize to reduce complexity
https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5
{ byId: { ...entities }, keyWindows: [`${keyWindowName}`], [keyWindowName]: { ids:
['id0', ..., 'idN'], ...meta } }
{ 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 } }
function selectUserById(store, userId) { return store.users.byId[userId]; } function selectUsersByKeyWindow(store, keyWindow)
{ return store.users[keyWindow].ids.map(userId => selectUserById(store, userId)); }
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 }; }
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 } }; } }
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 } }; } }
function selectUsersAreFetching(store, keyWindow) { return !!store.users[keyWindow].isFetching; } function selectManagersAreFetching(store) {
return selectUsersAreFetching(store, 'allManagers'); }
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 } }; } }
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 } }; } }
function selectUserById(store, userId) { return store.users.draftsById[userId] || store.users.byId[userId]; }
function reducer(state = defaultState, action) { switch(action.type) { case UNDO_UPDATE_USER:
return { ...state, draftsById: { ...omit(state.draftsById, action.user.id), } }; } }
Part 3: Scale
Rule: Keep dependencies low to keep the application fast
Reality: Use bundling to increase PERCEIVED performance
class Routes extends React.Component { render() { return ( <Switch>
<Route exact path="/" component={require(‘../home').default} /> <Route path="/admin" component={lazy(require(‘bundle-loader?lazy&name=admin!../admin’))} /> <Route component={PageNotFound} /> </Switch> ); } }
require('bundle-loader?lazy&name=admin!../admin’)
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 <Component {...this.props} />; } else { return <div>Is Loading!</div>; } } };
None
Rule: Render up-to-date data
Reality: If you got something render it, update it later
None
None
None
None
None
None
Epilog: Scale?
Rule: Scale is bytes served, users concurrent
Reality: Scale is responding to bytes served and users concurrent
How fast can you deploy?
None
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
<Feature name="new-feature" fallback={<OldFeatureComponent />}> <NewFeatureComponent /> </Feature>
None
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
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
Can you optimize your directory structure around team responsibilities? If
teams are organized by “product domain”, Can you organize code around product domain?
Final Thoughts
Strict rules rarely 100% apply to your application. Remembering the
purpose behind the rules is valuable.
Code behavior should be predictable and intuitable. Be realistic about
the problem you’re actually solving.
You will not get it perfect the first time. Optimize
your processes for refactoring.
Questions?