Lean React - Patterns for High Performance [ploneconf2017]

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Lean React -
Patterns for High Performance
Devon Bernard
VP of Engineering @ Enlitic

What if all websites had
airplane mode

ReactJS

Why?
1. Increases developer productivity
• Separation of concerns between state and DOM
• More modular and isolates busine...

React + Redux Lifecycle

Redux

Persisting State
Why
• Smoother UX
• Less network requests
How
• Redux store is only in-memory, disappears on page refresh...

Persisting State (2)
export const saveState = (state) => {
try {
const serializedState = JSON.stringify(state);
localStora...

Persisting State (3)
import { loadState, saveState } from './localStorage';
// import throttle from 'lodash/throttle';
con...

const libraries = [
{
id: 1,
city: 'New York'
},
{
id: 2,
city: 'San Francisco'
}
];

const libraries = [
{
id: 1, city: 'New York',
books: [
{
id: 1, title: 'Moby Dick',
author: 'Herman Melville'
}, {
id: 2,...

const libraries = [
{
id: 1, city: 'New York',
books: [
{
id: 1, title: 'Moby Dick',
author: {name: 'Herman Melville’, ......

const libraries = [
{
id:1, city: 'New York',
books: [1, 2]
}, {
id: 2, city: 'San Francisco',
books: [2,3]
}
];
const boo...

const libraries = {
1: { city: 'New York', books: [1,2] },
2: { city: 'San Francisco', books: [2,3] }
};
const books {
1: ...

Normalized State
Why
• Faster queries
• Less data redundancy
• More flexible entity access
• Easier to test & debug
How
1....

Normalized State (2)
https://github.com/paularmstrong/normalizr
{
”id": "123",
"author": {
"id": "1",
”name": "Paul"
},
"t...

Pure Reducers
Why
• Easier to debug
• Easier to test
How
• Cannot depend on hidden or external state
• Only use the passed...

Redux Dev Tools

Redux Dev tools (2)

Redux Dev tools (3)

Components

Data Heavy Pages

Data Heavy Pages
2-4 seconds later…
!

Data Heavy Pages
2-4 seconds later…
!

Why? Blockers.
class Dashboard extends Component {
render() {
const { stats } = this.props;
if (!stats) {
return null;
}
r...

Not Only Slow, But Dangerous Too
X

Not Only Slow, But Dangerous Too

Unblocking
class Dashboard extends Component {
render() {
const { stats } = this.props;
//if (!stats) {
// return null;
//...

…better

…better

…better

…better
X X

Component Skeletons

Component Skeletons (2)
class Dashboard extends Component {
render() {
const { stats } = this.props;
return (
<div>
<StatW...

Component Skeletons (3)
class StatWidget extends Component {
render() {
const { stats:info } = this.props;
return (
<div>
...

…best

…best

…best

…best

Component Lifecycle

shouldComponentUpdate?

Tracking Repaints

Chrome Render Tools

Chrome Render Tools (2)

$Method Binding ^^ Uncaught TypeError: Cannot read property 'setColor' of null class X extends Component { setupDrawing() ...$

Method Binding (2)
class X extends Component {
setupDrawing() {
this.setColor();
}
render() {
return (
<button
type="butto...

Method Binding (3)
class X extends Component {
setupDrawing = () => {
this.setColor();
}
render() {
return (
<button
type=...

Method Binding (4)
class X extends Component {
constructor(props) {
super(props);
this.setupDrawing = this.setupDrawing.bi...

Actions

$ActionTypes store.dispatch({ type: ”EDIT_TASK":, payload: {} }); actions.js reducers.js switch (action.type) { case ”EDIT_...$

ActionTypes (2)
const THUNK_TYPES = ['EDIT_TASK']; // network actions
const ACTION_TYPES = ['CLEAR_TASK']; // local action...

ActionTypes (3)
store.dispatch({
type: ActionTypes.tasks.edit,
payload: {}
});
actions.js
reducers.js
switch (action.type)...

0
1
2
3
start end
Thread
Time
Action Chains / Promises
Action A Action B Action C Action D Action E
Synchronous Actions

0
1
2
3
start end
Thread
Time
Action A
Action B
Action C
Fully Asynchronous Actions
Action Chains / Promises (2)

0
1
2
3
start end
Thread
Time
Partially Asynchronous Actions ( .all(), .any() )
Action Chains / Promises (3)
Action A
Acti...

store.getState()
What
Useful for exposing store state to any
part of your application
Why
We want to keep our reducers pu...

General

Environment Files
REACT_APP_API_HOST='https://staging.myapp.com'
REACT_APP_API_HOST='http://localhost:5000'
.env
.env.loca...

Route Wrappers
<Route path="/" component={Home} />
<Route path="/login" component={Login} />
<EnsureLoggedInContainer>
<Ro...

Route Wrappers
class EnsureLoggedInContainer extends Component {
componentDidMount() {
if (!this.props.session.userID) {
c...

Offline First – Web Workers
Javascript that runs in the background that can be used for hijacking network requests and cac...

Offline First – IndexedDB Promised
Like localStorage, but able to store larger volumes of data and has an asynchronous API...

Guess that utility!
• Get your entire team to use the same coding standard
• Prevent developers from shipping un-optimized...

ESLint
$ npm run lint
/ProjectsX/client/src/js/reducers/index.js
125:9 error Identifier 'some_random_var' is not in camel ...

ESLint (2)
https://eslint.org/docs/rules/no-unused-vars

ESLint
https://github.com/airbnb/javascript
$ npm install --save-dev eslint eslint-config-airbnb eslint-plugin-jsx-a11y es...

Devon Bernard
VP of Engineering @ Enlitic
" devon@enlitic.com
# @devonwbernard
Thank you!
Any questions?