Rich, Real-time Mobile User Experiences @Devoxx UK

@andyp1per#RealTimeMobile
Delivering Rich, Real-Time Mobile User Experiences
Dr Andy Piper
Push Technology Ltd.
@andyp1per
www.pushtechnology.com

Delivering Rich, Real-Time Mobile User
Experiences
• Dr Andy Piper
• CTO at Push Technology
• Ex-BEA/Oracle
• Architect for WebLogic Server Core
• Architect and then Engineering Director for Oracle Event Processing
• Spring contributor (Spring DM) and Author
• Contributed to many standards – OMG, JCP, OSGi Alliance
• PhD, Cambridge, Distributed Systems
• MBA, Warwick Business School

What we do
Software that enables rich real-time user experiences,
where the Right Content is delivered to the Right User,
at the Right Time, on any device, platform or application,
regardless of connectivity or location.

Introduction
• My nightmare – the app that sometimes works
• Why is it frustrating?

The problem with mobile
10Gbps pipe, reliable 99.9999%
Dedicated Network
2-50Mbps pipe
Internet
Unreliable speed
0.5-4Mbps pipe
Mobile Network
Unreliable speed latency

If only all applications worked like this…

@YourTwitterHandle@andyp1per#RealTimeMobile
D
em
o
http://demo.pushtechnology.com/demos/draw/

Why does it work?
• We want UIs that engage us
• Immediacy is key
• Interactivity is key
• Response is based on rapid, high fidelity inbound and outbound data flows
• We want Reactive applications!

The Righteous Reactive Triangle™
UIX
Data
Network

It’s all about the Network
• Interactive applications interact with something
• Its not all angry birds
• The quality of the interaction depends on connectivity and latency
• That data gets through
• The time it takes
• The time to process
• That it returns
• The time to return

It’s all about the Data
• The network is a precious, uncontrolled resource
• What you can control is how much you use
• How much you use depends on
• How much data you transmit
• How frequently you transmit it
• You may be able to cheat!
• Only deal with what you can see
• Data often has a time dimension
• The data value decay curve
• Its not just about what you can see
• But WHEN you can see it
Value
Time

It’s all about the User Experience
• Go Reactive!
• http://www.reactivemanifesto.org/
• Event-driven, scalable, resilient, responsive
• Latency over mobile networks (and the internet) is inevitable
• Asynchronous models hide latency
• Asynchronous models are better overall
• Although harder to implement

Introducing Velocity Voting – “Vloting™”
• Stream of control data from device
• Stream of feedback data from server
• Server calculates “velocity” of votes and aggregates results
• Aggregate results are pushed back to devices

D
em
o
http://demo.pushtechnology.com/devoxx

Reactive UI frameworks
• Vue - http://vuejs.org/
• Component hierarchy communicates via events
• Data model declared as POJOs (JavaScript)
• Vue manages data model changes
• Async DOM updates
• Smart batching and compression
• Also considered
• React - http://facebook.github.io/react/
• Om - https://github.com/swannodette/om

Vue in Action

Key Features of the Vloting App
• Built reactively on an asynchronous, event-driven model
• Latency is obscured by asynchronicity
• Consider a plane
• Highly interactive both individually and in aggregate
• Real-time data flowing in both directions
• Asynchronous is key

@YourTwitterHandle#DVXFR14{session hashtag} @andyp1per#RealTimeMobile
How Do we Optimize the Experience?

Optimize the network?

Mobile throughput
Technology Download rate (bit/s) Upload rate (bit/s) Download rate (byte/s) Upload rate (byte/s)
GSM CSD (2G) 14.4 kbit/s[18]
14.4 kbit/s 1.8 kB/s 1.8 kB/s
HSCSD 57.6 kbit/s 14.4 kbit/s 5.4 kB/s 1.8 kB/s
GPRS (2.5G) 57.6 kbit/s 28.8 kbit/s 7.2 kB/s 3.6 kB/s
WiDEN 100 kbit/s 100 kbit/s 12.5 kB/s 12.5 kB/s
CDMA2000 1×RTT 153 kbit/s 153 kbit/s 18 kB/s 18 kB/s
EDGE (2.75G) (type 1 MS) 236.8 kbit/s 236.8 kbit/s 29.6 kB/s 29.6 kB/s
UMTS 3G 384 kbit/s 384 kbit/s 48 kB/s 48 kB/s
EDGE (type 2 MS) 473.6 kbit/s 473.6 kbit/s 59.2 kB/s 59.2 kB/s
EDGE Evolution (type 1 MS) 1,184 kbit/s 474 kbit/s 148 kB/s 59 kB/s
EDGE Evolution (type 2 MS) 1,894 kbit/s 947 kbit/s 237 kB/s 118 kB/s
1×EV-DO rev. 0 2,457 kbit/s 153 kbit/s 307.2 kB/s 19 kB/s
1×EV-DO rev. A 3.1 Mbit/s 1.8 Mbit/s 397 kB/s 230 kB/s
1×EV-DO rev. B 14.7 Mbit/s 5.4 Mbit/s 1,837 kB/s 675 kB/s
HSPA (3.5G) 13.98 Mbit/s 5.760 Mbit/s 1,706 kB/s 720 kB/s
4×EV-DO Enhancements (2×2 MIMO) 34.4 Mbit/s 12.4 Mbit/s 4.3 MB/s 1.55 MB/s
HSPA+ (2×2 MIMO) 42 Mbit/s 11.5 Mbit/s 5.25 MB/s 1.437 MB/s
15×EV-DO rev. B 73.5 Mbit/s 27 Mbit/s 9.2 MB/s 3.375 MB/s
UMB (2×2 MIMO) 140 Mbit/s 34 Mbit/s 17.5 MB/s 4.250 MB/s
LTE (2×2 MIMO) 173 Mbit/s 58 Mbit/s 21.625 MB/s 7.25 MB/s
UMB (4×4 MIMO) 280 Mbit/s 68 Mbit/s 35 MB/s 8.5 MB/s
EV-DO rev. C 280 Mbit/s 75 Mbit/s 35 MB/s 9 MB/s
LTE (4×4 MIMO) 326 Mbit/s 86 Mbit/s 40.750 MB/s 10.750 MB/s

