Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web 200: Anatomy of a Request
Search
John Britton
December 09, 2012
Technology
0
170
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
8
2.1k
Stories from the GitHub Classroom: Changing Practice, one Pull Request at a Time
johndbritton
3
600
Ops for Everyone
johndbritton
33
7.9k
GitHub: Distributed, Asynchronous, and Self-directed
johndbritton
4
370
P2PU at Campus Party Mexico 2011
johndbritton
2
240
Other Decks in Technology
See All in Technology
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
210
横断組織として考える共通DBの課題解決 〜 桃園の誓いアーキテクチャ 〜 / Addressing Shared Database Challenges as Cross-Team: “Peach Garden Oath” Architecture
4geru
0
180
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
240
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
290
タイミーのレコメンドにおける ABテストの運用
ozeshun
1
200
学術機関におけるID連携とOpenID Connect
fujie
0
300
再考 アクターモデル/ reconsider actor model
ytake
0
370
JEP 480: Structured Concurrency
aya_ebata
0
130
開発者の定量・定性データを組み合わせて開発者体験を把握するための取り組み
ham0215
1
160
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
210
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
140
LLVM/ASMを使った有限体の高速実装
herumi
0
120
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
Designing with Data
zakiwarfel
98
5k
Git: the NoSQL Database
bkeepers
PRO
425
64k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Happy Clients
brianwarren
96
6.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Ruby is Unlike a Banana
tanoku
96
11k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Speed Design
sergeychernyshev
22
430
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