Supporting large scale React apps Maurice de Beijer @mauricedb
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: [email protected]
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