Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Supporting large scale React applications

536 views

Published on

Slides from the React-Amsterdam Meetup.

Published in: Technology
  • Be the first to comment

Supporting large scale React applications

  1. 1. Supporting large scale React apps Maurice de Beijer @mauricedb
  2. 2. Safety in hard to reach places 2
  3. 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. 4. Overview • HTTP and Ajax requests • Scaling out • Programming language and code quality • Webpack • Error logging and collection
  5. 5. HTTP is hard
  6. 6. Swagger for HTTP contracts
  7. 7. Chaos Monkey • Http request have a tendency of failing • Simulate this behavior when developing
  8. 8. Retry on errors • Retry requests that fail • After a brief pause
  9. 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. 10. Scaling out
  11. 11. Scaling out is hard • When going to the second web server – But easy going from the second to the third
  12. 12. Chaos Monkey • Middleware to randomly route all requests to a different server when developing
  13. 13. Writing Code
  14. 14. TypeScript • Or use another type checker like Flow
  15. 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. 16. Webpack
  17. 17. Avoid the CommonsChunkPlugin • Build shared library bundles just once – Using DllPlugin& DllReferencePlugin – Better performance then using the CommonsChunkPlugin
  18. 18. Use HappyPack caching • Speed up Webpack builds – Use Awesome Typescript Loader for TypeScript
  19. 19. Error logging • Errors will happen • Don’t assume you are online
  20. 20. Errors in React components
  21. 21. Display with redbox-react
  22. 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. 23. Thank you Maurice de Beijer - @mauricedb

×