AROUND THE WORLD IN 80MS
Alexis Michael
@alexismic
Workshop
~30 mins
Questions
~15 mins
It's good to know that it's not magic.
30000 feet – it's probably too close.
Data travels around the world at insane speeds,
theoretically limited by , the speed of light.
c
c
http://80ms.alexmic.net
http://
80ms.alexmic.net
The URL. It describes where and how to retrieve a "thing" in a network of computers.
http://
80ms.alexmic.net
The scheme. It tells a computer which protocol to use for retrieving
said "thing".
Uhm, a protocol?
A fancy shortcut for saying "a set of rules that two machines use in order to communicate in a standard way."
* The Web is using the HTTP protocol, hence "http://".
http://
80ms.alexmic.net
The domain. One or more readable words that represent said "thing" on the Internet.
The Internet?
Nope.
* Some say that ~40% of all Internet traffic goes through Google.
The Internet
A huge network of devices (~10 billion) that communicate using the Internet Protocol (IP).
* One of Google's IPs: 216.58.209.110
The World Wide Web
A way to distribute information built on top of the Internet. It uses the HTTP protocol for communication.
* Email and IM are also built on top of the Internet.
Domains – why bother?
They are easier for humans to remember and they allow a device to change IP address without affecting other devices talking to it.
Summary
We talked about URLs, domains,
HTTP, the Internet and the Web. Now let's get down to business.
The Business™
We will explore the journey from typing an address in your browser to a website appearing in front of your eyes. Boom.
Step 1: You type some things
Step 2: The browser searches for an IP address
Domain Name System (DNS): A global system of computers (nameservers) that governs domain names and translates domains into IP addresses.
Step 3: The browser creates an HTTP request
GET /around-the-world-in-80ms/ HTTP/1.1
Host: alexmic.net
Accept: application/json, text/javascript, */*; q=0.01
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,el;q=0.6,sv;q=0.4
Cookie: _ga=GA1.4.660367477.1393448603
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36Step 4: An epic journey begins
Internet, decentralized
By design, there is no central device that knows of all other devices.
* Much like the Postal Service.
Summary
We talked about keystrokes, HTTP requests and Internet routing. Next up, the server.
The server
It's yet another computer. It runs software that "serves" requests from other computers.
* Not necessarily HTTP requests!
What runs on a server computer?
Reply to a web request
A three step process. By the end, the server will have an HTTP response ready to be sent back to the network.
Step 1: The Web Server reads the HTTP request
Step 2: The App Server creates the content
Step 3: The Web Server creates an HTTP response
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Cache-Control: max-age=600
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Tue, 24 Mar 2015 20:01:38 GMT
Expires: Tue, 24 Mar 2015 20:11:38 GMT
Last-Modified: Sun, 22 Mar 2015 18:38:36 GMT
Server: GitHub.com
Transfer-Encoding: chunked
[THE CONTENT CREATED BY THE APP SERVER GOES HERE]The lang(s) of the Web
How does a browser know how to display a website? It's, yet another, standard!
HTML
Adds structure and semantics. Enhances regular text with "tags" which are machine-understandable.
CSS
Adds styling. Colours, positioning, dimensions, animations!
JavaScript
Adds interaction and logic. Clicks, mouse movements, timers, game logic etc.
An example webpage
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>#yolo</h1>
</body>
</html>
Finally! How does the browser render the website?
