Network

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.“ ”

73% of mobile internet users say

that they’ve encountered a website

that was too slow to load.“ ”

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

• Strangeloop measured

• 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

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

• Checking latency with traceroute

• Discussion: How would you reduce latency?

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

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

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?

Process Effect of head-of-line blocking

File transfer

Video chat

Music streaming

Web page

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

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

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

• 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

• 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

Short DRX

Long DRXidle

Periodic Updates and MobilePo

Short DRX

Long DRXidle

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

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

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

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

• Send multiple requests not waiting for responses

• HOL blocking can occur

• Fewer round-trips

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

Browser APIs and Protocols

• XMLHttpRequest

• Server Sent Events

• Web Sockets

• 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

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

Thanks For Listening

• Ynon Perek

• http://ynonperek.com

• ynon@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

Network

Technology