Download as PDF, PPTX
Uploaded byMichael Haberman
Javascript issues and tools in production for developers
1) Front-end code needs to be prepared for the varied environments and browsers that users will consume it in, as users can cause bugs and not follow test scenarios. 2) When issues arise, stories should be collected, reproduced, and fixes understood to prepare for the future. Error tracking and context logging are important. 3) Tools like Gulp and Grunt can be used to minify, concatenate, and version code for deployment to avoid caching issues and enable source maps for debugging minified code.
Javascript issues and tools in production for developers
- 1.
- 2. Your code isAwesome Your code has deployed What happen when users consume it?
- 3. Users cause problems Alot of browsers and operation systems They cause bugs They don’t follow the QA’a scenarios Code changes from dev to prod They install extensions in browsers They have anti-viruses
- 4. Today’s Task Go overstories we have encountered Reproduce them Fix them Understand how to be prepared for next time
- 5. User story A longlong time ago… New developer wrote some code…
- 7. User story -solution Capture all errors Send your error to somewhere (sentry, rollbar, etc…)
- 8. User story -continue Start tracking and analyse your errors “griddy.js” - Anyone?
- 9. JS in production? Minify Uglify Concat Why? Samegoes for CSS
- 10. Gulp & Grunt TwoGreat tools Gulp - more code like Grunt - more config like Just take your pick
- 11.
- 12.
- 13. Gulp Personally I likegulp better Lets minify and concat our code
- 15. User story Sentry willprovide your call-stack. What will happen to the call stack once minified?
- 16. User story -partial solution Source Maps
- 18. User story -partial solution Context log
- 19. Website Deployment First thing,where do you get your libraries from? NPM Bower
- 20. NPM Node Package Manager Eachpackage is isolated No conflicts Larger JS files
- 21.
- 22. Bower A NPM library Eachpackage is not isolated Conflicts may occur Smaller JS files
- 23. Website Deployment Deployment script: gitpull npm install - (fresh environment) gulp deploy
- 24. Website Deployment How willthe new version won’t be cached?
- 25. Website Deployment <script src=‘build/app.js?v=123’></script> usinggulp & package.json We need to set the version number somewhere
- 27. Website Deployment How tohandle environment configuration?
- 29. Website Deployment Minify &concat Set version Copy to new location
- 30. Deployment & sourcecontrol FB #1 FB #3 FB #4 FB #2 DEV Integration QA Staging Production Integration Server QA Server Staging Server Production Server
- 31.
- 32.
- 33. Browser caching Cache-control options: max-age:time in seconds private / public no-cache / no-store
- 34.
- 35. Cross Origin ResourceSharing Security risk You may get data You may not send data (body)
- 36. Cross Origin ResourceSharing
- 37. Cross Origin ResourceSharing Request headers Origin Access-Control-Request-Method Access-Control-Request-Headers
- 38. Cross Origin ResourceSharing Response headers Access-Control-Allow-Origin Access-Control-Allow-Credentials Access-Control-Expose-Headers Access-Control-Max-Age Access-Control-Allow-Methods Access-Control-Allow-Headers
- 39.
- 40. Browser Storage -Cookie Why it called cookie?
- 41. Browser Storage -Cookie Expire by date Control HTTP / HTTPS Cookie type first party third party super cookie Max size ~4MB
- 42. Browser Storage -Cookie Can be set by client side Can be set by HTTP Response: HTTP/1.0 200 OK Content-type: text/html Set-Cookie: theme=light Set-Cookie: sessionToken=abc123; Expires=Wed, 09 Jun 2021 10:18:14 GMT
- 43. Browser Storage -Cookie HTTP/1.0 200 OK Set-Cookie: A=1; Path=/accounts; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; Set-Cookie: B=2; Domain=.foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; HttpOnly Set-Cookie: C=3; Domain=foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; HttpOnly *** Being sent to server with every matching request
- 44. Browser Storage -Cookie Browser may block the cookies… Create fallback
- 45. Not being sentto server, no expiration, no path… ~ 10MB Persistence across instances Browser Storage - Local Storage
- 46. Browser Storage -Session Storage Not being sent to server, no expiration, no path… ~ 10MB Closes with the tab instance
- 47. User story HTTPS usingSSL Certificate SSL use encryption algorithm SHA1 is being deprecated Moving to SHA2 ?
- 48. User story Using Angular1.2 You want to migrate to 1.3?
- 49. Google Analytics Developer shoulduse that tool! You must know your audience: Browser OS Device Resolution Language / country User flow - reproduce bugs
- 50. Google Analytics Set userID Send event is also for developers SPA - HTML5 Anchor Send url manually Aggregate - /item/{{id}}
- 51. Before Production Error testing MemoryProfiling (for SPA apps) Cross platform tests Rollback testing
- 52. During Dev Try tohave the same configuration Two server instances
- 53.
- 54.