Deploying your JS app in 2018

Simple, effective ways to make your site faster, smaller, more secure and scalable.

Transcript

1. DEPLOYING YOUR JS APP IN 2018 Mike MacCana, CertSimple mikemaccana.com certsimple.com
2. I BUILD TECH PRODUCTS
3. SMALL FAST SECURE AVAILABLE
4. SIMPLE + EFFECTIVE SOLUTIONS
5. FAST Getting content to download faster
6. HTTP/2 – 3 X SPEEDUP ON SOME PAGES HTTPS 1.1: 8 connections max per browser HTTP 2: single multiplex connection. +Link header (preloading) Works in every major browser * Works in every server: HAProxy 1.8, nginx, Digital Ocean LBs, Amazon ELBs, Azure Application Gateway HTTPS://CANIUSE.COM/#FEAT=HTTP2 0 200 400 600 800 1000 1200 1400 1600 1800 2000 HTTP1.1 HTTP/2 Page load time (ms)
7. BROTLI – 14% SMALLER JS Static CS/JS/HTML: make .br compressed versions at max compression Dynamic CS/JS/HTML: brotli on setting 4 or 5 for fast responses and better compression Every major browser! * 0 20 40 60 80 100 120 JS CSS HTML gzip brotli HTTPS://CANIUSE.COM/#SEARCH=BROTLI
8. Before, gzip After, brotli:
9. SMALL Trimming the fat on your app and your static content
10. REMOVE 300K FROM YOUR JS BUNDLE Using CommonJS (npm) with browserify or webpack?  discify and webpack-visualizer finds the modules are occupying the most space  We discovered country-data package was 320K – replaced it with a smaller module we made with just data we needed. Using ES6 modules?  Tree shaking can be used to remove unused imports.
11. 75% REDUCTION IN STATIC PAGE SIZE • AMP - single request loads entire page, consolidates DOM changes, focuses on rendering on-screen content, prevents scripts blocking page rendering, image loading making page jump, etc. • Using a CMS? Ghost has AMP built it. • Express middleware to automatically create AMP – amps-in-the-trunk 1 • Note: will show your content as coming from ‘amp.google.com’. Google say they will fix this in future * HTTPS://WWW.AMPPROJECT.ORG/LATEST/BLOG/IMPROVING-URLS-FOR-AMP-PAGES/ 0 5,000 10,000 15,000 20,000 25,000 Non AMP AMP Source: https://timkadlec.com/remembers/2018-03-19-how-fast-is-amp-really/
12. SECURE Ensuring that our site isn’t messed with.
13. YOU NEED HTTPS *NOW* July 2018, Chrome explicitly marking HTTP sites as Not Secure Let’s Encrypt, Cloudflare, Heroku, AWS will all give free DV certs Only requirement for DV is owning a domain DV certs can be issued instantly, as does not verify (or include) organization in cert
14. VERIFYING YOUR SITE EV HTTPS certs verify your company runs the site Certs include verified organization Requires government, independent record checks, phone calls as part of verification process – I’m biased but CertSimple make this easier!
15. WHAT KIND OF ENCRYPTION? • RSA 2048 – majority of current sites. • RSA 4096 is too slow for mobile • ECC P256 – newer sites, CloudFlare. Roughly equivalent to 3072 bit RSA • Breaks on macOS 10.9, Windows XP, Android 2.3 and Java 6 • Future: ECC Curve25519 (128) and Curve228 (224 bits)
16. PREVENT XSS WITH A CONTENT SECURITY POLICY Your framework probably escapes user data by default. But it probably doesn’t do it well. * CSP says what URLs are allowed for JS, images, network connections, frames, styles, etc. csp-by-api is a JS tool to build CSP by simply stating what services you use HTTPS://WWW.OWASP.ORG/INDEX.PHP/XSS_FILTER_EVASION_CHEAT_SHEET 7 pm GMT+2 to 11 pm GMT+2
17. AVAILABLE Keeping our app available during upgrades, outages, etc.
18. MAKING SOMETHING NEW? GO SERVERLESS No load balancers to think about No Linux boxes to think about Zeit / AWS Lambda / Azure Functions
19. PICK A LOAD BALANCER If unsure, use your Cloud Provider’s – there’s less things to break  Note Digital Ocean doesn’t support brotli  AWS doesn’t support ECC certs HAProxy 1.8  Dynamic configuration  No Brotli nginx  No dynamic reconfiguration (needs nginx+)
20. SCALE QUICKLY Be able to build new hosts without thinking CloudInit works everywhere  AWS / Azure / Digital Ocean / Google Cloud  deploy-node-on-linux generates CloudInit files to build a box, pull your app with Github deploy keys, a Linux .service for your app, automatic restarts, etc 1 HTTPS://GITHUB.COM/CERTSIMPLE/DEPLOY-NODE-ON-LINUX
21. FURTHER READING HAProxy config: https://certsimple.com/blog/haproxy-http2-dynamic-load- balancing-ssl nginx config: https://certsimple.com/blog/nginx-http2-load-balancing-config CloudInit generator: https://github.com/certsimple/deploy-node-on-linux CSP generator: https://www.npmjs.com/package/csp-by-api Express AMP middleware: https://www.npmjs.com/package/amps-in-the-trunk ECC / RSA key strengths: https://tools.ietf.org/html/rfc4492 Fast EV HTTPS verification: https://certsimple.com Me: https://mikemaccana.com
22. THANKS. @MIKEMACCANA CERTSIMPLE.COM