Slides from the React-Amsterdam Meetup.

1. Supporting large scale React apps
Maurice de Beijer
@mauricedb

2. Safety in hard to reach places
2

3. 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

4. Overview
• HTTP and Ajax requests
• Scaling out
• Programming language and code quality
• Webpack
• Error logging and collection

5. HTTP is hard

6. Swagger for HTTP contracts

7. Chaos Monkey
• Http request have a tendency of failing
• Simulate this behavior when developing

8. Retry on errors
• Retry requests that fail
• After a brief pause

9. HTTP Caching is hard
• Caching static data can help performance
– But cache invalidation is hard
• Use the HTTP vary header
– Accept header
– Authorization header

10. Scaling out

11. Scaling out is hard
• When going to the second web server
– But easy going from the second to the third

12. Chaos Monkey
• Middleware to randomly route all requests to
a different server when developing

13. Writing
Code

14. TypeScript
• Or use another type checker like Flow

15. 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

16. Webpack

17. Avoid the CommonsChunkPlugin
• Build shared library bundles just once
– Using DllPlugin& DllReferencePlugin
– Better performance then using the
CommonsChunkPlugin

18. Use HappyPack caching
• Speed up Webpack builds
– Use Awesome Typescript Loader for TypeScript

19. Error logging
• Errors will happen
• Don’t assume you are online

20. Errors in React components

21. Display with redbox-react

22. 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

23. Thank you
Maurice de Beijer - @mauricedb