Tweet
Tweet

Slide 1

Slide 1 text

Front-End Operations

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

@bradgignac bradgignac.com

Slide 5

Slide 5 text

What is Operations?

Slide 6

Slide 6 text

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?

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

Build Test Deploy Monitor

Slide 9

Slide 9 text

Why Front-End Operations?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Building Your Application

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Use SVG Images PNG: 1539 B SVG: 393 B

Slide 20

Slide 20 text

Image Spriting (Compass)

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Testing Your Application

Slide 24

Slide 24 text

Linting JavaScript (JSHint)

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Deploying Your Application

Slide 27

Slide 27 text

gzip Everything Before 74.4 KB After 14.7 KB Difference 80%

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Deploy to CDN

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Monitoring Your Application

Slide 34

Slide 34 text

Monitor Everything Logging Instrumentation Error Tracking

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Visibility Is Important Centralized Storage Dashboards Alerting

Slide 40

Slide 40 text

Front-End Performance Real User Monitoring YSlow/PageSpeed

Slide 41

Slide 41 text

Upcoming Standards

Slide 42

Slide 42 text

Navigation Timing API

Slide 43

Slide 43 text

User Timing API

Slide 44

Slide 44 text

Beacon API

Slide 45

Slide 45 text

HTTP2/SPDY

Slide 46

Slide 46 text

Questions?