Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Web 200: Anatomy of a Request
John Britton
December 09, 2012
Technology
0
120
Web 200: Anatomy of a Request
What happens when you press "Go" in your browser?
John Britton
December 09, 2012
Tweet
Share
More Decks by John Britton
See All by John Britton
Marketing to Developers
johndbritton
6
1.7k
Stories from the GitHub Classroom: Changing Practice, one Pull Request at a Time
johndbritton
2
510
Ops for Everyone
johndbritton
33
7.6k
GitHub: Distributed, Asynchronous, and Self-directed
johndbritton
4
330
P2PU at Campus Party Mexico 2011
johndbritton
2
200
Other Decks in Technology
See All in Technology
Kubernetes Pod Probes
thockin
5
2.2k
【NGK2023S】 ノードエディタ形式の画像処理ツール「Image-Processing-Node-Editor」
kazuhitotakahashi
0
180
Kubernetes_EKSに入門してみる
toru_kubota
0
220
JAWS-UG AI/ML #15 - SageMaker Experimentsで始める機械学習モデルの実験管理
masatakashiwagi
0
520
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
220
PCI DSS に準拠したシステム開発
yutadayo
0
170
Cloudflare Workersで動くOG画像生成器
aiji42
1
430
DID/VCを用いた自己主権型アイデンティティの実現
sbtechnight
0
360
スタメンのLeSSの導入と 事業部全体を巻き込んだ アウトカム文化への道のり
uuushiro
2
3k
“Do you have a virtual router?” Discuss how to use virtual routers
line_developers
PRO
0
430
Dev Containers ことはじめ - 失敗から学ぶ開発環境運用法
streamwest1629
0
240
Airdrop for Open Source Projects
epicsdao
0
210
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
213
7.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
Visualization
eitanlees
128
12k
Done Done
chrislema
178
14k
Infographics Made Easy
chrislema
235
17k
Product Roadmaps are Hard
iamctodd
38
7.7k
4 Signs Your Business is Dying
shpigford
171
20k
Making Projects Easy
brettharned
102
4.8k
Making the Leap to Tech Lead
cromwellryan
116
7.6k
How GitHub (no longer) Works
holman
298
140k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Transcript
Web 200: Anatomy of a Request @johndbritton
How does this...
[enter]
...become this...
...on the internet?
Internet, how does it work?
• Driving a car • Shipping containers It’s all about
abstraction
Major players • HTTP • URI • Browser • Web
server • DNS • Operating system • Interface • Network • Router ! ! • ... among others
OSI Model • 7 Layers • We won’t cover everything
• Really boring • Required if you want some bogus certificates • Actually a useful concept
HTTP The language browsers speak
Client server model • Web page is a document •
User inputs http://example.com • The client (browser) makes a GET request • The server sends a response • The browser renders the page
URI • http://github.com/johndbritton • http - protocol • github.com -
domain • /johndbritton - resource
Request GET /johndbritton
Response <!DOCTYPE html> ...
More Requests GET /style.css GET /jquery.js GET /image.jpg GET /image2.jpg
...
More Responses (you get the idea)
Rendering • HTML - Structure • CSS - Style •
Javascript - Behavior
Telnet, Inspector, JSFiddle Let’s try them out
Browser - ONLY HTTP Doesn’t care about anything else
HTTP: methods / verbs • GET • POST • PUT
• DELETE • more: HEAD, PATCH, TRACE, OPTIONS, CONNECT
HTTP: responses • 1xx - informational • 2xx - success
• 3xx - redirect • 4xx - error • 5xx - server error
The webserver It speaks HTTP too
Two types of webapp • Static • Receive a request
• Find a file on disk • Respond with contents of the file • Dynamic • Receive a request • Run application logic • Return a dynamically generated response
DNS: name resolution Where do requests go?
github.com 207.97.227.239
Lookups are cached for improved performance
Possible cache hits • Local machine • Home router •
ISP • Upstream provider
No cache - worst case • 13 Root nameservers •
TLD nameserver • Authoritative nameserver • A record • IP address
dig github.com ; <<>> DiG 9.8.3-P1 <<>> github.com ... github.com.
2 IN A 207.97.227.239
Making a connection • Resolve name • Open a connection
• Speak HTTP
Network collection of nodes that can communicate directly
Interface connection from node to communication medium
IP address 0.0.0.0 - 255.255.255.255
Why 255? • 0 - 255 • binary, 8 bits
• 00000000 - 11111111 • 00000000.00000000.00000000.00000000 • 11111111.11111111.11111111.11111111
Network addresses • a.b.c.d/n (n = network mask / subnet)
• Private (non routable) networks • 10.0.0.0/8 • 172.16.0.0/12 • 192.168.0.0/16
Special addresses • 192.268.1.0/24 - network with subnet • 192.168.1.0
- network address • 192.168.1.255 - broadcast address
Network settings • Auto-configured via DHCP • IP: 192.168.1.101 •
Subnet Mask: 255.255.255.0 (/24) • Router: 192.168.1.1 • DNS Servers: 192.168.1.1
Network hardware • Hub - Dumb • Switch - Smarter
• Router - Smartest
Network protocols • Transport - chunks of data • TCP
• UDP • Routing - • RIP • OSPF
Transport • OS segments data, packages it up into packets
• TCP • Reliable - resend on transmission failure • UDP • Unreliable - send once
Routing • Routers connect networks, handle packets and don’t care
what’s inside • RIP • Distance vector (hop count) • OSPF • Open shortest path first (link weight)
whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239
NAT Network address translation
ifconfig 192.168.1.101 whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239
traceroute, nmap, wireshark if we have time