Front-End Operations

Transcript

1. Front-End Operations
4. @bradgignac bradgignac.com
5. What is Operations?
6. Is the site down? Is the site slow? Are users seeing errors? Are users encountering bugs? Are third-party APIs experiencing downtime? Is the site being attacked? Can I handle the big customer we just landed? Does everything work for IE7 users, too? When does site performance begin to degrade? Are we experiencing unusually high load? Is our error rate within an expected range? Do we have enough disk space? Why is only one user experiencing this bug? Is the site down? Is the site slow? How do I know my site is working correctly? Are users encountering bugs? Are third-party APIs experiencing downtime? Is the site being attacked? Can I handle the big customer we just landed? Does everything work for IE7 users, too? When does site performance begin to degrade? Are we experiencing unusually high load? Is our error rate within an expected range? Do we have enough disk space? Why is only one user experiencing this bug? Is the site down? Is the site slow? Are users seeing errors? Are users encountering bugs? How can I be confident my site is working?
7. Is the site down? Is the site slow? Are users seeing errors? Are users encountering bugs? Are third-party APIs experiencing downtime? Is the site being attacked? Can I handle the big customer we just landed? Does everything work for IE7 users, too? When does site performance begin to degrade? Are we experiencing unusually high load? Is our error rate within an expected range? Do we have enough disk space? Why is only one user experiencing this bug? Is the site down? Is the site slow? How do I know my site is working correctly? Are users encountering bugs? Are third-party APIs experiencing downtime? Is the site being attacked? Can I handle the big customer we just landed? Does everything work for IE7 users, too? When does site performance begin to degrade? Are we experiencing unusually high load? Is our error rate within an expected range? Do we have enough disk space? Why is only one user experiencing this bug? Is the site down? Is the site slow? Are users seeing errors? Are users encountering bugs? Confidence gives us courage.
8. Build Test Deploy Monitor
9. Why Front-End Operations?
10. JavaScript is Growing Circa 2000 Little to No JavaScript Circa 2007 Sprinkles of JavaScript Circa 2014 Single Page Applications
11. JavaScript is Growing Python 17,492 LOC Javascript 268,867 LOC Total 286,359 LOC
12. Web Apps are Distributed The Eight Fallacies of Distributed Computing Sun Microsystems
13. Web Apps are Distributed United States 844 ms United Kingdom 1000 ms Australia 1450 ms China 1880 ms Congo 7750 ms
14. 7 Browsers 5 User Roles 9 Feature Flags 17920 Versions Many Versions Running
15. Building Your Application
16. Minification (Uglify) Before 124 KB After 51 KB Difference 59%
17. Minification (clean-css) Before 210 KB After 24 KB Difference 88%
18. Image Optimization (optipng) Before 18 KB After 16 KB Difference 11%
19. Use SVG Images PNG: 1539 B SVG: 393 B
20. Image Spriting (Compass)
21. Image Inlining (Compass) li  {      background:  url(data:imagegif;base64,R0lGO...iB0UjIQA7)        no-­‐repeat        left  center;    padding:  5px  0  5px  25px; }
22. Modularize Code (webpack) vendor.js core.js a.js b.js c.js
23. Testing Your Application
24. Linting JavaScript (JSHint)
25. Automated Testing Unit Tests - Karma + Jasmine Functional Tests - Selenium Cross-Browser Tests - Sauce Labs
26. Deploying Your Application
27. gzip Everything Before 74.4 KB After 14.7 KB Difference 80%
28. Use ETags HTTP/1.1  200  OK Date:  Fri,  16  May  2014  22:00:00  GMT ETag:  12c0c7007440cfc93fc1ceb5a837c9be
29. Use Cache Control HTTP/1.1  200  OK Date:  Fri,  16  May  2014  22:00:00  GMT Cache-­‐Control:  public,  max-­‐age=300
30. Version Static Assets Before unicorns.js After unicorns-098f6bcd.js
31. Deploy to CDN
32. Putting It All Together Static Assets on CDN Versioned Files 30-Year Cache Expiration
33. Monitoring Your Application
34. Monitor Everything Logging Instrumentation Error Tracking
39. Visibility Is Important Centralized Storage Dashboards Alerting
40. Front-End Performance Real User Monitoring YSlow/PageSpeed
41. Upcoming Standards
42. Navigation Timing API
43. User Timing API
44. Beacon API
45. HTTP2/SPDY
46. Questions?