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.
Building large scalable mission
critical business applications on the
web
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: @maur...
Overview
• HTTP and Ajax requests
• Scaling out
• Programming language and code quality
• Webpack
• Error logging and coll...
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 heade...
Scaling out
Scaling out is hard
• When going to the second server
– But easy going from the second to the third
Chaos Monkey
• Middleware to randomly route all requests to
a different server when developing
Writing
Code
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...
Webpack
Webpack CommonsChunkPlugin
• Build shared library bundles just once
– Using DllPlugin& DllReferencePlugin
– Better perform...
HappyPack
• 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
Dates and times
• Working with date and time is hard
– Specially when objects are moving
– Having to coordinate across mul...
Moment.js
• The best library for working with dates
• Use Moment Timezone to convert to
individual timezones
Conclusion
• HTTP and Ajax requests can be unreliable
– Specially on remote and mobile connections
• Scaling out
– Isn’t h...
Thank you
Maurice de Beijer - @mauricedb
Upcoming SlideShare
Loading in …5
×

Building large scalable mission critical business applications on the web

457 views

Published on

Building large scalable mission critical business applications on the web presentaion for React Remote Conf 2016

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building large scalable mission critical business applications on the web

  1. 1. Building large scalable mission critical business applications on the web 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 • Dates and times
  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 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. Webpack CommonsChunkPlugin • Build shared library bundles just once – Using DllPlugin& DllReferencePlugin – Better performance then using the CommonsChunkPlugin
  18. 18. HappyPack • 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. Dates and times • Working with date and time is hard – Specially when objects are moving – Having to coordinate across multiple time zones
  23. 23. Moment.js • The best library for working with dates • Use Moment Timezone to convert to individual timezones
  24. 24. 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 • Dates and times – Can be very tricky – Use moments.js for time zone conversions and formatting
  25. 25. Thank you Maurice de Beijer - @mauricedb

×