Slide 1

Slide 1 text

ConFoo Vancouver Bradley Holt, Developer Advocate Monday, December 5, 2016 Learning HTTP @BradleyHolt

Slide 2

Slide 2 text

Why learn HTTP?

Slide 3

Slide 3 text

The World Wide Web HTTP (Hypertext Transfer Protocol) was originally invented to serve HTML (Hypertext Markup Language) Web pages @BradleyHolt

Slide 4

Slide 4 text

GET /index.html HTTP/1.0 GET an HTML Page @BradleyHolt HTTP/1.0 200 OK
 
 
 


I'm a Web Page!


 


Slide 5

Slide 5 text

API Economy HTTP is the fabric of the API economy @BradleyHolt

Slide 6

Slide 6 text

Mobile Apps Most mobile apps use one or more mobile backend APIs, many of which are HTTP APIs

Slide 7

Slide 7 text

Distributed Systems Understanding HTTP can help you understand distributed systems; the web is the largest distributed system ever created

Slide 8

Slide 8 text

Learning HTTP with CouchDB

Slide 9

Slide 9 text

Apache CouchDB CouchDB is a document database featuring an HTTP API, JSON documents, and peer-to-peer replication @BradleyHolt

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

http-console

Slide 12

Slide 12 text

http-console $ npm install http-console -g! $ http-console 127.0.0.1:15984! > http-console 0.6.3! > Welcome, enter .help if you're lost.! > Connecting to 127.0.0.1 on port 15984.! @BradleyHolt https://github.com/cloudhead/http-console

Slide 13

Slide 13 text

http-console http://127.0.0.1:15984/> GET /! HTTP/1.1 200 OK! Content-Type: text/plain; charset=utf-8! ! {! couchdb: 'Welcome',! version: '9afa6a0',! vendor: { name: 'The Apache Software Foundation' }! } @BradleyHolt https://github.com/cloudhead/http-console

Slide 14

Slide 14 text

http-console http://127.0.0.1:15984/> .q @BradleyHolt https://github.com/cloudhead/http-console

Slide 15

Slide 15 text

http-console $ http-console https://bradley-holt.cloudant.com! > http-console 0.6.3! > Welcome, enter .help if you're lost.! > Connecting to bradley-holt.cloudant.com on port 443.! @BradleyHolt https://github.com/cloudhead/http-console

Slide 16

Slide 16 text

http-console https://bradley-holt.cloudant.com:443/> GET /! HTTP/1.1 200 OK! Content-Type: text/plain; charset=utf-8! ! {! couchdb: 'Welcome',! version: 'acfd7cb',! vendor: {! name: 'IBM Cloudant',! version: '5253',! variant: 'paas'! },! features: [ 'geo' ]! }! @BradleyHolt https://github.com/cloudhead/http-console

Slide 17

Slide 17 text

http-console https://bradley-holt.cloudant.com:443/> .q @BradleyHolt https://github.com/cloudhead/http-console

Slide 18

Slide 18 text

HTTP Fundamentals

Slide 19

Slide 19 text

Stateless Messages Each HTTP request and HTTP response is a stateless and self-contained message

Slide 20

Slide 20 text

Request Methods A request method indicates the action to be performed on a resource @BradleyHolt GET /kittens POST /kittens DELETE /kittens/mittens PUT /kittens/mittens

Slide 21

Slide 21 text

Resources A resource is identified by a Uniform Resource Identifier (URI) @BradleyHolt /kittens /kittens?q=mittens /kittens/mittens /kittens/mittens/photo

Slide 22

Slide 22 text

Status Codes Every HTTP response includes a numeric status code @BradleyHolt 200 OK 304 Not Modified 500 Internal Server Error 409 Conflict

Slide 23

Slide 23 text

200 OK Indicates that the request succeeded without error @BradleyHolt

Slide 24

Slide 24 text

201 Created A new resource has been created @BradleyHolt

Slide 25

Slide 25 text

304 Not Modified Used for conditional caching of GET requests @BradleyHolt

Slide 26

Slide 26 text

409 Conflict The request would create a conflict with the current state of the resource @BradleyHolt

Slide 27

Slide 27 text

500 Internal Server Error The server encountered an internal error and was not able to fulfill the request @BradleyHolt

