slidenumbers: true

Everything (PDF+Markdown): https://github.com/azat-co/h2-node

Big idea: Web, HTTP and JavaScript are everywhere... and Node has some cool core features... What if the world can be a better place if more developers master Node?

^Wrote and published 12 books not counting Korean, Chinese, Polish and Russian translations

• Work: Technology Fellow at Capital One (kind of a big deal)
• Experience: FDIC, NIH, DocuSign, HackReactor and Storify
• Books: React Quickly, Practical Node.js, Pro Express.js, Express.js API and 8 others

Azat Mardan

• Teach: NodeProgram.com
• Twitter: @azat_co
• Email: [email protected]
• Blog: webapplog.com

It's here.

Really is here

http://caniuse.com/#feat=http2

Started at SPDY at Google

^Allows browsers to include multiple requests in a single TCP connection which in turn enables browsers to request all the assets in parallel.

^Servers can push web assets (CSS, JS, images) before a browser knows it needs them which speeds up page load times by reducing number of requests.

^Allows browsers to specify priority of assets. For example, browser can request HTML first to render it before any styles or JavaScript.

^All HTTP/1.1 requests have to have headers which are typically duplicate the same info, while H2 forces all HTTP headers to be sent in a compressed format.

• De facto mandatory encryption

^Although the encryption is not required, most major browsers implement H2 only over TLS (HTTPS).

Old methods of HTTP/1 might not work and might even harm!

^Domain sharding, file concatenation, sprites

$ mkdir http2-express
$ cd http2-express
$ openssl genrsa -des3 -passout pass:x -out server.pass.key 2048
...
$ openssl rsa -passin pass:x -in server.pass.key -out server.key
writing RSA key
$ rm server.pass.key
$ openssl req -new -key server.key -out server.csr
...
Country Name (2 letter code) [AU]:US
State or Province Name (full name) [Some-State]:California
...
A challenge password []:
...
$ openssl x509 -req -sha256 -days 365 -in server.csr -signkey server.key -out server.crt

• spdy - like
• http2 - not like
• core http2 (based on nghttp2) - coming! (GitHub issue)

npm init
npm i express spdy -S

const port = 3000
const spdy = require('spdy')
const express = require('express')
const path = require('path')
const fs = require('fs')

const app = express()

app.get('*', (req, res) => {
    res
      .status(200)
      .json({message: 'ok'})
})

const options = {
    key: fs.readFileSync(__dirname + '/server.key'),
    cert:  fs.readFileSync(__dirname + '/server.crt')
}

spdy
  .createServer(options, app)
  .listen(port, (error) => {
    if (error) {
      console.error(error)
      return process.exit(1)
    } else {
      console.log('Listening on port: ' + port + '.')
    }
  })

node server

curl https://localhost:3000/ -k

Make sure you got the latest version 7.46 with nghttp2)

^The way server push works is by bundling multiple assets and resources into a single HTTP/2 call. Under the hood, server will issue a PUSH_PROMISE. Clients (browsers included) can use it or not depending on if the main HTML file needs it. If yes, it needs it, then client will match received push promises to make them look like a regular HTTP/2 GET calls. Obviously, if there's a match, then no new calls will be made, but the assets already at the client will be used. Some good articles for more info on server push benefits.

const http2 = require('spdy')
const logger = require('morgan')
const express = require('express')
const app = express()
const fs = require('fs')

app.use(logger('dev'))

app.get('/', (req, res) => {
  res.send(`hello, http2!
go to /pushy`)
})

app.get('/pushy', (req, res) => {
  var stream = res.push('/main.js', {
    status: 200, // optional
    method: 'GET', // optional
    request: {
      accept: '*/*'
    },
    response: {
      'content-type': 'application/javascript'
    }
  })
  stream.on('error', () => {
  })
  stream.end('alert("hello from push stream!");')
  res.end('<script src="/main.js"></script>')
})

var options = {
  key: fs.readFileSync('./server.key'),
  cert: fs.readFileSync('./server.crt')
}

http2
  .createServer(options, app)
  .listen(8080, ()=>{
    console.log(`Server is listening on https://localhost:8080.
You can open the URL in the browser.`)
  }
)

GET /pushy 200 4.918 ms - -

^Single request but we see alert

^Demo if you have time

• https://github.com/azat-co/http2-express
• https://github.com/azat-co/http2-node-server-push

Capital One is hiring ~2,000 more software engineers in UK, Canada and US.

https://jobs.capitalone.com

We use Node and other cutting-edge open source tech a lot! (React, Kotlin, Clojure, Angular 2, TypeScript, Go, etc.)

Node at Capital One by Azat Mardan at Node Interactive 2015

https://www.youtube.com/watch?v=BJPeLJhv1Ic

Email me to be referred for a job at Capital One.

Twitter: @azat_co Email: [email protected]

1. spdy or http2 core (soon)
2. Express rocks
3. Server Push - yeah!

Everything (PDF+Markdown): https://github.com/azat-co/h2-node

Check out Node.University, Webapplog.com and NodeProgram.com for the best online and in-person education!

http://node.university

^Do the exercise