network
DESCRIPTION
TRANSCRIPT
Mobile NetworksUnderstanding communication layer for web and mobile
Agenda• Networking basics
• How mobile networks work
• Optimising for mobile networks
• Other HTTP/1.x optimisations
• Browser APIs and protocols: XHR, SSE, WebSockets
Why Do You Care ?
• How does network affect your application?
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 ?
Let’s start with “speed”
47% of consumers expect a web page to load in 2
seconds or less.“ ”
Let’s start with “speed”
73% of mobile internet users say
that they’ve encountered a website
that was too slow to load.“ ”
Let’s start with “speed”
Just One Second Delay In Page-Load Can Cause
7% Loss In Customer Conversions“ ”
How load times affect conversion
• Glasses direct measured
How load times affect conversion• Wallmart measured
How load times affect conversion
• Strangeloop measured
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%
Speed: You should care• Load times affects:
• Bounce rate
• Time on site
• Conversion
• Satisfaction
Q & A
Network speed
Bandwidth is growing
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
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
Latency vs. Bandwidth
Latency Upper Bound
• Latency is bound by the speed of light
Route Distance Time: light in vacuum
Time: light in finer RTT
New York to London 5,585km 19ms 28ms 56ms
New York to Sidney 15,998km 53ms 80ms 160ms
In practice
• Latency is much higher
• Distance is not air line
• Affected by network delays
Demo
• Checking latency with traceroute
• Discussion: How would you reduce latency?
Q & A
Transmission Control Protocol (TCP)
TCP/IP Network Basics
• IP provides host-to-host routing
• TCP provides application-to-application reliable channel
TCP/IP Network Basics
TCP and network speed
• TCP Handshake
• TCP congestion control
• Head of line blocking
TCP Handshake
TCP Handshake implication
• Each new connection requires a full round trip before data can be sent
• => New TCP connections are expensive
TCP Congestion control
• When a packet is not ACKed after a retransmission interval, the host resends it
• What happens if RTT > retransmission interval ?
TCP Congestion
Host A Host B
TCP Slow Start
• cwnd variable on the server controls how many packets can be “in flight” at any given time
• Ack => cwnd++
TCP Slow Start
Ack 1
cwnd = 4
cwnd = 5
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 ?
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
TCP Slow Start
• cwnd values: 4 => 8 => 16 => 32 => 64
• 4 rountrips * 56ms = 224 ms
TCP Slow Start
Q & A
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?
Head of line blocking
Process Effect of head-of-line blocking
File transfer
Video chat
Music streaming
Web page
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
TCP Optimisations: Server
• Increase cwnd
• Disable slow-start after idle
TCP Optimisations: App
• Reuse existing connections as much as possible
• Aggregate messages
• Use a CDN
• Use compression
Q & A
Mobile Networks
Types of Mobile NetworksType 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,…)
WiFi Attributes
• No bandwidth or latency guarantee
• WiFi access is usually un-metered
Leveraging WiFi
• Use WiFi to download large files or stream data
• Prompt user to switch to wifi when applicable
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
Leveraging WiFi
• Adapt to variable bandwidth
• Quiz:
• What can cause bandwidth to vary?
• How does variable bandwidth affect video streaming app ?
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?
Adaptive Bitrate Streaming
• Encode each segment for multiple bitrates
• Netflix has over 120 different versions for each stream
Q & A
Cellular Networks
Cellular Attributes
• Varying infrastructure (generations) lead to varying bandwidth and latencies
• Battery is an issue
• Data is an issue
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
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
Mobile Is Different
RRC
• Radio Resource Controller allows devices to put their radio to sleep
• It instructs a device when to speak, and when to listen
RRC State Machine
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 ?
Periodic Updates and MobilePo
wer
Dat
a Tra
nsfe
r
Short DRX
Long DRXidle
Dat
a Tra
nsfe
r
Periodic Updates and MobilePo
wer
Dat
a Tra
nsfe
r
Short DRX
Long DRXidle
Dat
a Tra
nsfe
r
Energy tail
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 ?
Periodic Updates and Mobile
• A better solution:
• save data on client and send it all aggregated in a later time
Q & A
Routing In Cellular Network
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
Routing In Cellular Network
• PCRF (Policy and Charging Rules Function) instructs PGW how to assign addresses
• SGW (Service Gateway) routes all data to the mobile device
• MME (Mobility Management Entity) keeps track of each device and its current cell tower
Other Considerations
• Latency is bad when device was idle
• Bandwidth is a big issue for carriers
Cellular Networks Optimisations
Save Battery
• Eliminate periodic and inefficient data transfers
• Defer non-critical requests until radio is active
• Eliminate application keep-alives
Anticipate Latency
• 3G latency 200-3,500 ms
• Decouple user interactions from network
• Burst data and return to idle
Save Bandwidth
• Consider offloading to WiFi if possible
• Cache data locally
• Always consider offline
• Plan and test for slow network
Q & A
Optimising for the web
Simple HTTP techniques to optimise mobile web access
HTTP Basics
• Verify using HTTP 1.1 and Keepalive
• Verify using GZip compression
• Can use chrome or:curl -I --compressed http://yoursite.com
CSS Sprites
Use the best image size
Avoid Redirects at all costs
• Redirects add another request but with no value
• Worst kind: Mobile Redirects
• Demo: d.co.il
Better Way: Use smart banners
• Offer to download the app from within the page
<meta name="apple-itunes-app" content="app-id=366977202">
Use caches to reduce requestsFile size doesn’t matter
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
HTTP 1.1 Pipelining
HTTP 1.1 Pipelining
• Send multiple requests not waiting for responses
• HOL blocking can occur
• Fewer round-trips
HTTP 1.1 Pipelining
HTTP 1.1 Pipelining
• Supported browsers:
• Android
• Opera
Optimising for Pipelining
• Make sure web server supports it (probably does)
• Serve slow (dynamic) resources from a different domain than static resources
Q & A
Browser APIs and Protocols
• XMLHttpRequest
• Server Sent Events
• Web Sockets
XHR
• XMLHttpRequest began on IE as part of MSXML
• Script data transfers via JavaScript
XHR in use
• Get partial data after initial page load
• Other uses (not optimal):
• Polling
• Resumable Upload
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
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();
XHR Polling
• XHR provides a simple method to get server events
• Two options:
• Interval polling
• Long polling
XHR Polling
• Quiz: In regards to mobile battery life - which polling method would you prefer ?
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
XHR Upload
• Use JavaScript to slice buffer before sending
• Send small fragments in a loop
• Resend only failed fragments
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
Server Sent Events
Client Server
GET /events
Server Architecture
Socket Server Application Server
Client Browser
mq / db
http
Server Architecture
• Most web servers are optimised for short lived client connections (HTTP)
• Socket server is optimised for maintaining many (mostly) idle connections
SSE Protocol
• Each line starts with a data: prefix
• Can also specify other event attributes
SSE Protocol
1 data: {\n"2 data: "msg": "hello world",\n"3 data: "id": 12345\n"4 data: }\n\n"5 "
SSE Protocol
• Can specify event name
• Browser can assign different handler for each event name
1 data: {"msg": "First message"}\n\n"2 event: userlogon\n"3 data: {"username": "John123"}\n\n"4 event: update\n"5 data: {"username": "John123", "emotion": "happy"}\n\n"
Demo Code: stomp
• Demo
• Socket Server + Application Server : Mojolicious (perl)
• MQ
• Sending random text to clients
Web Sockets
• Bidirectional text and binary socket
• As close to raw socket as can get
Web Sockets Attributes
• Same origin policy
• Message oriented
WebSocket API 1 var connection = new WebSocket('ws://html5rocks.websocket.org/echo');" 2 " 3 // When the connection is open, send some data to the server" 4 connection.onopen = function () {" 5 connection.send('Ping'); // Send the message 'Ping' to the server" 6 };" 7 " 8 // Log errors" 9 connection.onerror = function (error) {"10 console.log('WebSocket Error ' + error);"11 };"12 "13 // Log messages from the server"14 connection.onmessage = function (e) {"15 console.log('Server: ' + e.data);"16 };"
WebSockets Keep In Mind
• No compression - if needed implement your own
• TLS is recommended
• For mobile: send in bursts
Socket.IO
• A WebSocket Library
• Maintains connected clients
• Includes a JS library
• Automatic fallback
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
Q & A
Thanks For Listening
• Ynon Perek
• http://ynonperek.com
Photos & Data From• World bandwidth (slide 15):
http://techcrunch.com/2012/08/09/akamai-global-average-broadband-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