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.

1. FRONT-END PRODUCTION
MICHAEL HABERMAN

2. Your code is Awesome
Your code has deployed
What happen when users consume it?

3. Users cause problems
A lot 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 over stories we have encountered
Reproduce them
Fix them
Understand how to be prepared for next time

5. User story
A long long 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?
Same goes for CSS

10. Gulp & Grunt
Two Great tools
Gulp - more code like
Grunt - more config like
Just take your pick

11. Gulp
gulp.src(‘*.js’).pipe(concat()).pipe(gulp.dest(‘/jsFiles.js’);

12. Grant
grunt.initConfig({
concat:{
‘allFiles.js’ : ’*.js’
}
});
grunt.run(‘concat’);

13. Gulp
Personally I like gulp better
Lets minify and concat our code

15. User story
Sentry will provide 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
Each package is isolated
No conflicts
Larger JS files

21. NPM

22. Bower
A NPM library
Each package is not isolated
Conflicts may occur
Smaller JS files

23. Website Deployment
Deployment script:
git pull
npm install - (fresh environment)
gulp deploy

24. Website Deployment
How will the new version won’t be cached?

25. Website Deployment
<script src=‘build/app.js?v=123’></script>
using gulp & package.json
We need to set the version
number somewhere

27. Website Deployment
How to handle environment configuration?

29. Website Deployment
Minify & concat
Set version
Copy to new location

30. Deployment & source control
FB #1
FB #3 FB #4
FB #2
DEV
Integration
QA
Staging
Production
Integration Server
QA Server
Staging Server
Production Server

31. Browser caching

32. Browser caching

33. Browser caching
Cache-control options:
max-age: time in seconds
private / public
no-cache / no-store

34. Browser caching

35. Cross Origin Resource Sharing
Security risk
You may get data
You may not send data (body)

36. Cross Origin Resource Sharing

37. Cross Origin Resource Sharing
Request headers
Origin
Access-Control-Request-Method
Access-Control-Request-Headers

38. Cross Origin Resource Sharing
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. Browser Storage
Cookie
Local Storage
Local Session

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 sent to 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 using SSL Certificate
SSL use encryption algorithm
SHA1 is being deprecated
Moving to SHA2 ?

48. User story
Using Angular 1.2
You want to migrate to 1.3?

49. Google Analytics
Developer should use that tool!
You must know your audience:
Browser
OS
Device
Resolution
Language / country
User flow - reproduce bugs

50. Google Analytics
Set user ID
Send event is also for developers
SPA - HTML5 Anchor
Send url manually
Aggregate - /item/{{id}}

51. Before Production
Error testing
Memory Profiling (for SPA apps)
Cross platform tests
Rollback testing

52. During Dev
Try to have the same configuration
Two server instances

53. Questions?

54. Thank you!
michael@haberman.io
@hab_mic