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

HTTP APIs demystified

HTTP APIs demystified

HTTP is the distributed computing API that makes all of the others look bad. HTTP’s popularity is largely due to the simplicity of its text-based format and stateless interaction. Despite this, many web application development frameworks attempt to provide an abstraction layer over HTTP, and only add complexity in the attempt to hide the details.

This short presentation introduces HTTP basics for beginners, and shows what it looks like under the covers. Novice web developers benefit from this introduction by learning to understand where a platform-specific technology ends and where HTTP and the platform we call ‘the web’ starts.

Peter Hilton

January 22, 2021
Tweet

More Decks by Peter Hilton

Other Decks in Technology

Transcript

  1. @PeterHilton
    http://hilton.org.uk/
    HTTP APIs demystified
    Peeling back the top layer of the
    web application stack

    View full-size slide

  2. Internet technology is
    like an onion:
    there’s always another
    layer.
    @PeterHilton • 2

    View full-size slide

  3. A long time ago…

    View full-size slide

  4. A long time ago…
    1945 First description of a link-based information system.
    1965 The term ‘hypertext’ coined for text containing links.
    1970s Many hypertext computer systems implemented.
    1980s The Internet becomes widely used by scientists.
    1989 WorldWideWeb project introduces HTML to describe
    hypertext documents, and HTTP to fetch them via Internet.
    1991 HTTP 0.9, 1996 HTTP 1.0, 1997-1999 HTTP 1.1
    2015 HTTP 2 4
    @PeterHilton •

    View full-size slide

  5. HTTP = hypertext + Internet
    5
    @PeterHilton •
    The Internet is a communications network.
    HTTP - Hypertext Transfer Protocol is an Internet
    communication protocol.
    HTML - Hypertext Markeup Language is a text-based markup
    language for writing hypertext documents.
    Internet + HTTP + HTML = the web

    View full-size slide

  6. HTTP in action

    View full-size slide





  7. Greeting


    Hello, world!


    hello.html

    View full-size slide

  8. https://hilton.org.uk/hello.html
    URL
    Uniform Resource Locator
    (address)

    View full-size slide

  9. https://hilton.org.uk/hello.html
    https
    scheme (transfer protocol)
    /hello.html
    (resource) URL path
    host (server) name
    http://hilton.org.uk

    View full-size slide

  10. https://hilton.org.uk:3000/hello
    80 is the default port in a URL
    port number

    View full-size slide

  11. $ telnet www.x.com 80
    Trying 160.153.63.10...
    Connected to x.com.
    Escape character is '^]'.
    GET / HTTP/1.1
    Host: www.x.com
    HTTP/1.1 200 OK
    Date: Wed, 20 Jan 2021 09:13:04 GMT
    Server: Apache
    Upgrade: h2,h2c
    Connection: Upgrade
    Last-Modified: Fri, 14 Jul 2017 16:28:12 GMT
    ETag: "5a200a1-1-55449890c4e78"
    Accept-Ranges: bytes
    Content-Length: 1
    Vary: User-Agent
    Content-Type: text/html
    x

    View full-size slide

  12. Internet
    HTTP request HTTP response
    client server

    View full-size slide

  13. $ telnet www.x.com 80
    Trying 160.153.63.10...
    Connected to x.com.
    Escape character is '^]'.
    GET / HTTP/1.1
    Host: www.x.com
    HTTP/1.1 200 OK
    Date: Wed, 20 Jan 2021 09:13:04 GMT
    Server: Apache
    Upgrade: h2,h2c
    Connection: Upgrade
    Last-Modified: Fri, 14 Jul 2017 16:28:12 GMT
    ETag: "5a200a1-1-55449890c4e78"
    Accept-Ranges: bytes
    Content-Length: 1
    Vary: User-Agent
    Content-Type: text/html
    x
    }
    }response
    request

    View full-size slide

  14. HTTP request in detail

    View full-size slide

  15. GET /hello.html HTTP/1.1
    Host: localhost:3000
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5)
    AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93
    Safari/537.36
    Accept: text/html,application/xhtml+xml,application/
    xml;q=0.9,image/webp,*/*;q=0.8
    Accept-Encoding: gzip, deflate, sdch
    Accept-Language: en-GB,en;q=0.8,nl;q=0.6,fr;q=0.4
    Cache-Control: max-age=0
    Connection: keep-alive
    Upgrade-Insecure-Requests: 1

    View full-size slide

  16. POST /form HTTP/1.1
    Host: localhost:3000
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5)
    AppleWebKit/601.6.17 (KHTML, like Gecko) Version/9.1.1 Safari/
    601.6.17
    Content-Length: 24
    Accept: text/html,application/xhtml+xml,application/
    xml;q=0.9,*/*;q=0.8
    Accept-Encoding: gzip, deflate
    Accept-Language: en-us
    Connection: keep-alive
    Content-Type: application/x-www-form-urlencoded
    Dnt: 1
    Origin: file://
    colour=blue&fruit=banana

    View full-size slide

  17. HTTP request methods
    GET - fetch a resource
    HEAD - returns the same headers as GET, but no body
    POST - send a resource
    PUT - replace a resource
    DELETE - delete a resource
    TRACE, OPTIONS, LINK, UNLINK, PATCH
    19
    @PeterHilton •

    View full-size slide

  18. HTTP response in detail

    View full-size slide

  19. HTTP/1.1 200 OK
    Server: GitHub.com
    Date: Sat, 16 Jul 2016 11:47:50 GMT
    Content-Type: text/html; charset=utf-8
    Content-Length: 147
    Last-Modified: Sat, 16 Jul 2016 08:27:20 GMT
    Access-Control-Allow-Origin: *
    Expires: Sat, 16 Jul 2016 11:57:50 GMT
    Cache-Control: max-age=600
    Accept-Ranges: bytes
    X-GitHub-Request-Id: 53A0612B:15F4:2FDF3B:578A1EE6




    Greeting


    Hello, world!


    View full-size slide

  20. HTTP/1.1 200 OK
    response status code
    status text

    View full-size slide

  21. The other kind of application interface
    An application user interface (UI) lets you interact
    with an application by human (user) interaction.
    An application programming interface (API) lets you interact
    with an application by programming software to do so.
    24
    @PeterHilton •

    View full-size slide

  22. ‘Loading a web page’
    HTTP/1.1 200 OK
    Server: GitHub.com
    Date: Sat, 16 Jul 2016 11:47:50 GMT
    Content-Type: text/html; charset=utf-8
    Content-Length: 147
    Cache-Control: max-age=600
    Last-Modified: 16 Jul 2016 08:27:20 GMT
    Expires: Sat, 16 Jul 2016 11:57:50 GMT
    Access-Control-Allow-Origin: *
    Accept-Ranges: bytes




    Greeting


    Hello, world!


    ‘Calling an API’
    HTTP/1.1 200 OK
    Server: GitHub.com
    Date: Wed, 20 Jan 2021 09:38:36 GMT
    Content-Type: application/json; charset=utf-8
    Content-Length: 78
    Cache-Control: max-age=600
    Last-Modified: Wed, 20 Jan 2021 09:38:36 GMT
    Expires: 20 Jan 2021 09:48:35
    Access-Control-Allow-Origin: *
    Accept-Ranges: bytes
    {
    "message": {
    "content": "Hello, world!",
    "type": "Greeting"
    }
    }

    View full-size slide

  23. ‘Submitting a form on a web page’
    POST /form HTTP/1.1
    Content-Length: 24
    Content-Type: application/
    x-www-form-urlencoded
    colour=blue&fruit=banana
    ‘Calling an API’
    POST /api HTTP/1.1
    Content-Length: 78
    Content-Type: application/json
    {
    "message": {
    "content": "Hello, world!",
    "type": "Greeting"
    }
    }

    View full-size slide

  24. The tricky details

    View full-size slide

  25. HTTP response status codes
    28
    @PeterHilton •
    100-199 Informational
    200-299 Client request successful
    300-399 Request redirected, further action necessary
    400-499 Client error - do not repeat the same request
    500-599 Server error - maybe try again
    About 60 defined status codes, in the above five groups
    https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

    View full-size slide

  26. HTTP header fields (‘HTTP headers’)
    29
    @PeterHilton •
    General headers are used in both request and response
    Request headers indicate client preferences and config
    Response headers provide information about the server
    Entity headers describe the request or response body
    Non-standard headers are application-specific
    About 50 defined standard headers
    https://en.wikipedia.org/wiki/List_of_HTTP_header_fields

    View full-size slide

  27. Things that everyone gets wrong
    Character encodings
    URL encoding/decoding
    Caches and proxies
    Cookies, and using them to introduce ‘session’ state
    Documenting an API
    30
    @PeterHilton •

    View full-size slide

  28. Further reading
    31
    @PeterHilton •
    Web Client Programming with Perl (O’Reilly, 1997),
    free online via O’Reilly Open Books, starts with three well-
    written chapters that teach everything web
    developers need to know about HTTP:
    Chapter 1: Introduction
    Chapter 2: Demystifying the Browser
    Chapter 3: Learning HTTP
    http://www.oreilly.com/openbook/webclient/

    View full-size slide

  29. HTTP: The Definitive Guide
    658 pages. 1035 grams.
    I have not read this book.
    Few developers need this much detail.
    32
    @PeterHilton •

    View full-size slide

  30. @PeterHilton
    http://hilton.org.uk/

    View full-size slide