Supporting large scale React applications

Supporting large scale React applications

• 1.
  Supporting large scaleReact apps Maurice de Beijer @mauricedb
• 2.
  Safety in hardto 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 andAjax requests • Scaling out • Programming language and code quality • Webpack • Error logging and collection
• 5.
  HTTP is hard
• 6.
  Swagger for HTTPcontracts
• 7.
  Chaos Monkey • Httprequest 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 ishard • 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 ishard • When going to the second web server – But easy going from the second to the third
• 12.
  Chaos Monkey • Middlewareto randomly route all requests to a different server when developing
• 13.
  Writing Code
• 14.
  TypeScript • Or useanother 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 • Errorswill happen • Don’t assume you are online
• 20.
  Errors in Reactcomponents
• 21.
  Display with redbox-react
• 22.
  Conclusion • HTTP andAjax 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 deBeijer - @mauricedb