Slide 1

Slide 1 text

JavaScript Code at the Speed of Light Clay Smith, New Relic JSConfUY - April 16, 2016 @smithclay

Slide 2

Slide 2 text

¿Por qué estoy aquí? • Been nerding out on internet protocols (last week: IETF 95). • Think a better understanding of the network layer is really important.

Slide 3

Slide 3 text

What's our mental model for a modern JavaScript app?

Slide 4

Slide 4 text

The Client Server Model Browser Server HTTP

Slide 5

Slide 5 text

An application Server HTTP application.js index.html application.css "My App"

Slide 6

Slide 6 text

–AlbertEinstein.js "JavaScript reality is merely an illusion."

Slide 7

Slide 7 text

More hosts === more complexity e.test/app.js index.html e.test/app.css "My App" g.test/analytics.js f.test/bootstrap.css z.test/font.woff z.test/foo.svg HTTP

Slide 8

Slide 8 text

Connections have a cost Retrieved: April 1, 2016 http://httparchive.org/interesting.php#connections

Slide 9

Slide 9 text

Are we building distributed systems? "A distributed system consists of a collection of distinct processes which are spatially separated, and which communicate with one another by exchanging messages." —Leslie Lamport, 1978 See also: http://dl.acm.org/citation.cfm?id=2482856

Slide 10

Slide 10 text

Why is it so difficult?

Slide 11

Slide 11 text

J.M. Wing's Three Drivers of Computing Society Technology Science From: Computational Thinking and Thinking about Computing (2008)

Slide 12

Slide 12 text

Physics and JavaScript apps Information can't travel faster than the speed of light. 299792458 meters/sec

Slide 13

Slide 13 text

The speed limit Browser Server HTTP This connection can't defy the laws of physics.

Slide 14

Slide 14 text

It's not fast enough Source Destination Great Circle Distance Round Trip Time in Fiber SFO London 5,375 miles 84 ms SFO Cape Town 10,124 miles 158 ms SFO Montevideo 6,554 miles 102 ms 1 ms at speed of light = Slightly less than width of Uruguay

Slide 15

Slide 15 text

What to do? 1.Move it geographically closer 2.Optimize and/or use better abstractions

Slide 16

Slide 16 text

Origin Server Moving it closer with CDNs Browser CDN Edge HTTP HTTP Short distance Long Distance HTTP requests get routed to a nearby location using the CDN network.

Slide 17

Slide 17 text

Use the headers • Set headers on responses control to caching: • Cache-Control: max-age=10, public • The bigger the max-age is, the longer it is cached. • Always verify settings (check response headers in Chrome web inspector or cURL) Great resource: http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/

Slide 18

Slide 18 text

File asset revisioning • The filename has an MD5 hash of the contents: app-d2ae34123.js • Cache-Control: max-age=31536000, public • Use a grunt and gulp plugin— someone has already done this (i.e. https://github.com/cbas/ grunt-rev)

Slide 19

Slide 19 text

What if the CDN goes down? window.jQuery || document.write('<script src="js/vendor/ jquery-1.12.2.min.js"><\/script>') https://github.com/h5bp/html5-boilerplate/blob/master/dist/ index.html Future: https://w3c.github.io/network-error-logging/

Slide 20

Slide 20 text

Better abstractions

Slide 21

Slide 21 text

The OSI Model explained using a chivito Physical (ethernet/pan) Data Link (ethernet/rodajas de tomate) Network (IP/panceta) Transport (TCP/jamón cocido) Session (mozzarella) Presentation (JPG/mayonesa) Application (HTTP/Currasco) Lower Layers Upper Layers

Slide 22

Slide 22 text

https://blog.newrelic.com/2016/02/09/http2-best-practices-web-performance/

Slide 23

Slide 23 text

GET /cat.gif GET /app.css 200 a.js HTTP/2: one connection, many requests 404 favicon.ico Single TCP Connection (Multiplexing) Client Server

Slide 24

Slide 24 text

HTTP/2 es tu amigo • No more concatenation (mega- app.js) • Adios, inlining. • Adios, domain sharding. • Server Push (highly experimental)

Slide 25

Slide 25 text

HTTP/2 requires HTTPS. Free TLS certificates (world's 3rd largest authority): https://letsencrypt.org

Slide 26

Slide 26 text

Server Browser CDN Edge HTTP/2 HTTP/1 Some CDNs already support HTTP/2. Full list is here: https:// istlsfastyet.com/ H2 + CDNs

Slide 27

Slide 27 text

How do we build complex [JavaScript apps] simply? One of the "unresolved questions in computing":

Slide 28

Slide 28 text

Measure and use data to make decisions. Be suspicious...

Slide 29

Slide 29 text

Un millón de gracias. Clay Smith, New Relic @smithclay https://blog.newrelic.com/2016/02/09/http2-best- practices-web-performance/