Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-End Operations

Front-End Operations

bradgignac

August 28, 2014
Tweet

More Decks by bradgignac

Other Decks in Programming

Transcript

  1. Front-End Operations

    View Slide

  2. View Slide

  3. View Slide

  4. @bradgignac
    bradgignac.com

    View Slide

  5. What is Operations?

    View Slide

  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?

    View Slide

  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.

    View Slide

  8. Build
    Test
    Deploy
    Monitor

    View Slide

  9. Why Front-End Operations?

    View Slide

  10. JavaScript is Growing
    Circa 2000 Little to No JavaScript
    Circa 2007 Sprinkles of JavaScript
    Circa 2014 Single Page Applications

    View Slide

  11. JavaScript is Growing
    Python 17,492 LOC
    Javascript 268,867 LOC
    Total 286,359 LOC

    View Slide

  12. Web Apps are Distributed
    The Eight Fallacies of
    Distributed Computing
    Sun Microsystems

    View Slide

  13. Web Apps are Distributed
    United States 844 ms
    United Kingdom 1000 ms
    Australia 1450 ms
    China 1880 ms
    Congo 7750 ms

    View Slide

  14. 7 Browsers
    5 User Roles
    9 Feature Flags
    17920 Versions
    Many Versions Running

    View Slide

  15. Building Your Application

    View Slide

  16. Minification (Uglify)
    Before 124 KB
    After 51 KB
    Difference 59%

    View Slide

  17. Minification (clean-css)
    Before 210 KB
    After 24 KB
    Difference 88%

    View Slide

  18. Image Optimization (optipng)
    Before 18 KB
    After 16 KB
    Difference 11%

    View Slide

  19. Use SVG Images
    PNG: 1539 B SVG: 393 B

    View Slide

  20. Image Spriting (Compass)

    View Slide

  21. Image Inlining (Compass)
    li  {  
       background:  url(data:imagegif;base64,R0lGO...iB0UjIQA7)
           no-­‐repeat
           left  center;
       padding:  5px  0  5px  25px;
    }

    View Slide

  22. Modularize Code (webpack)
    vendor.js
    core.js
    a.js b.js c.js

    View Slide

  23. Testing Your Application

    View Slide

  24. Linting JavaScript (JSHint)

    View Slide

  25. Automated Testing
    Unit Tests - Karma + Jasmine
    Functional Tests - Selenium
    Cross-Browser Tests - Sauce Labs

    View Slide

  26. Deploying Your Application

    View Slide

  27. gzip Everything
    Before 74.4 KB
    After 14.7 KB
    Difference 80%

    View Slide

  28. Use ETags
    HTTP/1.1  200  OK
    Date:  Fri,  16  May  2014  22:00:00  GMT
    ETag:  12c0c7007440cfc93fc1ceb5a837c9be

    View Slide

  29. Use Cache Control
    HTTP/1.1  200  OK
    Date:  Fri,  16  May  2014  22:00:00  GMT
    Cache-­‐Control:  public,  max-­‐age=300

    View Slide

  30. Version Static Assets
    Before unicorns.js
    After unicorns-098f6bcd.js

    View Slide

  31. Deploy to CDN

    View Slide

  32. Putting It All Together
    Static Assets on CDN
    Versioned Files
    30-Year Cache Expiration

    View Slide

  33. Monitoring Your Application

    View Slide

  34. Monitor Everything
    Logging
    Instrumentation
    Error Tracking

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. Visibility Is Important
    Centralized Storage
    Dashboards
    Alerting

    View Slide

  40. Front-End Performance
    Real User Monitoring
    YSlow/PageSpeed

    View Slide

  41. Upcoming Standards

    View Slide

  42. Navigation Timing API

    View Slide

  43. User Timing API

    View Slide

  44. Beacon API

    View Slide

  45. HTTP2/SPDY

    View Slide

  46. Questions?

    View Slide