Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learning HTTP at ConFoo

Bradley Holt
February 26, 2016
Programming
0
82

Learning HTTP at ConFoo

HTTP is the fabric of the web and the growing API economy. Whether you’re building a backend or a frontend application, creating an API, or consuming an API, it’s helpful to understand the basics of HTTP. Topics covered will include HTTP methods, request headers, request URIs, response status codes, response headers, resource representations, authentication, content negotiation, and caching.

Bradley Holt

February 26, 2016
Tweet

More Decks by Bradley Holt

See All by Bradley Holt
A Gentle Introduction to Deep Learning for Developers at Abstractions
bradleyholt
1
160
Open Source Deep Learning for Developers at Red Hat Summit
bradleyholt
1
49
Deep Learning at the Edge with TensorFlow.js at ConFoo Montreal
bradleyholt
1
130
A Gentle Introduction to Deep Learning for Developers at ConFoo Montreal
bradleyholt
1
93
Enterprise Apps for the Web Platform at Vermont Code Camp
bradleyholt
0
56
Offline Sync for Progressive Web Apps at O'Reilly Fluent
bradleyholt
0
260
Offline Sync for Progressive Web Apps "Ask Me Anything" at IBM Think
bradleyholt
0
66
Offline Sync for Progressive Web Apps at IBM Think
bradleyholt
1
98
IBM Code Tech Talk: Building Offline First Apps for Exceptional User Experiences
bradleyholt
0
98

Other Decks in Programming

See All in Programming
Site Reliability Engineering for GMO
pyama86
8
1k
⼤規模⾔語モデルの拡張（RAG）が 終わったかも知れない件について
nearme_tech
23
15k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
VS Code をプロダクトにどう取り込むか
onomax
1
370
Git Rebase
bkuhlmann
11
1.6k
Apache Hive 4 on Treasure Data
ryukobayashi
0
340
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490

Featured

See All Featured
Building Your Own Lightsaber
phodgson
99
5.7k
What's new in Ruby 2.0
geeforr
337
31k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
How to name files
jennybc
65
93k
Typedesign – Prime Four
hannesfritz
36
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
The Invisible Customer
myddelton
114
12k
A better future with KSS
kneath
231
16k