Mobile latency
LTE latency in ms vs latencies experienced on other connection types (smaller is better)
151
629
212 172
98

Optimize the network?
• You can’t!
• Bandwidth is always limited and costly
• Latency is often poor

Optimize the data?
• Small is beautiful
• Prefer compact binary protocols
• HTTP not great (~300+ bytes/message), XML awful
• STOMP – ~100+ bytes/message
• COAP – ~4+ bytes/message
• MQTT – ~10+ bytes/message
• Binary protocols also happen to be faster – scale better
• Serialization is the killer – both for performance and the battery
• Protobuf, SBE, dpt
• Chatty protocols also poor - setup costs can be high
• Burst data in large chunks - reduces TCP/IP header cost

Making data smaller
• Information dense
• Don’t send the same information more than once
• Only send differences – snapshot-delta
• Minimum viable encoding
• Interoperability should not be a concern
• Mobile applications are an extension of the server
• Controlling both ends is important
• Coordinate optimizations

Information Density - Snapshot-delta

Deltas in Action
50% Data Reduction

Making data smaller
• Send less
• Just because you have data doesn’t mean you should send it
• Just because you have bandwidth doesn’t mean you should use it
• Throttle based on ability to consume
• Both device and human
• Throttling reduces data costs
• Throttling conserves bandwidth
• Being reactive means only sending data when you need to
• Much more efficient

What happens when the network lets you down?
• It WILL let you down
• Insufficient bandwidth
• Inconsistent bandwidth
• High latency
• Loss of network on a regular basis
• You can’t optimize but you can respond
• Go Reactive!
• You must respond to the conditions of the network
• “Mobile sympathy™”

Responding to the network
• You must get feedback – but how?
• Instrumentation is key
• What, when, how much?
• Use any and every means to understand the network conditions
• TCP is your friend!
• Reliable in the face of congestion and packet loss
• Fast connection loss detection
• Back pressure is informative

Responding to feedback
• Need in-memory working set
• Queue / buffer on the server
• Availability of the data may not match the network availability
• Fill the queue at the speed of data availability
• Drain the queue at the speed of the network
• Queuing also copes nicely with network loss – replay queue at reconnection
• Queuing has to be per-client – not all connections created equal
• Maps well to a lock-free architecture
• You need a really good queue!
• Disruptor - http://lmax-exchange.github.io/disruptor/
• JCTools - https://github.com/JCTools/JCTools

Problems with queuing
• Data in the queue is memory overhead
• Data in the queue is naturally stale
• The speed of data availability may be roughly what you want

Optimizing queuing - memory
• Store per-client references not messages
• Share messages as much as possible
• Garbage collection remove when all references expired
• Sharing references also reduces copying
• Memory churn can be a huge problem in high velocity systems
• Vital that messages are immutable – otherwise you have to mediate access
• Locking will kill you

Optimizing queuing – timeliness
• What do you do about stale data?
• Revolves around whether it is important
• If every message counts then you have no choice but to deliver
• Snapshot-delta means final state is dependent on initial conditions and
changes
• But changes != All deltas
• S + D1 + D2 – D1 = S + D2
• Why send D1 – D1 as it contributes nothing?
• Delete messages that contribute nothing
• Remove duplicates
• Merge multiple deltas into single delta
• Conflation

Optimizing queuing - Demo

Optimize the User Experience?

Rich to richer User Experiences
• Real-time allows user experiences that would not otherwise be possible
• Truly rich experiences are contextual
• Contextual data often originates from the device itself
• Location
• Movement
• etc.
• Contextual information often requires access to the native capabilities of the
device
• Hard to access from JavaScript
• Apache Cordova is a framework that gives JavaScript access to native
capabilities

Apache Cordova
• Develop html/css/js apps for mobile platforms
• https://cordova.apache.org
• Run as a native (hybrid) app
• iOS, Android, Windows Phone, Blackberry, and more
• Native Web View displays the html/css/js code
• Interface with native components
• Accelerometer, Compass, GPS, etc.
• Simple command line interface
• Run on device (even iOS!) from a single command
• cordova run —device [ios|android|…]
• Largely for testing
• Deployment/packaging from command line
• Easy to use external js libraries (like Diffusion JS Client)

Putting it all together

D
em
o
http://demo.pushtechnology.com/flights/

Other considerations
• Like the network, device capabilities are not something necessarily to be
accessed
• Even though you can
• Battery-life is a killer
• Only want to access information you need at the fidelity you need it
• High precision location information is power intensive
• Throttling and “good enough” metrics are key

Sum
m
ar
y

Conclusion
• Rich, real-time experiences can be provided on mobile platforms through
• Data optimization
• Network optimization
• Reactive interfaces
• Contextualization
• Good experiences are dictated as much by what you don’t do as what you do
do
• Products and frameworks can take the pain out of development
• Cordova
• Diffusion

Q
&
A

Rich, Real-time Mobile User Experiences @Devoxx UK

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Rich, Real-time Mobile User Experiences @Devoxx UK

Similar to Rich, Real-time Mobile User Experiences @Devoxx UK (20)

Recently uploaded

Recently uploaded (20)

Rich, Real-time Mobile User Experiences @Devoxx UK

Editor's Notes