Deploying your JS app in 2018

Deploying your JS app in 2018

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

23fc4556be14017796d38579dd4778ab?s=128

Mike MacCana

July 06, 2018
Tweet

Transcript

  1. 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)
  2. 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
  3. 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.
  4. 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/
  5. 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
  6. 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!
  7. 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)
  8. 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
  9. 18.

    MAKING SOMETHING NEW? GO SERVERLESS No load balancers to think

    about No Linux boxes to think about Zeit / AWS Lambda / Azure Functions
  10. 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+)
  11. 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
  12. 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