Skeuomorphs,Databases,and Mobile PerformanceArchitecting for performance with devices & APIsgroups.google.com/group/api-cr...
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...
Skeuomorphs and metaphors
SkeuomorphA skeuomorph is a design feature found on animitation, pastiche or homage that was necessaryonly to the original...
MetaphorIn cognitive linguistics, conceptual metaphor, orcognitive metaphor, refers to the understandingof one idea, or co...
“   The concepts that govern our thought are not just    matters of the intellect. They also govern our everyday    functi...
DATABASES
A brief history of   ^ architecture
Connected                   Devices Smartphone                   N-tier     Web App                Personal               ...
Domain-specific                         Data APIs PrivateCloud DBs              Caching DBs                               ...
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?
MOBILEPERFORMANCE
The classic client-server problem returns
If the database is slow, the app is slow.
Research shows that people will put up withabout 1.5 seconds between interactions.
More than 3 seconds on averageand they’ll stop using the app.
This is a problem.
Let’s dig into our client-server historyto break it down.
Make the application smarterUse the network intelligentlyOptimize the database aggressively
MAKE THEAPPLICATIONSMARTER
application    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/concurre...
application    Use the profiler to see where you’re slow    Write faster code where you see big gains    Run long operatio...
application    Concurrency
application    Anticipation
application    Caching
application    What should you be caching locally?    Security credentials or tokens    Last user session data    MRU (Mos...
application    Issues do remain    Can’t hit local cache on first use of app    Receiving the right shape of data
USE THENETWORKINTELLIGENTLY
network   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   pingbacks   keep-alives   analytics   screen rotations   will slow you dow...
network   A better approach:   Bundling, piggybacking, and pipelining
network                      Connection                       Tail                        setup                         ti...
network   Intermittent analytics and keep-alives                   90 sec of radio use and battery burn   Piggybacking on ...
network   API calls in series     200 ms     200 ms   200 ms    200 ms   200 ms                         1000 ms   API pipe...
Bundling loosely-related requests togetherPiggybacking secondary intermittent trafficPipelining requests to maximize throu...
OPTIMIZE THEDATABASEAGGRESSIVELY
database    What were our old    database optimization tricks    that we can apply to Internet data?
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 h...
database  Where does a Stored Procedure run in this world?
database  Where does a Stored Procedure run in this world?  Probably in a cloud
database    Once you’ve built this architectural layer    you 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 ...
database  Denormalization refers to writing multiple indexes  in order to optimize query performance  Where your app relie...
database  Managing result sets to save bandwidth and  response time means limiting cursor size by default  This can be com...
database  Managing result sets to save processor time for the  client is an option as well.  What would happen if you coul...
XML in Javascriptvar parseXml;if (typeof window.DOMParser != "undefined"){     parseXml = function(xmlStr) {         retur...
JSON in Javascriptvar json = {"result":true,"count":1},    obj = JSON.parse(json);alert(obj.count);
INCLOSING
There are a few things we canborrow from the pastto help us right now
Make the application smarterUse the network intelligentlyOptimize the database aggressively
What did you decide about the statement“The internet is a database”?
Carpentry in marble?or cognitive tool?
Skeuomorph?or metaphor?
groups.google.com/group/api-craft
THANK YOUQuestions and ideas to:@sramjigroups.google.com/group/api-craft
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Skeuomorphs, Databases, and Mobile Performance
Upcoming SlideShare
Loading in...5
×

Skeuomorphs, Databases, and Mobile Performance

9,553

Published on

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
  • <br /><iframe width="350" height="288" src="http://www.youtube.com/embed/HPs2r8hJoMg" frameborder="0"></iframe>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,553
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
83
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide
  • http://openarch.eu/work-packages/activities/everyday-life-past-crafting-wooden-anthropomorphic-statue-using-wooden
  • http://greenwood-carving.blogspot.co.uk/2012/02/more-bronze-age-woodworking.html
  • So now we make them out of concrete!What’s even funnier is that since we discovered the Greek columns so long after they were used, the gilding and brightly colored paint used on them had faded, so we associate white columns with eminence and classical majesty… when they in fact were never so pale.
  • http://hipstercheerleaders.com/post/6981850000/how-to-talk-to-bolivian-hand-models-at-parties
  • http://en.wikipedia.org/wiki/Conceptual_metaphor
  • Just in the last twenty years, we’ve gone from writing code on a single PC or Mac that will run on a single PC or Mac and its local filesystem -&gt; writing code on a single PC that will run simultaneously on several PCs, coordinated by a shared database -&gt; writing code on a single PC that will run on a single server and its local database while sending UI files to any PC or Mac that can access the server -&gt; writing code as a team on several different PCs that will run partially on {one or more servers in a cluster and their shared database plus other network-addressable applications such as file servers or ERP/CRM systems} and partially in the browser app sandbox on any PC or Mac that can access the server cluster -&gt; writing code on a single Mac that will run on a single iPhone -&gt; writing code as a team on several different PCs and Macs that will run partially on a single iPhone and partially on one or more servers in a cluster and their shared database plus other network-addressable applications such as file servers, ERP/CRM systems, Twitter, Facebook, Salesforce, or eBay -&gt; writing code as a team on several different PCs and Macs that will run partially on an iPhone, an iPad, an Android phone, a PC, and a Mac and partially on one or more servers in a cluster and their shared database plus other network-addressable applications such as file servers, ERP/CRM systems, Twitter, Facebook, Salesforce, or eBay.
  • We called it client-server, and it was good
  • Then we found more servers we needed to get data from
  • And then we delivered it over the internet in web pages or sometimes just a longer wire (which often broke apps due to WAN/VPN latency).
  • And then the computers got smaller so people started to move around and work from anywhere
  • In the beginning, there was a smartphone
  • Then Apple made phones REALLY smart
  • So of course we wanted Twitter on our phone
  • And Facebook. And why can’t we get our work done on this too?
  • And pretty quickly we ended up back heree
  • But it got even more complex because we need to support many different devices.[discuss shift from MVC on a web server to “exploded model” – ‘some people call this a distributed model, I prefer exploded to show just how distributed it really is – not just on-prem distribution but to 3rd parties like Salesforce, Facebook, et al]
  • Issues remain – can’t hit local cache on first use of the app; important in a world of disposable apps and disposable devices. Are we getting the right shape of data at the right time or are we getting more than we need or spending time reshaping it?
  • Issues remain – can’t hit local cache on first use of the app; important in a world of disposable apps and disposable devices. Are we getting the right shape of data at the right time or are we getting more than we need or spending time reshaping it?
  • http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=XyFGnPzW0TV“A Call for More Energy-Efficient Apps”
  • Issues remain – can’t hit local cache on first use of the app; important in a world of disposable apps and disposable devices. Are we getting the right shape of data at the right time or are we getting more than we need or spending time reshaping it?
  • http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=XyFGnPzW0TV“A Call for More Energy-Efficient Apps”
  • Issues remain – can’t hit local cache on first use of the app; important in a world of disposable apps and disposable devices. Are we getting the right shape of data at the right time or are we getting more than we need or spending time reshaping it?
  • Issues remain – can’t hit local cache on first use of the app; important in a world of disposable apps and disposable devices. Are we getting the right shape of data at the right time or are we getting more than we need or spending time reshaping it?
  • Adapted from http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=XyFGnPzW0TV
  • Adapted from http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=XyFGnPzW0TV
  • Adapted from http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=XyFGnPzW0TV
  • http://stackoverflow.com/questions/649614/xml-parsing-in-javascript
  • http://stackoverflow.com/questions/649614/xml-parsing-in-javascript
  • Skeuomorphs, Databases, and Mobile Performance

    1. 1. Skeuomorphs,Databases,and Mobile PerformanceArchitecting for performance with devices & APIsgroups.google.com/group/api-craftSam Ramji @sramjiApigee
    2. 2. SKEUOMORPHS
    3. 3. A brief history of architecture
    4. 4. Banister FletcherA History of Architecture
    5. 5. “ 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 Fletcher A History of Architecture
    6. 6. Skeuomorphs and metaphors
    7. 7. SkeuomorphA skeuomorph is a design feature found on animitation, pastiche or homage that was necessaryonly to the original. Often used for the sake offamiliarity, they are details that have moved fromfunction to form. Tom Petty hipstercheerleaders.com
    8. 8. MetaphorIn cognitive linguistics, conceptual metaphor, orcognitive metaphor, refers to the understandingof one idea, or conceptual domain, in terms ofanother, for example, understanding quantity interms of directionality (e.g. "prices are rising"). Wikipedia.org Conceptual Metaphors
    9. 9. “ 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 Johnson Metaphors We Live By
    10. 10. DATABASES
    11. 11. A brief history of ^ architecture
    12. 12. Connected Devices Smartphone N-tier Web App Personal DCOM CORBA Computer WebsiteMinicomputer Client/Server Mainframe Integrated Distributed Computing Architectures
    13. 13. Domain-specific Data APIs PrivateCloud DBs Caching DBs Data API Data Warehousing Mainframe RDBMS Flat file Shared Silos Data Architectures
    14. 14. We’ve come back to client-server computing
    15. 15. From the perspective of the mobile client,the Internet is a database.
    16. 16. Is that a skeuomorph or a metaphor?
    17. 17. If the Internet is a database,what have we learned from prior eras aboutarchitecting for performance?
    18. 18. MOBILEPERFORMANCE
    19. 19. The classic client-server problem returns
    20. 20. If the database is slow, the app is slow.
    21. 21. Research shows that people will put up withabout 1.5 seconds between interactions.
    22. 22. More than 3 seconds on averageand they’ll stop using the app.
    23. 23. This is a problem.
    24. 24. Let’s dig into our client-server historyto break it down.
    25. 25. Make the application smarterUse the network intelligentlyOptimize the database aggressively
    26. 26. MAKE THEAPPLICATIONSMARTER
    27. 27. application What makes the app feel fast to the user?
    28. 28. application Time to first render Time to first interaction Time between interactions
    29. 29. application Three mutually reinforcing techniques: Code profiling for performance optimization Threading/concurrency for user interactions Client-side caching for everything else
    30. 30. 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
    31. 31. application Concurrency
    32. 32. application Anticipation
    33. 33. application Caching
    34. 34. application What should you be caching locally? Security credentials or tokens Last user session data MRU (Most recently used) MFU (Most frequently used) LFC (Least frequently changed) API write operations Graceful fallbacks for failed API calls
    35. 35. application Issues do remain Can’t hit local cache on first use of app Receiving the right shape of data
    36. 36. USE THENETWORKINTELLIGENTLY
    37. 37. network The radio network is a high-latency, limited-resource environment.
    38. 38. network Speed and battery usage are both important dimensions of mobile performance
    39. 39. network Intermittent usage of the radio for pingbacks keep-alives analytics screen rotations will slow you down and burn battery.
    40. 40. network A better approach: Bundling, piggybacking, and pipelining
    41. 41. network Connection Tail setup time 2 sec n sec 15 sec Data Idle transfer Battery cost of a series of small API requests 90 sec of radio use and battery burn Bundling a set of API requests 19 sec
    42. 42. network Intermittent analytics and keep-alives 90 sec of radio use and battery burn Piggybacking on a set of user API requests 19 sec
    43. 43. network API calls in series 200 ms 200 ms 200 ms 200 ms 200 ms 1000 ms API pipelining
    44. 44. Bundling loosely-related requests togetherPiggybacking secondary intermittent trafficPipelining requests to maximize throughput
    45. 45. OPTIMIZE THEDATABASEAGGRESSIVELY
    46. 46. database What were our old database optimization tricks that we can apply to Internet data?
    47. 47. database Stored Procedures Queueing Denormalization Result Sets
    48. 48. 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#
    49. 49. database Where does a Stored Procedure run in this world?
    50. 50. database Where does a Stored Procedure run in this world? Probably in a cloud
    51. 51. database Once you’ve built this architectural layer you gain a lot of control
    52. 52. database You can deal with queueing, denormalization, and manage result sets properly.
    53. 53. 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
    54. 54. 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.
    55. 55. 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.
    56. 56. database Managing result sets to save processor time for the client is an option as well. What would happen if you could focus on app-shaped data?
    57. 57. XML in Javascriptvar 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);
    58. 58. JSON in Javascriptvar json = {"result":true,"count":1}, obj = JSON.parse(json);alert(obj.count);
    59. 59. INCLOSING
    60. 60. There are a few things we canborrow from the pastto help us right now
    61. 61. Make the application smarterUse the network intelligentlyOptimize the database aggressively
    62. 62. What did you decide about the statement“The internet is a database”?
    63. 63. Carpentry in marble?or cognitive tool?
    64. 64. Skeuomorph?or metaphor?
    65. 65. groups.google.com/group/api-craft
    66. 66. THANK YOUQuestions and ideas to:@sramjigroups.google.com/group/api-craft

    ×