Slide 28

Slide 28 text

Request Headers A client can provide additional details about a request with request headers @BradleyHolt GET /kittens
 Accept: application/json POST /kittens
 Accept: application/json
 Content-Type: application/json
 
 {
 …
 } DELETE /kittens/mittens
 Accept: application/json PUT /kittens/mittens
 Accept: application/json
 Content-Type: application/json
 
 {
 …
 }

Slide 29

Slide 29 text

Response Headers A server can provide additional details about a response with response headers @BradleyHolt 200 OK
 Content-Type: application/json
 Etag: "e146018c82000fdc"
 
 {
 …
 } 201 Created
 Content-Type: application/json
 Location: /kittens
 
 {
 …
 } 500 Internal Server Error
 Content-Type: application/json
 
 {
 …
 } 409 Conflict
 Content-Type: application/json
 
 {
 …
 }

Slide 30

Slide 30 text

Example Request and Response An example of an HTTP client request and an HTTP server response @BradleyHolt HTTP/1.1 200 OK
 Content-Type: application/json
 Etag: "e146018c82000fdc"
 
 {
 …
 } GET /kittens HTTP/1.1
 Accept: application/json

Slide 31

Slide 31 text

Resource Representations A resource (identified by a URI) can take many representations

Slide 32

Slide 32 text

Content Negotiation Allows for different representations of a resource to be served from the same URI @BradleyHolt HTTP/1.1 200 OK
 Content-Type: image/gif
 Etag: "52CAA3A43D34531E"
 
 R0lGODlhAQABAIAAAP/// wAAACwAAAAAAQABAAACAkQBADs= GET /kittens/mittens/photo HTTP/1.1
 Accept: image/gif

Slide 33

Slide 33 text

Content Negotiation Allows for different representations of a resource to be served from the same URI @BradleyHolt HTTP/1.1 200 OK
 Content-Type: image/png
 Etag: "2EB93EA080ECAA64"
 
 iVBORw0KGgoAAAANSUhEUgAAAAEAAA ABCAAAAAA6fptVAAAACklEQVQYV2P4 DwABAQEAWk1v8QAAAABJRU5ErkJggg == GET /kittens/mittens/photo HTTP/1.1
 Accept: image/png

Slide 34

Slide 34 text

Examples

Slide 35

Slide 35 text

Connecting to CouchDB 2.0 $ http-console root:+2/[email protected]:15984 --json! > http-console 0.6.3! > Welcome, enter .help if you're lost.! > Connecting to 127.0.0.1 on port 15984.! @BradleyHolt

Slide 36

Slide 36 text

Connecting to IBM Cloudant $ http-console https://bradley-holt:[email protected] --json! > http-console 0.6.3! > Welcome, enter .help if you're lost.! > Connecting to bradley-holt.cloudant.com on port 443.! @BradleyHolt

Slide 37

Slide 37 text

Request Headers /> .headers! Accept: application/json! Content-Type: application/json! Authorization: Basic cm9vdDorMi95N3Y2aA==! Host: 127.0.0.1! @BradleyHolt

Slide 38

Slide 38 text

PUT a Database /> PUT /kittens! ... ! HTTP/1.1 201 Created! Content-Type: application/json! Location: http://127.0.0.1/kittens! ! { ok: true }! @BradleyHolt

Slide 39

Slide 39 text

PUT a Database Again /> PUT /kittens! ... ! HTTP/1.1 412 Precondition Failed! Content-Type: application/json! ! { error: 'file_exists', reason: 'The database could not be created, the file already exists.' }! @BradleyHolt

Slide 40

Slide 40 text

POST a Document /> /kittens! @BradleyHolt

Slide 41

Slide 41 text

POST a Document /kittens> POST /! ... { "_id": "mittens", "age_weeks": 10, "weight_kilograms": 0.997 }! HTTP/1.1 201 Created! Content-Type: application/json! Location: http://127.0.0.1/kittens/mittens! ! {! ok: true,! id: 'mittens',! rev: '1-e665a40d9ea9711c983e907f0b0b6e8a'! }! @BradleyHolt

Slide 42

Slide 42 text

