mirror of
https://github.com/ninenines/cowboy.git
synced 2025-07-15 04:30:25 +00:00
225 lines
8.2 KiB
Markdown
225 lines
8.2 KiB
Markdown
![]() |
The modern Web
|
||
|
==============
|
||
|
|
||
|
Let's take a look at various technologies from the beginnings
|
||
|
of the Web up to this day, and get a preview of what's
|
||
|
coming next.
|
||
|
|
||
|
Cowboy is compatible with all the technology cited in this
|
||
|
chapter except of course HTTP/2.0 which has no implementation
|
||
|
in the wild at the time of writing.
|
||
|
|
||
|
The prehistoric Web
|
||
|
-------------------
|
||
|
|
||
|
HTTP was initially created to serve HTML pages and only
|
||
|
had the GET method for retrieving them. This initial
|
||
|
version is documented and is sometimes called HTTP/0.9.
|
||
|
HTTP/1.0 defined the GET, HEAD and POST methods, and
|
||
|
was able to send data with POST requests.
|
||
|
|
||
|
HTTP/1.0 works in a very simple way. A TCP connection
|
||
|
is first established to the server. Then a request is
|
||
|
sent. Then the server sends a response back and closes
|
||
|
the connection.
|
||
|
|
||
|
Suffice to say, HTTP/1.0 is not very efficient. Opening
|
||
|
a TCP connection takes some time, and pages containing
|
||
|
many assets load much slower than they could because of
|
||
|
this.
|
||
|
|
||
|
Most improvements done in recent years focused on reducing
|
||
|
this load time and reducing the latency of the requests.
|
||
|
|
||
|
HTTP/1.1
|
||
|
--------
|
||
|
|
||
|
HTTP/1.1 quickly followed and added a keep-alive mechanism
|
||
|
to allow using the same connection for many requests, as
|
||
|
well as streaming capabilities, allowing an endpoint to send
|
||
|
a body in well defined chunks.
|
||
|
|
||
|
HTTP/1.1 defines the OPTIONS, GET, HEAD, POST, PUT, DELETE,
|
||
|
TRACE and CONNECT methods. The PATCH method was added in more
|
||
|
recent years. It also improves the caching capabilities with
|
||
|
the introduction of many headers.
|
||
|
|
||
|
HTTP/1.1 still works like HTTP/1.0 does, except the connection
|
||
|
can be kept alive for subsequent requests. This however allows
|
||
|
clients to perform what is called as pipelining: sending many
|
||
|
requests in a row, and then processing the responses which will
|
||
|
be received in the same order as the requests.
|
||
|
|
||
|
REST
|
||
|
----
|
||
|
|
||
|
The design of HTTP/1.1 was influenced by the REST architectural
|
||
|
style. REST, or REpresentational State Transfer, is a style of
|
||
|
architecture for loosely connected distributed systems.
|
||
|
|
||
|
REST defines constraints that systems must obey to in order to
|
||
|
be RESTful. A system which doesn't follow all the constraints
|
||
|
cannot be considered RESTful.
|
||
|
|
||
|
REST is a client-server architecture with a clean separation
|
||
|
of concerns between the client and the server. They communicate
|
||
|
by referencing resources. Resources can be identified, but
|
||
|
also manipulated. A resource representation has a media type
|
||
|
and information about whether it can be cached and how. Hypermedia
|
||
|
determines how resources are related and they can be used.
|
||
|
REST is also stateless. All requests contain the complete
|
||
|
information necessary to perform the action.
|
||
|
|
||
|
HTTP/1.1 defines all the methods, headers and semantics required
|
||
|
to implement RESTful systems.
|
||
|
|
||
|
REST is most often used when designing web application APIs
|
||
|
which are generally meant to be used by executable code directly.
|
||
|
|
||
|
XmlHttpRequest
|
||
|
--------------
|
||
|
|
||
|
Also know as AJAX, this technology allows Javascript code running
|
||
|
on a web page to perform asynchronous requests to the server.
|
||
|
This is what started the move from static websites to dynamic
|
||
|
web applications.
|
||
|
|
||
|
XmlHttpRequest still performs HTTP requests under the hood,
|
||
|
and then waits for a response, but the Javascript code can
|
||
|
continue to run until the response arrives. It will then receive
|
||
|
the response through a callback previously defined.
|
||
|
|
||
|
This is of course still requests initiated by the client,
|
||
|
the server still had no way of pushing data to the client
|
||
|
on its own, so new technology appeared to allow that.
|
||
|
|
||
|
Long-polling
|
||
|
------------
|
||
|
|
||
|
Polling was a technique used to overcome the fact that the server
|
||
|
cannot push data directly to the client. Therefore the client had
|
||
|
to repeatedly create a connection, make a request, get a response,
|
||
|
then try again a few seconds later. This is overly expensive and
|
||
|
adds an additional delay before the client receives the data.
|
||
|
|
||
|
Polling was necessary to implement message queues and other
|
||
|
similar mechanisms, where a user must be informed of something
|
||
|
when it happens, rather than when he refreshes the page next.
|
||
|
A typical example would be a chat application.
|
||
|
|
||
|
Long-polling was created to reduce the server load by creating
|
||
|
less connections, but also to improve latency by getting the
|
||
|
response back to the client as soon as it becomes available
|
||
|
on the server.
|
||
|
|
||
|
Long-polling works in a similar manner to polling, except the
|
||
|
request will not get a response immediately. Instead the server
|
||
|
leaves it open until it has a response to send. After getting
|
||
|
the response, the client creates a new request and gets back
|
||
|
to waiting.
|
||
|
|
||
|
You probably guessed by now that long-polling is a hack, and
|
||
|
like most hacks it can suffer from unforeseen issues, in this
|
||
|
case it doesn't always play well with proxies.
|
||
|
|
||
|
HTML5
|
||
|
-----
|
||
|
|
||
|
HTML5 is, of course, the HTML version after HTML4. But HTML5
|
||
|
emerged to solve a specific problem: dynamic web applications.
|
||
|
|
||
|
HTML was initially created to write web pages which compose
|
||
|
a website. But soon people and companies wanted to use HTML
|
||
|
to write more and more complex websites, eventually known as
|
||
|
web applications. They are for example your news reader, your
|
||
|
email client in the browser, or your video streaming website.
|
||
|
|
||
|
Because HTML wasn't enough, they started using proprietary
|
||
|
solutions, often implemented using plug-ins. This wasn't
|
||
|
perfect of course, but worked well enough for most people.
|
||
|
|
||
|
However, the needs for a standard solution eventually became
|
||
|
apparent. The browser needed to be able to play media natively.
|
||
|
It needed to be able to draw anything. It needed an efficient
|
||
|
way of streaming events to the server, but also receiving
|
||
|
events from the server.
|
||
|
|
||
|
The solution went on to become HTML5. At the time of writing
|
||
|
it is being standardized.
|
||
|
|
||
|
EventSource
|
||
|
-----------
|
||
|
|
||
|
EventSource, sometimes also called Server-Sent Events, is a
|
||
|
technology allowing servers to push data to HTML5 applications.
|
||
|
|
||
|
EventSource is one-way communication channel from the server
|
||
|
to the client. The client has no means to talk to the server
|
||
|
other than by using HTTP requests.
|
||
|
|
||
|
It consists of a Javascript object allowing setting up an
|
||
|
EventSource connection to the server, and a very small protocol
|
||
|
for sending events to the client on top of the HTTP/1.1
|
||
|
connection.
|
||
|
|
||
|
EventSource is a lightweight solution that only works for
|
||
|
UTF-8 encoded text data. Binary data and text data encoded
|
||
|
differently are not allowed by the protocol. A heavier but
|
||
|
more generic approach can be found in Websocket.
|
||
|
|
||
|
Websocket
|
||
|
---------
|
||
|
|
||
|
Websocket is a protocol built on top of HTTP/1.1 that provides
|
||
|
a two-ways communication channel between the client and the
|
||
|
server. Communication is asynchronous and can occur concurrently.
|
||
|
|
||
|
It consists of a Javascript object allowing setting up a
|
||
|
Websocket connection to the server, and a binary based
|
||
|
protocol for sending data to the server or the client.
|
||
|
|
||
|
Websocket connections can transfer either UTF-8 encoded text
|
||
|
data or binary data. The protocol also includes support for
|
||
|
implementing a ping/pong mechanism, allowing the server and
|
||
|
the client to have more confidence that the connection is still
|
||
|
alive.
|
||
|
|
||
|
A Websocket connection can be used to transfer any kind of data,
|
||
|
small or big, text or binary. Because of this Websocket is
|
||
|
sometimes used for communication between systems.
|
||
|
|
||
|
SPDY
|
||
|
----
|
||
|
|
||
|
SPDY is an attempt to reduce page loading time by opening a
|
||
|
single connection per server, keeping it open for subsequent
|
||
|
requests, and also by compressing the HTTP headers to reduce
|
||
|
the size of requests.
|
||
|
|
||
|
SPDY is compatible with HTTP/1.1 semantics, and is actually
|
||
|
just a different way of performing HTTP requests and responses,
|
||
|
by using binary frames instead of a text-based protocol.
|
||
|
SPDY also allows the server to send responses without needing
|
||
|
a request to exist, essentially enabling server push.
|
||
|
|
||
|
SPDY is an experiment that has proven successful and is used
|
||
|
as the basis for the HTTP/2.0 standard.
|
||
|
|
||
|
Browsers make use of TLS Next Protocol Negotiation to upgrade
|
||
|
to a SPDY connection seamlessly if the protocol supports it.
|
||
|
|
||
|
The protocol itself has a few shortcomings which are being
|
||
|
fixed in HTTP/2.0.
|
||
|
|
||
|
HTTP/2.0
|
||
|
--------
|
||
|
|
||
|
HTTP/2.0 is the long-awaited update to the HTTP/1.1 protocol.
|
||
|
It is based on SPDY although a lot has been improved at the
|
||
|
time of writing.
|
||
|
|
||
|
HTTP/2.0 is an asynchronous two-ways communication channel
|
||
|
between two endpoints.
|
||
|
|
||
|
It is planned to be ready late 2014.
|