Front-End Operations

Front-End Operations

17950202cc7be133e80a45580077ed72?s=128

bradgignac

August 28, 2014
Tweet

Transcript

  1. Front-End Operations

  2. None
  3. None
  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

  35. None
  36. None
  37. None
  38. None
  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?