Skeuomorphs, Databases, and Mobile Performance

Skeuomorphs, Databases, and Mobile PerformanceArchitecting for performance with devices & APIs

Sam Ramji @sramjiApigee

groups.google.com/group/api-craft

SKEUOMORPHS

A brief history of architecture

Banister FletcherA History of Architecture

“ Greek columns and their entablatures were at first entirely of timber, with terra-cotta decorations in the upper trabeation, but were converted into stone quite early in the [Hellenic] period, about 600 BC. The translation was quite direct, timber forms being imitated in stonework with remarkable exactness. For this reason, Greek architecture sometimes has been called a ‘carpentry in marble’…

Banister FletcherA History of Architecture

Skeuomorphs and metaphors

Skeuomorph

A skeuomorph is a design feature found on an imitation, pastiche or homage that was necessary only to the original. Often used for the sake of familiarity, they are details that have moved from function to form.

Tom Pettyhipstercheerleaders.com

Metaphor

In cognitive linguistics, conceptual metaphor, or cognitive metaphor, refers to the understanding of one idea, or conceptual domain, in terms of another, for example, understanding quantity in terms of directionality (e.g. "prices are rising").

Wikipedia.orgConceptual Metaphors

“ The concepts that govern our thought are not just matters of the intellect. They also govern our everyday functioning, down to the most mundane details. Our concepts structure what we perceive, how we get around in the world, and how we relate to other people. Our conceptual system thus plays a central role in defining our everyday realities. If we are right in suggesting that our conceptual system is largely metaphorical, then the way we thinks what we experience, and what we do every day is very much a matter of metaphor.

George Lakoff and Mark JohnsonMetaphors We Live By

DATABASES

A brief history of architectureapplication

^

Mainframe

Minicomputer

Integrated

PersonalComputer

Smartphone

Connected Devices

Website

Client/Server

Web App

DCOM

Distributed

CORBA

N-tier

Computing Architectures

Data Architectures

Flat file

Mainframe

Silos

Caching DBs

Domain-specificData APIs

RDBMS

Data APIData

Warehousing

Shared

Private Cloud DBs

API

API

We’ve come back to client-server computing

From the perspective of the mobile client,the Internet is a database.

Is that a skeuomorph or a metaphor?

If the Internet is a database, what have we learned from prior eras aboutarchitecting for performance?

MOBILE PERFORMANCE

The classic client-server problem returns

If the database is slow, the app is slow.

Research shows that people will put up with about 1.5 seconds between interactions.

More than 3 seconds on average and they’ll stop using the app.

This is a problem.

Let’s dig into our client-server history to break it down.

Make the application smarter

Use the network intelligently

Optimize the database aggressively

MAKE THE APPLICATIONSMARTER

What makes the app feel fast to the user?

application

Time to first render

Time to first interaction

Time between interactions

application

Three mutually reinforcing techniques:

Code profiling for performance optimization

Threading/concurrency for user interactions

Client-side caching for everything else

application

Use the profiler to see where you’re slow

Write faster code where you see big gains

Run long operations in parallel

Keep local copies of everything you need

application

Concurrency

application

Anticipation

application

Caching

application

What should you be caching locally?

Security credentials or tokensLast user session dataMRU (Most recently used)MFU (Most frequently used)LFC (Least frequently changed)API write operationsGraceful fallbacks for failed API calls

application

Issues do remain

Can’t hit local cache on first use of appReceiving the right shape of data

application

USE THE NETWORKINTELLIGENTLY

The radio network is a high-latency,

limited-resource environment.

network

Speed and battery usage are both important dimensions of mobile performance

network

Intermittent usage of the radio for

pingbackskeep-alivesanalyticsscreen rotations

will slow you down and burn battery.

network

A better approach:

Bundling, piggybacking, and pipelining

network

Battery cost of a series of small API requests

network

Bundling a set of API requests

Idle

Connectionsetup

Datatransfer

Tailtime

2 sec n sec 15 sec

90 sec of radio use and battery burn

19 sec

Intermittent analytics and keep-alives

network

Piggybacking on a set of user API requests

90 sec of radio use and battery burn

19 sec

API calls in series

network

API pipelining

200 ms 200 ms 200 ms 200 ms 200 ms

1000 ms

Bundling loosely-related requests together

Piggybacking secondary intermittent traffic

Pipelining requests to maximize throughput

OPTIMIZE THE DATABASEAGGRESSIVELY

What were our old database optimization tricksthat we can apply to Internet data?

database

database

Stored Procedures

Queueing

Denormalization

Result Sets

database

What is a Stored Procedure in this world?

Server-side code that executes complex operations

Ones that should happen right next to the data

Where you need high compute and low latency

Could be written in node.js, ruby, java, python, c#

database

Where does a Stored Procedure run in this world?

database

Where does a Stored Procedure run in this world?

Probably in a cloud

Once you’ve built this architectural layeryou gain a lot of control

database

You can deal with queueing, denormalization, and manage result sets properly.

database

Queueing enables you to break the request/response pair into separate pieces

You may even be able to tell the client when to call you back for the result

Making your requests to this queueing layer also lets you serve from a cloud-side cache if you have one

database

Denormalization refers to writing multiple indexes in order to optimize query performance

Where your app relies on your own data, don’t make it wait for slow queries

Remember, in the cloud, storage is cheap and easy to obtain – write data as often as needed to improve query speeds.

database

Managing result sets to save bandwidth and response time means limiting cursor size by default

This can be complementary to the caches you keep around, since a massive API result is cheap to manage in the cloud

and can be trickled back to the app in bite-size chunks.

database

Managing result sets to save processor time for the client is an option as well.

What would happen if you could focus onapp-shaped data?

database

var parseXml; if (typeof window.DOMParser != "undefined") { parseXml = function(xmlStr) {

return (new window.DOMParser()).parseFromString(xmlStr,"text/xml"); }; } else if (typeof window.ActiveXObject != "undefined" && new window.ActiveXObject("Microsoft.XMLDOM")) { parseXml = function(xmlStr) { var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; xmlDoc.loadXML(xmlStr); return xmlDoc; }; } else { throw new Error("No XML parser found"); }

var xml = parseXml("<result>true</result><count>1</count>"); alert(xml.documentElement.nodeName);

XML in Javascript

JSON in Javascript

var json = '{"result":true,"count":1}', obj = JSON.parse(json);

alert(obj.count);

INCLOSING

There are a few things we can borrow from the pastto help us right now

Make the application smarter

Use the network intelligently

Optimize the database aggressively

What did you decide about the statement

“The internet is a database”?

Carpentry in marble?

or cognitive tool?

Skeuomorph?

or metaphor?


THANK YOUQuestions and ideas to:

@sramji


Technology

Skeuomorphs, Databases, and Mobile Performance