diff options
Diffstat (limited to 'docs/en/cowboy/2.0/guide/modern_web/index.html')
| -rw-r--r-- | docs/en/cowboy/2.0/guide/modern_web/index.html | 329 |
1 files changed, 329 insertions, 0 deletions
diff --git a/docs/en/cowboy/2.0/guide/modern_web/index.html b/docs/en/cowboy/2.0/guide/modern_web/index.html new file mode 100644 index 00000000..69761906 --- /dev/null +++ b/docs/en/cowboy/2.0/guide/modern_web/index.html @@ -0,0 +1,329 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="author" content="Loïc Hoguin based on a design from (Soft10) Pol Cámara"> + + <meta name="generator" content="Hugo 0.15" /> + + <title>Nine Nines: The modern Web</title> + + <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic' rel='stylesheet' type='text/css'> + + <link href="/css/bootstrap.min.css" rel="stylesheet"> + <link href="/css/99s.css" rel="stylesheet"> + + <link rel="shortcut icon" href="/img/ico/favicon.ico"> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/ico/apple-touch-icon-114.png"> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/ico/apple-touch-icon-72.png"> + <link rel="apple-touch-icon-precomposed" href="/img/ico/apple-touch-icon-57.png"> + + +</head> + + +<body class=""> + <header id="page-head"> + <div id="topbar" class="container"> + <div class="row"> + <div class="span2"> + <h1 id="logo"><a href="/" title="99s">99s</a></h1> + </div> + <div class="span10"> + + <div id="side-header"> + <nav> + <ul> + <li><a title="Hear my thoughts" href="/articles">Articles</a></li> + <li><a title="Watch my talks" href="/talks">Talks</a></li> + <li class="active"><a title="Read the docs" href="/docs">Documentation</a></li> + <li><a title="Request my services" href="/services">Consulting & Training</a></li> + </ul> + </nav> + <ul id="social"> + <li> + <a href="https://github.com/ninenines" title="Check my Github repositories"><img src="/img/ico_github.png" data-hover="/img/ico_github_alt.png" alt="Github"></a> + </li> + <li> + <a title="Keep in touch!" href="http://twitter.com/lhoguin"><img src="/img/ico_microblog.png" data-hover="/img/ico_microblog_alt.png"></a> + </li> + <li> + <a title="Contact me" href="mailto:[email protected]"><img src="/img/ico_mail.png" data-hover="/img/ico_mail_alt.png"></a> + </li> + </ul> + </div> + </div> + </div> + </div> + + +</header> + +<div id="contents" class="two_col"> +<div class="container"> +<div class="row"> +<div id="docs" class="span9 maincol"> + +<h1 class="lined-header"><span>The modern Web</span></h1> + +<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="sect1">
+<h2 id="_the_prehistoric_web">The prehistoric Web</h2>
+<div class="sectionbody">
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>Most improvements done in recent years focused on reducing
+this load time and reducing the latency of the requests.</p></div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_http_1_1">HTTP/1.1</h2>
+<div class="sectionbody">
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_rest">REST</h2>
+<div class="sectionbody">
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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 how they can be used.
+REST is also stateless. All requests contain the complete
+information necessary to perform the action.</p></div>
+<div class="paragraph"><p>HTTP/1.1 defines all the methods, headers and semantics required
+to implement RESTful systems.</p></div>
+<div class="paragraph"><p>REST is most often used when designing web application APIs
+which are generally meant to be used by executable code directly.</p></div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_xmlhttprequest">XmlHttpRequest</h2>
+<div class="sectionbody">
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_long_polling">Long-polling</h2>
+<div class="sectionbody">
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_html5">HTML5</h2>
+<div class="sectionbody">
+<div class="paragraph"><p>HTML5 is, of course, the HTML version after HTML4. But HTML5
+emerged to solve a specific problem: dynamic web applications.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>The solution went on to become HTML5. At the time of writing
+it is being standardized.</p></div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_eventsource">EventSource</h2>
+<div class="sectionbody">
+<div class="paragraph"><p>EventSource, sometimes also called Server-Sent Events, is a
+technology allowing servers to push data to HTML5 applications.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_websocket">Websocket</h2>
+<div class="sectionbody">
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+<div class="paragraph"><p>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.</p></div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_http_2">HTTP/2</h2>
+<div class="sectionbody">
+<div class="paragraph"><p>HTTP/2 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.</p></div>
+<div class="paragraph"><p>HTTP/2 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.
+HTTP/2 also allows the server to send extra responses following
+a request. This is meant to allow sending the resources
+associated with the request before the client requests them,
+saving latency when loading websites.</p></div>
+<div class="paragraph"><p>Browsers make use of TLS Application-Layer Protocol Negotiation
+extension to upgrade to an HTTP/2 connection seamlessly if the
+server supports it.</p></div>
+</div>
+</div>
+ + + +</div> + +<div class="span3 sidecol"> + + +<h3> + Cowboy + 2.0 + + User Guide +</h3> + +<ul> + + <li><a href="/docs/en/cowboy/2.0/guide">User Guide</a></li> + + + <li><a href="/docs/en/cowboy/2.0/manual">Function Reference</a></li> + + +</ul> + +<h4 id="docs-nav">Navigation</h4> + +<h4>Version select</h4> +<ul> + + + + <li><a href="/docs/en/cowboy/1.0/guide">1.0</a></li> + + <li><a href="/docs/en/cowboy/2.0/guide">2.0</a></li> + +</ul> + +</div> +</div> +</div> +</div> + + <footer> + <div class="container"> + <div class="row"> + <div class="span6"> + <p id="scroll-top"><a href="#">↑ Scroll to top</a></p> + <nav> + <ul> + <li><a href="mailto:[email protected]" title="Contact us">Contact us</a></li><li><a href="https://github.com/ninenines/ninenines.github.io" title="Github repository">Contribute to this site</a></li> + </ul> + </nav> + </div> + <div class="span6 credits"> + <p><img src="/img/footer_logo.png"></p> + <p>Copyright © Loïc Hoguin 2012-2016</p> + </div> + </div> + </div> + </footer> + + + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> + <script src="/js/bootstrap-carousel.js"></script> + <script src="/js/bootstrap-dropdown.js"></script> + <script src="/js/custom.js"></script> + </body> +</html> + + |