Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

  1. Web 200: Anatomy of a Request @johndbritton

  2. How does this...

  3. [enter]

  4. ...become this...

  5. ...on the internet?

  6. Internet, how does it work?

  7. • Driving a car • Shipping containers It’s all about

    abstraction

  8. Major players • HTTP • URI • Browser • Web

    server • DNS • Operating system • Interface • Network • Router ! ! • ... among others

  9. OSI Model • 7 Layers • We won’t cover everything

    • Really boring • Required if you want some bogus certificates • Actually a useful concept

  10. HTTP The language browsers speak

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

  12. URI • http://github.com/johndbritton • http - protocol • github.com -

    domain • /johndbritton - resource

  13. Request GET /johndbritton

  14. Response <!DOCTYPE html> ...

  15. More Requests GET /style.css GET /jquery.js GET /image.jpg GET /image2.jpg

    ...

  16. More Responses (you get the idea)

  17. Rendering • HTML - Structure • CSS - Style •

    Javascript - Behavior

  18. Telnet, Inspector, JSFiddle Let’s try them out

  19. Browser - ONLY HTTP Doesn’t care about anything else

  20. HTTP: methods / verbs • GET • POST • PUT

    • DELETE • more: HEAD, PATCH, TRACE, OPTIONS, CONNECT

  21. HTTP: responses • 1xx - informational • 2xx - success

    • 3xx - redirect • 4xx - error • 5xx - server error

  22. The webserver It speaks HTTP too

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

  24. DNS: name resolution Where do requests go?

  25. github.com 207.97.227.239

  26. Lookups are cached for improved performance

  27. Possible cache hits • Local machine • Home router •

    ISP • Upstream provider

  28. No cache - worst case • 13 Root nameservers •

    TLD nameserver • Authoritative nameserver • A record • IP address

  29. dig github.com ; <<>> DiG 9.8.3-P1 <<>> github.com ... github.com.

    2 IN A 207.97.227.239

  30. Making a connection • Resolve name • Open a connection

    • Speak HTTP

  31. Network collection of nodes that can communicate directly

  32. Interface connection from node to communication medium

  33. IP address 0.0.0.0 - 255.255.255.255

  34. Why 255? • 0 - 255 • binary, 8 bits

    • 00000000 - 11111111 • 00000000.00000000.00000000.00000000 • 11111111.11111111.11111111.11111111

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

  36. Special addresses • 192.268.1.0/24 - network with subnet • 192.168.1.0

    - network address • 192.168.1.255 - broadcast address

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

  38. Network hardware • Hub - Dumb • Switch - Smarter

    • Router - Smartest

  39. Network protocols • Transport - chunks of data • TCP

    • UDP • Routing - • RIP • OSPF

  40. Transport • OS segments data, packages it up into packets

    • TCP • Reliable - resend on transmission failure • UDP • Unreliable - send once

  41. 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)

  42. whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239

  43. NAT Network address translation

  44. ifconfig 192.168.1.101 whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239

  45. traceroute, nmap, wireshark if we have time