Network

1,032 views
828 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,032
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Network

  1. 1. Mobile Networks Understanding communication layer for web and mobile
  2. 2. Agenda • Networking basics • How mobile networks work • Optimising for mobile networks • Other HTTP/1.x optimisations • Browser APIs and protocols: XHR, SSE, WebSockets
  3. 3. Why Do You Care ? • How does network affect your application?
  4. 4. Why Do You Care ? • Speed: How fast can I deliver content to a user ? • Battery: What network operations affect battery life ? • Cost: Is connection metered ?
  5. 5. Let’s start with “speed” “ eb page to load in 2 consumer s expect a w 47% of seconds or less. ”
  6. 6. Let’s start with “speed” “ net user s say 
 3% of mobile inter 7 red a website
 they’ve encounte that too slow to load. that was ”
  7. 7. Let’s start with “speed” “ -Load Can Cause ond Delay In Page Just One Sec r Conver sions Loss In Custome 7% ”
  8. 8. How load times affect conversion • Glasses direct measured
  9. 9. How load times affect conversion • Wallmart measured
  10. 10. How load times affect conversion • Strangeloop measured
  11. 11. How load times affect conversion • Google measured Type Of Delay Delay (ms) Duration (weeks) Impact Pre Header 50 4 - Pre Header 100 4 -0.2% Post Header 200 6 -0.59% Post Header 400 6 -0.59%
  12. 12. Speed: You should care • Load times affects: • Bounce rate • Time on site • Conversion • Satisfaction
  13. 13. Q&A
  14. 14. Network speed
  15. 15. Bandwidth is growing
  16. 16. Bandwidth Considerations • For most applications, bandwidth is not an issue • HSPA+ (2008) : • Up to 84Mbit/s down link • Up to 10.8Mbit/s up link
  17. 17. Latency, on the other hand… • Latency: • is bound by the speed of light • is not expected to grow dramatically in coming years • Has drastic effect on applications that transfer small amounts of data
  18. 18. Latency vs. Bandwidth
  19. 19. Latency Upper Bound • Latency is bound by the speed of light Time: light in Time: light in vacuum finer Route Distance RTT New York to London 5,585km 19ms 28ms 56ms New York to Sidney 15,998km 53ms 80ms 160ms
  20. 20. In practice • Latency is much higher • Distance is not air line • Affected by network delays
  21. 21. Demo • Checking latency with traceroute • Discussion: How would you reduce latency?
  22. 22. Q&A
  23. 23. Transmission Control Protocol (TCP)
  24. 24. TCP/IP Network Basics • IP provides host-to-host routing • TCP provides application-to-application reliable channel
  25. 25. TCP/IP Network Basics
  26. 26. TCP and network speed • TCP Handshake • TCP congestion control • Head of line blocking
  27. 27. TCP Handshake
  28. 28. TCP Handshake implication • Each new connection requires a full round trip before data can be sent • => New TCP connections are expensive
  29. 29. TCP Congestion control • When a packet is not ACKed after a retransmission interval, the host resends it • What happens if RTT > retransmission interval ?
  30. 30. TCP Congestion Host A Host B
  31. 31. TCP Slow Start • cwnd variable on the server controls how many packets can be “in flight” at any given time • Ack => cwnd++
  32. 32. TCP Slow Start cwnd = 4 Ack 1 cwnd = 5
  33. 33. TCP Slow Start: Quiz • Assuming initial cwnd = 4 • Roundtrip time 56 ms (New York -> London) • TCP packet size is 1460 bytes • How much time do you need to get a 64kb throughput ?
  34. 34. TCP Slow Start • 65,535 / 1460 =~ 45 packets • We need to get 45 packets in flight to reach 64kb • Remember cwnd doubles each round trip
  35. 35. TCP Slow Start • cwnd values: 4 => 8 => 16 => 32 => 64 • 4 rountrips * 56ms = 224 ms
  36. 36. TCP Slow Start
  37. 37. Q&A
  38. 38. Head of line blocking • Host A sends 5 TCP packets: a1, a2, a3, a4, a5 • Packets a2-a5 reach in time • Packet a1 dropped by an intermediate router and has to be resent • How is your application affected?
  39. 39. Head of line blocking Process File transfer Video chat Music streaming Web page Effect of head-of-line blocking
  40. 40. Head of line blocking Process Effect of head-of-line blocking File transfer None. App has nothing to do with a partial Video chat Jitter Music streaming It depends. Requires buffering or jitters Web page Suffers from both HTTP and TCP HOL
  41. 41. TCP Optimisations: Server • Increase cwnd • Disable slow-start after idle
  42. 42. TCP Optimisations: App • Reuse existing connections as much as possible • Aggregate messages • Use a CDN • Use compression
  43. 43. Q&A
  44. 44. Mobile Networks
  45. 45. Types of Mobile Networks Type Applications Standards Personal area network (PAN) Cable replacements Bluetooth, NFC Local area network (LAN) Wireless extension of network 802.11 (WiFi) Metropolitan area network (MAN) Wireless inter network connectivity 802.15 (WiMax) Wide area network (WAN) Wireless network access Cellular (UMTS, LTE,…)
  46. 46. WiFi Attributes • No bandwidth or latency guarantee • WiFi access is usually un-metered
  47. 47. Leveraging WiFi • Use WiFi to download large files or stream data • Prompt user to switch to wifi when applicable
  48. 48. Leveraging WiFi • Detect WiFi or 3G: • iOS: https://developer.apple.com/library/ios/ samplecode/Reachability/Listings/ Reachability_Reachability_m.html • Android: https://gist.github.com/emil2k/5130324
  49. 49. Leveraging WiFi • Adapt to variable bandwidth • Quiz: • What can cause bandwidth to vary? • How does variable bandwidth affect video streaming app ?
  50. 50. Leveraging WiFi • When streaming video, we need to detect best bitrate for a connection • Quiz: How would you adapt to varying bandwidth in a video streaming app?
  51. 51. Adaptive Bitrate Streaming • Encode each segment for multiple bitrates • Netflix has over 120 different versions for each stream
  52. 52. Q&A
  53. 53. Cellular Networks
  54. 54. Cellular Attributes • Varying infrastructure (generations) lead to varying bandwidth and latencies • Battery is an issue • Data is an issue
  55. 55. Mobile Gs Generation Data Rate Latency 2G 100-400 Kbit/s 300-1,000 ms 3G 0.5-5 Mbit/s 100-500 ms 4G 1-50 Mbit/s < 100 ms
  56. 56. Mobile Network • What you should expect: • Network infrastructure is changing slow • 2G networks are still around (and will be) • 3G networks are still around (and will be) • 3.5G, 3.75G, 3.9G are all around • 4G
  57. 57. Mobile Is Different
  58. 58. RRC • Radio Resource Controller allows devices to put their radio to sleep • It instructs a device when to speak, and when to listen
  59. 59. RRC State Machine
  60. 60. Quiz • When listening to music, Pandora wants to know how long you listen • Here’s what they did: • Send entire song to user when user starts to play • During playback, send periodic updates to Pandora server • Describe RRC state changes • How is battery affected ?
  61. 61. Short DRX idle Long DRX Data Transfer Data Transfer Power Periodic Updates and Mobile
  62. 62. Periodic Updates and Mobile Short DRX idle Long DRX Data Transfer Data Transfer Power Energy tail
  63. 63. Periodic Updates and Mobile • Energy tails waste power • For Pandora: 46% of battery consumption to transfer 0.2% of total bytes • What can Pandora do ?
  64. 64. Periodic Updates and Mobile • A better solution: • save data on client and send it all aggregated in a later time
  65. 65. Q&A
  66. 66. Routing In Cellular Network
  67. 67. Routing In Cellular Network • PGW (Packet Gateway) acts like a NAT • It assigns IP address to a mobile device • It keeps TCP connection alive when mobile device moves
  68. 68. Routing In Cellular Network • PCRF (Policy and Charging Rules Function) instructs PGW how to assign addresses
  69. 69. • SGW (Service Gateway) routes all data to the mobile device • MME (Mobility Management Entity) keeps track of each device and its current cell tower
  70. 70. Other Considerations • Latency is bad when device was idle • Bandwidth is a big issue for carriers
  71. 71. Cellular Networks Optimisations
  72. 72. Save Battery • Eliminate periodic and inefficient data transfers • Defer non-critical requests until radio is active • Eliminate application keep-alives
  73. 73. Anticipate Latency • 3G latency 200-3,500 ms • Decouple user interactions from network • Burst data and return to idle
  74. 74. Save Bandwidth • Consider offloading to WiFi if possible • Cache data locally • Always consider offline • Plan and test for slow network
  75. 75. Q&A
  76. 76. Optimising for the web Simple HTTP techniques to optimise mobile web access
  77. 77. HTTP Basics • Verify using HTTP 1.1 and Keepalive • Verify using GZip compression • Can use chrome or:
 
 curl -I --compressed http://yoursite.com
  78. 78. CSS Sprites
  79. 79. Use the best image size
  80. 80. Avoid Redirects at all costs • Redirects add another request but with no value • Worst kind: Mobile Redirects • Demo: d.co.il
  81. 81. Better Way: Use smart banners • Offer to download the app from within the page <meta name="apple-itunes-app" content="app-id=366977202">
  82. 82. Use caches to reduce requests File size doesn’t matter
  83. 83. Use caches to reduce requests HTTP 1.0 Had an Expires header:
 • 
 Expires: Thu, 15 Apr 2010 20:00:00 GMT HTTP 1.1 Added Cache-Control header:
 • 
 Cache-Control: max-age=315360000
  84. 84. HTTP 1.1 Pipelining
  85. 85. HTTP 1.1 Pipelining • Send multiple requests not waiting for responses • HOL blocking can occur • Fewer round-trips
  86. 86. HTTP 1.1 Pipelining
  87. 87. HTTP 1.1 Pipelining • Supported browsers: • Android • Opera
  88. 88. Optimising for Pipelining • Make sure web server supports it (probably does) • Serve slow (dynamic) resources from a different domain than static resources
  89. 89. Q&A
  90. 90. Browser APIs and Protocols • XMLHttpRequest • Server Sent Events • Web Sockets
  91. 91. XHR • XMLHttpRequest began on IE as part of MSXML • Script data transfers via JavaScript
  92. 92. XHR in use • Get partial data after initial page load • Other uses (not optimal): • Polling • Resumable Upload
  93. 93. XHR Loading data • Example: • Initial page has a list of products • User clicks on a product • XHR is used to get product info and inject to page
  94. 94. XHR Code var xhr = new XMLHttpRequest();
 xhr.open('GET', 'info.json');
 xhr.onload = function(e) {
 // handle response data
 if (xhr.status != 200) return;
 
 var info = JSON.parse(xhr.responseText);
 document.querySelector('h2').innerHTML = info.name;
 document.querySelector('.bio').innerHTML = info.biography;
 };
 
 xhr.send();

  95. 95. XHR Polling • XHR provides a simple method to get server events • Two options: • Interval polling • Long polling
  96. 96. XHR Polling • Quiz: 
 In regards to mobile battery life - which polling method would you prefer ?
  97. 97. XHR Polling Answer:
 It depends :)
 • 
 Interval polling keeps radio active, but aggregates events
 
 Long polling is not a good idea in case of frequent events
  98. 98. XHR Upload • Use JavaScript to slice buffer before sending • Send small fragments in a loop • Resend only failed fragments
  99. 99. XHR Upload Demo Code while ( start < SIZE ) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/upload');
 xhr.onload = function() { /* ... */ };
 xhr.setRequestHeader('Content-Range', " start + '-' + end + '/' + SIZE);
 xhr.send(blob.slice(start, end));
 start = end;
 end = start + BYTES_PER_CHUNK;
 }" Usable JS library: resumablejs.com
  100. 100. Server Sent Events GET /events Client Server
  101. 101. Server Architecture Socket Server mq / db Application Server http Client Browser
  102. 102. Server Architecture • Most web servers are optimised for short lived client connections (HTTP) • Socket server is optimised for maintaining many (mostly) idle connections
  103. 103. SSE Protocol • Each line starts with a data: prefix • Can also specify other event attributes
  104. 104. SSE Protocol 1 2 3 4 5 data: data: data: data: " {n" "msg": "hello world",n" "id": 12345n" }nn"
  105. 105. SSE Protocol • Can specify event name • Browser can assign different handler for each event name 1 2 3 4 5 data: {"msg": "First message"}nn" event: userlogonn" data: {"username": "John123"}nn" event: updaten" data: {"username": "John123", "emotion": "happy"}nn"
  106. 106. Demo Code: stomp • Demo • Socket Server + Application Server: Mojolicious (perl) • MQ • Sending random text to clients
  107. 107. Web Sockets • Bidirectional text and binary socket • As close to raw socket as can get
  108. 108. Web Sockets Attributes • Same origin policy • Message oriented
  109. 109. WebSocket API 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var connection = new WebSocket('ws://html5rocks.websocket.org/echo');" " // When the connection is open, send some data to the server" connection.onopen = function () {" connection.send('Ping'); // Send the message 'Ping' to the server" };" " // Log errors" connection.onerror = function (error) {" console.log('WebSocket Error ' + error);" };" " // Log messages from the server" connection.onmessage = function (e) {" console.log('Server: ' + e.data);" };"
  110. 110. WebSockets Keep In Mind • No compression - if needed implement your own • TLS is recommended • For mobile: send in bursts
  111. 111. Socket.IO • A WebSocket Library • Maintains connected clients • Includes a JS library • Automatic fallback
  112. 112. Demo Code: Menotes • https://github.com/ynonp/menotes • Note taking angular app with sockets • Stack: • Application server: perl (catalyst) • Socket server: node • Message Queue: Rabbit MQ • Client: Angular.JS
  113. 113. Q&A
  114. 114. Thanks For Listening • Ynon Perek • http://ynonperek.com • ynon@ynonperek.com
  115. 115. Photos & Data From • World bandwidth (slide 15):
 http://techcrunch.com/2012/08/09/akamai-global-averagebroadband-speeds-up-by-25-u-s-up-29-to-6-7-mbps/ • Mobile Web (slide 76): http://www.flickr.com/photos/ khawkins04/8659736133/sizes/c/ • HTTP Pipielining (slide 84): http://en.wikipedia.org/wiki/ HTTP_pipelining • Illustrations: 123rf.com

×