Supporting large scale React apps

Maurice de Beijer@mauricedb

Safety in hard to reach places

2

Who am I?

• Maurice de Beijer

• The Problem Solver

• Microsoft Azure MVP

• Freelance developer/instructor

• Twitter: @mauricedb and @React_Tutorial

• Web: http://www.TheProblemSolver.nl

• E-mail: maurice.de.beijer@gmail.com

3

Overview

• HTTP and Ajax requests

• Scaling out

• Programming language and code quality

• Webpack

• Error logging and collection

HTTP is hard

Swagger for HTTP contracts

Chaos Monkey

• Http request have a tendency of failing

• Simulate this behavior when developing

Retry on errors

• Retry requests that fail

• After a brief pause

HTTP Caching is hard

• Caching static data can help performance

– But cache invalidation is hard

• Use the HTTP vary header

– Accept header

– Authorization header

Scaling out

Scaling out is hard

• When going to the second web server

– But easy going from the second to the third

Chaos Monkey

• Middleware to randomly route all requests to a different server when developing

WritingCode

TypeScript

• Or use another type checker like Flow

ESLint & TSLint

• Use ESLint and/or TSLint

• Use eslint-plugin-react for React code

• Airbnb publish a great configuration

– The eslint-config-airbnb NPM package

Webpack

Avoid the CommonsChunkPlugin

• Build shared library bundles just once

– Using DllPlugin& DllReferencePlugin

– Better performance then using the CommonsChunkPlugin

Use HappyPack caching

• Speed up Webpack builds

– Use Awesome Typescript Loader for TypeScript

Error logging

• Errors will happen

• Don’t assume you are online

Errors in React components

Display with redbox-react

Conclusion

• HTTP and Ajax requests can be unreliable– Specially on remote and mobile connections

• Scaling out– Isn’t hard if you do so from day one

• Programming language and code quality– JavaScript and JSX is fine for small projects– Big projects need more help

• Webpack is awesome– But rebuild times add up with a large codebase

• Error logging and collection– Error will happen– Make sure you know about them

Thank you

Maurice de Beijer - @mauricedb