Front-End Operations

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