GET All Documents /kittens> GET /_all_docs! HTTP/1.1 200 OK! Content-Type: application/json! Etag: "e1463d2fc36a120a6586018c82000fdc"! ! {! total_rows: 1,! offset: 0,! rows: [! {! id: 'mittens',! key: 'mittens',! value: { rev: '1-e665a40d9ea9711c983e907f0b0b6e8a' }! }! ]! }! @BradleyHolt

Slide 43

Slide 43 text

GET a Document /kittens> GET /mittens! HTTP/1.1 200 OK! Content-Type: application/json! Etag: "1-e665a40d9ea9711c983e907f0b0b6e8a"! ! {! _id: 'mittens',! _rev: '1-e665a40d9ea9711c983e907f0b0b6e8a',! age_weeks: 10,! weight_kilograms: 0.997! }! @BradleyHolt

Slide 44

Slide 44 text

PUT an Attachment /kittens> .headers! Accept: application/json! Content-Type: application/json! Authorization: Basic cm9vdDorMi95N3Y2aA==! Host: 127.0.0.1! /kittens> Content-Type: image/gif! @BradleyHolt

Slide 45

Slide 45 text

PUT an Attachment /kittens> PUT /mittens/photo?rev=1-e665a40d9ea9711c983e907f0b0b6e8a! ... R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=! HTTP/1.1 201 Created! Content-Type: application/json! Location: http://127.0.0.1/kittens/mittens/photo! ! {! ok: true,! id: 'mittens',! rev: '2-d858e51453a5785bafe517b7eddc5a98'! }! /kittens> Content-Type: application/json! @BradleyHolt

Slide 46

Slide 46 text

GET an Attachment /kittens> GET /mittens/photo! HTTP/1.1 200 OK! Content-Type: image/gif! Etag: "UsqjdPnY6ApD2ENFOglFHg=="! ! R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=! @BradleyHolt

Slide 47

Slide 47 text

Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> GET /mittens/photo! HTTP/1.1 304 Not Modified! ! /kittens> If-None-Match:! @BradleyHolt

Slide 48

Slide 48 text

DELETE a Document /kittens> DELETE /mittens! HTTP/1.1 409 Conflict! Content-Type: application/json! ! { error: 'conflict', reason: 'Document update conflict.' }! @BradleyHolt

Slide 49

Slide 49 text

DELETE a Document /kittens> HEAD /mittens! HTTP/1.1 200 OK! Etag: "2-d858e51453a5785bafe517b7eddc5a98"! ! @BradleyHolt

Slide 50

Slide 50 text

DELETE a Document /kittens> If-Match: "2-d858e51453a5785bafe517b7eddc5a98"! /kittens> DELETE /mittens! HTTP/1.1 200 OK! Content-Type: application/json! ! {! ok: true,! id: 'mittens',! rev: '3-d0780627ddff7a7f536fe273100cec41'! }! /kittens> If-Match:! @BradleyHolt

Slide 51

Slide 51 text

HTTP/2

Slide 52

Slide 52 text

HTTP/2 §  Same methods (GET, POST, PUT, DELETE, etc.), headers, and status codes §  No more need for optimizations that reduce the number of HTTP requests (e.g. inlining, concatenation, and sprites) §  Header compression §  Cache pushing §  Ability for clients to cancel a request §  Better performance for encrypted connections §  Binary protocol @BradleyHolt https://www.mnot.net/blog/2014/01/30/http2_expectations

Slide 53

Slide 53 text

Image Credits §  Dialing Up Web History by Mike Licht, on Flickr §  Web Hosting Servers by Widjaya Ivan, on Flickr §  API calls by Tsahi Levent-Levi, on Flickr §  Instagram and other Social Media Apps by Jason Howie, on Flickr §  interwoven by Jared Hansen, on Flickr §  Envelope by Blake Burkhart, on Flickr §  200 - OK by Tomomi, on Flickr §  201 - Created by Tomomi, on Flickr §  304 - Not Modified by Tomomi, on Flickr §  409 - Conflict by Tomomi, on Flickr §  500 - Internal Server Error by Tomomi, on Flickr §  Flood by Kai Wegner, on Flickr @BradleyHolt

Slide 54

Slide 54 text

Questions? @BradleyHolt