Upload
andy-piper
View
231
Download
3
Embed Size (px)
DESCRIPTION
Rich, Real-time Mobile User Experiences @Devoxx UK My presentation at Devoxx UK on some ways to increase interactivty in mobile applications. Many of these techniques are embodied in Diffusion, Push Technology's premier data-distribution engine.
Citation preview
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Delivering Rich, Real-Time Mobile User ExperiencesDelivering Rich, Real-Time Mobile User Experiences
Dr Andy PiperPush Technology [email protected]
Dr Andy PiperPush Technology [email protected]
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Delivering Rich, Real-Time Mobile User ExperiencesDelivering 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
What we doWhat 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.
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
IntroductionIntroduction
• My nightmare – the app that sometimes works• Why is it frustrating?
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
The problem with mobileThe 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
If only all applications worked like this…If only all applications worked like this…
@YourTwitterHandle@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Demo
http://demo.pushtechnology.com/demos/draw/
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Why does it work?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!
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
The Righteous Reactive Triangle™The Righteous Reactive Triangle™
UIX
Data
Network
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
It’s all about the NetworkIt’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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
It’s all about the DataIt’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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
It’s all about the User ExperienceIt’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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Introducing Velocity Voting – “Vloting™”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
@YourTwitterHandle@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Demo
http://demo.pushtechnology.com/devoxx
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Reactive UI frameworksReactive 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Vue in ActionVue in Action
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Key Features of the Vloting AppKey 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@andyp1per#RealTimeMobile#RealTimeMobile
How Do we Optimize the Experience?
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Optimize the network?Optimize the network?
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Mobile throughputMobile throughputTechnology 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Mobile latencyMobile latency
LTE latency in ms vs latencies experienced on other connection types (smaller is better)
151
629
212 172
98
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Optimize the network?Optimize the network?• You can’t!• Bandwidth is always limited and costly• Latency is often poor
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Optimize the data?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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Making data smallerMaking 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Information Density - Snapshot-deltaInformation Density - Snapshot-delta
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Deltas in ActionDeltas in Action
50% Data Reduction
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Making data smallerMaking 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
What happens when the network lets you down?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™”
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Responding to the networkResponding 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Responding to feedbackResponding 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Problems with queuingProblems 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Optimizing queuing - memoryOptimizing 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Optimizing queuing – timelinessOptimizing 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Optimizing queuing - DemoOptimizing queuing - Demo
@YourTwitterHandle@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Demo
http://demo.pushtechnology.com/devoxx
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Optimize the User Experience?Optimize the User Experience?
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Rich to richer User ExperiencesRich 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
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Apache CordovaApache 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)
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Putting it all togetherPutting it all together
@YourTwitterHandle@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Demo
http://demo.pushtechnology.com/flights/
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Other considerationsOther 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
@YourTwitterHandle#DVXFR14{session hashtag} @andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Sum
mar
y
@andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
ConclusionConclusion• 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
@YourTwitterHandle#DVXFR14{session hashtag} @andyp1per@andyp1per#RealTimeMobile#RealTimeMobile
Q &
A