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

Step 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?

Summary

We talked about servers, HTTP responses and the languages of the web.

I'm done!

I will gladly answer any questions that are not too difficult or require much thought. Thanks a lot!