Building large scalable mission critical business applications on the web
-
Upload
maurice-beijer -
Category
Technology
-
view
331 -
download
0
Transcript of Building large scalable mission critical business applications on the web
![Page 1: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/1.jpg)
Building large scalable mission critical business applications on the web
Maurice de Beijer@mauricedb
![Page 2: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/2.jpg)
2
Safety in hard to reach places
![Page 3: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/3.jpg)
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: [email protected]
![Page 4: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/4.jpg)
Overview
• HTTP and Ajax requests• Scaling out• Programming language and code quality• Webpack• Error logging and collection• Dates and times
![Page 5: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/5.jpg)
HTTP is hard
![Page 6: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/6.jpg)
Swagger for HTTP contracts
![Page 7: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/7.jpg)
Chaos Monkey
• Http request have a tendency of failing• Simulate this behavior when developing
![Page 8: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/8.jpg)
Retry on errors
• Retry requests that fail• After a brief pause
![Page 9: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/9.jpg)
HTTP Caching is hard
• Caching static data can help performance– But cache invalidation is hard
• Use the HTTP vary header– Accept header– Authorization header
![Page 10: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/10.jpg)
Scaling out
![Page 11: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/11.jpg)
Scaling out is hard
• When going to the second server– But easy going from the second to the third
![Page 12: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/12.jpg)
Chaos Monkey
• Middleware to randomly route all requests to a different server when developing
![Page 13: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/13.jpg)
WritingCode
![Page 14: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/14.jpg)
TypeScript
• Or use another type checker like Flow
![Page 15: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/15.jpg)
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
![Page 16: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/16.jpg)
Webpack
![Page 17: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/17.jpg)
Webpack CommonsChunkPlugin
• Build shared library bundles just once– Using DllPlugin& DllReferencePlugin– Better performance then using the
CommonsChunkPlugin
![Page 18: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/18.jpg)
HappyPack
• Speed up Webpack builds– Use Awesome Typescript Loader for TypeScript
![Page 19: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/19.jpg)
Error logging
• Errors will happen• Don’t assume you are online
![Page 20: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/20.jpg)
Errors in React components
![Page 21: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/21.jpg)
Display with redbox-react
![Page 22: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/22.jpg)
Dates and times
• Working with date and time is hard– Specially when objects are moving– Having to coordinate across multiple time zones
![Page 23: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/23.jpg)
Moment.js
• The best library for working with dates• Use Moment Timezone to convert to
individual timezones
![Page 24: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/24.jpg)
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
![Page 25: Building large scalable mission critical business applications on the web](https://reader036.fdocuments.in/reader036/viewer/2022062503/587b42231a28ab9c0e8b5e85/html5/thumbnails/25.jpg)
Thank you
Maurice de Beijer - @mauricedb