Transcript

  1. ConFoo 2016 Bradley Holt, Developer Advocate Friday, February 26, 2016

    Learning HTTP @BradleyHolt

  2. Why learn HTTP?

  3. The World Wide Web HTTP (Hypertext Transfer Protocol) was originally

    invented to serve HTML (Hypertext Markup Language) Web pages @BradleyHolt

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

    OK
 
 <html>
 <body>
 <h1>I'm a Web Page!</h1>
 </body>
 </html>

  5. API Economy HTTP is the fabric of the API economy

    @BradleyHolt

  6. Mobile Apps Most mobile apps use one or more mobile

    backend APIs, many of which are HTTP APIs

  7. Distributed Systems Understanding HTTP can help you understand distributed systems;

    the web is the largest distributed system ever created

  8. Learning HTTP with CouchDB

  9. Apache CouchDB CouchDB is a document database featuring an HTTP

    API, JSON documents, and peer-to-peer replication @BradleyHolt

  10. CouchDB 2.0 Developer Preview $ git clone https://git-wip-us.apache.org/repos/asf/couchdb.git! $ npm

    install -g grunt-cli! $ cd couchdb! $ git checkout developer-preview-2.0! $ ./configure! $ make! $ dev/run! [ * ] Developers cluster is set up at http://127.0.0.1:15984.! Admin username: root! Password: +2/y7v6h @BradleyHolt http://couchdb.apache.org/developer-preview/2.0/
  11. None

  12. http-console

  13. http-console $ npm install http-console -g! @BradleyHolt https://github.com/cloudhead/http-console

  14. http-console $ npm install http-console -g! $ http-console 127.0.0.1:15984 @BradleyHolt

    https://github.com/cloudhead/http-console

  15. 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

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

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

  18. 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

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

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

  21. http-console $ http-console https://bradley-holt.cloudant.com @BradleyHolt https://github.com/cloudhead/http-console

  22. 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

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

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

  25. 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

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

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

  28. HTTP Fundamentals

  29. Stateless Messages Each HTTP request and HTTP response is a

    stateless and self-contained message

  30. 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

  31. Resources A resource is identified by a Uniform Resource Identifier

    (URI) @BradleyHolt /kittens /kittens?q=mittens /kittens/mittens /kittens/mittens/photo

  32. Status Codes Every HTTP response includes a numeric status code

    @BradleyHolt 200 OK 304 Not Modified 500 Internal Server Error 409 Conflict

  33. 200 OK Indicates that the request succeeded without error @BradleyHolt

  34. 201 Created A new resource has been created @BradleyHolt

  35. 304 Not Modified Used for conditional caching of GET requests

    @BradleyHolt

  36. 409 Conflict The request would create a conflict with the

    current state of the resource @BradleyHolt

  37. 500 Internal Server Error The server encountered an internal error

    and was not able to fulfill the request @BradleyHolt

  38. 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
 
 {
 …
 }

  39. 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
 
 {
 …
 }

  40. 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

  41. Resource Representations A resource (identified by a URI) can take

    many representations

  42. 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

  43. 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

  44. Examples

  45. Connecting to CouchDB 2.0 $ http-console root:+2/[email protected]:15984 --json! @BradleyHolt

  46. 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

  47. Connecting to IBM Cloudant $ http-console https://bradley-holt:[email protected] --json! @BradleyHolt

  48. 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

  49. Request Headers />! @BradleyHolt

  50. Request Headers /> .headers! @BradleyHolt

  51. Request Headers /> .headers! Accept: application/json! Content-Type: application/json! Authorization: Basic

    cm9vdDorMi95N3Y2aA==! Host: 127.0.0.1! @BradleyHolt

  52. PUT a Database />! @BradleyHolt

  53. PUT a Database /> PUT /kittens! @BradleyHolt

  54. PUT a Database /> PUT /kittens! ... ! @BradleyHolt

  55. PUT a Database /> PUT /kittens! ... ! HTTP/1.1 201

    Created! Content-Type: application/json! Location: http://127.0.0.1/kittens! ! { ok: true }! @BradleyHolt

  56. PUT a Database Again /> ! @BradleyHolt

  57. PUT a Database Again /> PUT /kittens! @BradleyHolt

  58. PUT a Database Again /> PUT /kittens! ... ! @BradleyHolt

  59. 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

  60. POST a Document />! @BradleyHolt

  61. POST a Document /> /kittens! @BradleyHolt

  62. POST a Document /kittens>! @BradleyHolt

  63. POST a Document /kittens> POST /! @BradleyHolt

  64. POST a Document /kittens> POST /! ... ! @BradleyHolt

  65. POST a Document /kittens> POST /! ... { "_id": "mittens",

    "age_weeks": 10, "weight_kilograms": 0.997 }! @BradleyHolt

  66. 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

  67. GET All Documents /kittens> ! @BradleyHolt

  68. GET All Documents /kittens> GET /_all_docs! @BradleyHolt

  69. 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

  70. GET a Document /kittens> ! @BradleyHolt

  71. GET a Document /kittens> GET /mittens! @BradleyHolt

  72. 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

  73. PUT an Attachment /kittens> ! @BradleyHolt

  74. PUT an Attachment /kittens> .headers! @BradleyHolt

  75. PUT an Attachment /kittens> .headers! Accept: application/json! Content-Type: application/json! Authorization:

    Basic cm9vdDorMi95N3Y2aA==! Host: 127.0.0.1! @BradleyHolt

  76. 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

  77. PUT an Attachment /kittens> ! @BradleyHolt

  78. PUT an Attachment /kittens> PUT /mittens/photo?rev=1-e665a40d9ea9711c983e907f0b0b6e8a! @BradleyHolt

  79. PUT an Attachment /kittens> PUT /mittens/photo?rev=1-e665a40d9ea9711c983e907f0b0b6e8a! ...! @BradleyHolt

  80. PUT an Attachment /kittens> PUT /mittens/photo?rev=1-e665a40d9ea9711c983e907f0b0b6e8a! ... R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=! @BradleyHolt

  81. 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'! }! @BradleyHolt

  82. 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> ! @BradleyHolt

  83. 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

  84. GET an Attachment /kittens> ! @BradleyHolt

  85. GET an Attachment /kittens> GET /mittens/photo! @BradleyHolt

  86. GET an Attachment /kittens> GET /mittens/photo! HTTP/1.1 200 OK! Content-Type:

    image/gif! Etag: "UsqjdPnY6ApD2ENFOglFHg=="! ! R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=! @BradleyHolt

  87. Conditional Caching /kittens> ! @BradleyHolt

  88. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! @BradleyHolt

  89. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> ! @BradleyHolt

  90. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> GET /mittens/photo! @BradleyHolt

  91. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> GET /mittens/photo! HTTP/1.1 304

    Not Modified! ! @BradleyHolt

  92. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> GET /mittens/photo! HTTP/1.1 304

    Not Modified! ! /kittens> ! @BradleyHolt

  93. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> GET /mittens/photo! HTTP/1.1 304

    Not Modified! ! /kittens> If-None-Match:! @BradleyHolt

  94. DELETE a Document /kittens> ! @BradleyHolt

  95. DELETE a Document /kittens> DELETE /mittens! @BradleyHolt

  96. DELETE a Document /kittens> DELETE /mittens! HTTP/1.1 409 Conflict! Content-Type:

    application/json! ! { error: 'conflict', reason: 'Document update conflict.' }! @BradleyHolt

  97. DELETE a Document /kittens> ! @BradleyHolt

  98. DELETE a Document /kittens> HEAD /mittens! @BradleyHolt

  99. DELETE a Document /kittens> HEAD /mittens! HTTP/1.1 200 OK! Etag:

    "2-d858e51453a5785bafe517b7eddc5a98"! ! @BradleyHolt

  100. DELETE a Document /kittens> ! @BradleyHolt

  101. DELETE a Document /kittens> If-Match: "2-d858e51453a5785bafe517b7eddc5a98"! @BradleyHolt

  102. DELETE a Document /kittens> If-Match: "2-d858e51453a5785bafe517b7eddc5a98"! /kittens> ! @BradleyHolt

  103. DELETE a Document /kittens> If-Match: "2-d858e51453a5785bafe517b7eddc5a98"! /kittens> DELETE /mittens! @BradleyHolt

  104. 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'! }! @BradleyHolt

  105. 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> ! @BradleyHolt

  106. 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

  107. HTTP/2

  108. 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

  109. Image Credits §  Dialing Up Web History by Mike Licht,

    on Flickr <https://flic.kr/p/cacNad> §  Web Hosting Servers by Widjaya Ivan, on Flickr <https://flic.kr/p/8onBSX> §  API calls by Tsahi Levent-Levi, on Flickr <https://flic.kr/p/ef9o5F> §  Instagram and other Social Media Apps by Jason Howie, on Flickr <https://flic.kr/p/d41HES> §  interwoven by Jared Hansen, on Flickr <https://flic.kr/p/7Pe1Vb> §  Envelope by Blake Burkhart, on Flickr <https://flic.kr/p/9Zifc3> §  200 - OK by Tomomi, on Flickr <https://flic.kr/p/aVuVsF> §  201 - Created by Tomomi, on Flickr <https://flic.kr/p/aXWm1Z> §  304 - Not Modified by Tomomi, on Flickr <https://flic.kr/p/aXY3dH> §  409 - Conflict by Tomomi, on Flickr <https://flic.kr/p/aV6jzz> §  500 - Internal Server Error by Tomomi, on Flickr <https://flic.kr/p/aVdo6e> §  Flood by Kai Wegner, on Flickr <https://flic.kr/p/b9HCNT> @BradleyHolt

  110. Questions? @BradleyHolt