React in production
Download as PPTX, PDF1 like284 views
In the talk we have covered how to manage React application in production, we focused on Webpack, caching, client side logs, error handling, NPM dependencies.
![WebPack
Adding cache busting
output: {
path: __dirname + '/dist',
filename: 'bundle-[hash].js'
}](https://image.slidesharecdn.com/production-flow-170913130808/85/React-in-production-10-320.jpg)
![[English][Test Girls] Zero to Hero: Start Test automation with Cypress](https://cdn.slidesharecdn.com/ss_thumbnails/entestgirlstestingwithcypress-191024022807-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to React in production (20)
Ad
More from Michael Haberman (15)
Ad
Recently uploaded (20)
React in production
- 1. REACT IN PRODUCTION MICHAEL HABERMAN INDEPENDENT CONSULTANT
- 2. Your code is Awesome Your code has deployed What happen when users consume it?
- 3. Production issues A lot of browsers and operation systems User don’t follow the QA’a scenarios Extensions in browsers
- 4. Today’s Task Bundling your code (webpack) Runtime errors Deploying your code Review pitfalls and manage them
- 5. First nightmare /index.html (get 200) Backend Deploy new version /index.html (get 304)
- 6. Requesting web app HTTP GET requests are cached by the browser Caching is the worst nightmare could have no solution but time
- 9. Cache busting E-tag & max-age could result inconsistent deployment Lets assume index.html isn't cached Cache busting: <script src=“bundle.js?version=47/> <script src=“bundle.fi2u3ry.js>
- 10. WebPack Adding cache busting output: { path: __dirname + '/dist', filename: 'bundle-[hash].js' }
- 11. Cache busting Our bundle file has hashed name How index.html will get the right name? assets-webpack-plugin Inject to HTML
- 13. First nightmare /index.html (get 200) Backend Deploy new version /index.html (get 200)
- 14. Webpack in production Tip with webpack Disable dev-tools - improve performance Reduce size
- 15. Webpack in production Specify environment new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } })
- 16. Webpack in production Check if you on production mode:
- 17. Webpack in production Reduce even more Dynamic reduce (runtime) You serving server could do that Zip in build time (with webpack) use compression-webpack-plugin
- 18. Today’s Task Bundling the app (webpack) Runtime errors Deploying your app
- 19. Our second nightmare You got the app with the correct version Now it is running But wait….
- 21. Handling error Console is local Getting reports on error Use some tool (sentry, rollbar)
- 23. Our second nightmare Sentry will provide your callstack. What will happen to the callstack once minified?
- 24. Our second nightmare Source Maps debug: false, devtool: 'source-map',
- 25. Our second nightmare You have major bug, source map are useless How do you reproduce? Log user action Store logging
- 26. Our second nightmare Most React apps work with some store You could log its changes LogRocket
- 27. Today’s Task Bundling the app (webpack) Runtime errors Deploying your app
- 28. Our third nightmare You deployed a version to QA QA said you are a “bug-less” developer The code shipped to prod And boom…. so close :-(
- 29. Our third nightmare Package.json specify dependencies It also specify versions “package_name”:”*” “package_name”:”^1.6.3” “package_name”:”~1.6.3” “package_name”:”1.6.x” X.Y.Z Breaking change New feature Bug fix
- 30. Our third nightmare Don’t reinstall - use the same artifact / image Harden your package.json versions
- 31. Today’s Task Bundling the app (webpack) Runtime errors Deploying your app
Editor's Notes
- #2: Rich experience with react in production
- #4: Let’s see what we are going to do with all of this headache
- #5: Any guess what would be the first pitfall to production? (caching)
- #6: 200 -> deployment ->304
- #7: Why caching is the worst?
- #8: Client save local version
- #9: Client uses the local version
- #10: Browser is caching by url, if you change it.
- #11: hash is long, you could use [hash:8]
- #12: We talked too much, lets see some code
- #14: Now: 200 -> deploy -> 200
- #15: React provide a lot of warnings -> checks that cost in performance Size is larger in dev mode
- #16: Next: how to know if you are on prod?
- #17: Can we reduce the app even more?
- #18: Dynamic cost in runtime
- #19: Any guess what would be the first pitfall to production? (caching)
- #20: Finished with caching and building, now actual coding!
- #22: Lets integrate a tool