Data to Go
Mobile API Design
Matt Smollinger
CTO & Co-Founder, Skaffl
@mattsmollinger
Chuck Greb
Sr. Software Engineer, Ma...
About us
Chief Technology Officer of Skaffl.
com, Mobile Dev, and general geek.
Mobile software craftsman, test-
driven ev...
Agenda
● Overview
● 3 Principles of (good) mobile API design
● Looking to the future
What is an API?
An application programming interface (API) is a
specification of how software components
should interact w...
Remote Service API
● Web service
● Desktop, laptop, or mobile client
● Communication and protocol
HTTP + JSON = <3
Web API Request
Mobile API Request
Mobile API requests are
generally slower and more
prone to timeouts and other
failures!
Yo ho ho and a few
billion pageviews of
RUM
Josh Fraser, Torbit, 2012
How speed affects bounce rate
(Fraser, 2012, p. 30)
How speed affects bounce rate (mobile)
(Fraser, 2012, p. 34)
How speed affects user engagement
(Fraser, 2012, p. 35)
How speed affects user engagement (mobile)
(Fraser, 2012, p. 37)
The Three Little APIs
Once upon a time...
Things users care about
● Speed
● Battery life
● Privacy
Public vs. Private APIs
Is your API open to 3rd party developers?
3 Principles of Mobile API Design
1. Reduce round trips to the server
2. Control verbosity
3. Restrict access
Catomatic
● Node.js server (Express)
● iOS client
● Android client
Catomatic
Node Instance: http://mostlygeeks.com:5000/
https://github.com/msmollin/sxsw_node
https://github.com/msmollin/ca...
Reduce round trips
to the server
Principle #1
Resource constrained environment
● CPU
● memory
● bandwidth
● battery
Hardware comparison
Moto X
● Snapdragon S4 Pro
● Dual-core
● 1.7 GHz
● 2GB RAM
Apple iMac
● Intel Core i7
● Quad-core + HT...
Users are impatient
● Reduce network overhead
● Brevity trumps discoverability
● RESTful vs. RESTish
Mobile Performance
from Radio Up
Ilya Grigorik, Google, 2013
The (short) life of a web request
(Grigorik, 2013, p. 20)
Watch those energy tails!
(Grigorik, 2013, p. 23)
HSPA vs LTE (U.S.)
(Grigorik, 2013, p. 37)
HSPA vs LTE (World)
(Grigorik, 2013, p. 37)
Show me the cache
● Memory
● Disk
● Invalidation
Chiu-Ki Chan
Caching Strategies for Mobile Apps
Philly ETE 2012
http://ch...
- Phil Karlton
"There are two hard things in
computer science:
cache invalidation, naming
things, and off-by-1 errors."
Reduce round trips
to the server
Example #1 (Login)
Verify Password
POST http://mostlygeeks.com:5000/api/verify_password
Input
{ "email": "chuck@example.com", "password": "bu...
Profile
GET http://mostlygeeks.com:5000/api/users/1
{
"user_id": 1,
"name": "Chuck Greb",
"email": "chuck@example.com"
}
Cats
GET http://mostlygeeks.com:5000/cats
[
{
"cat_id": 1,
"name": "Kaze",
"age": 2,
"small_photo_url": "http://example.co...
Login (input)
POST http://mostlygeeks.com:5000/login
{ "email": "chuck@example.com", "password": "buddy" }
Login (output)
{
"user": {
"user_id": 1,
"name": "Chuck Greb",
"email": "chuck@example.com"
},
"cats": [
{
"cat_id": 1,
"n...
Control verbosity
Principle #2
Low hanging fruit
● Remove empty data
● Remove irrelevant data
● GZIP compression
Time
Data
is
Money
- Benjamin Franklin
Sip, don’t chug.
● Less data is faster
● Less data is less expensive
Knobs and dials
● Pagination
● Sort
● Search
● Filter
Object Expansion
Specify verbosity level on per request basis
● Abstract verbosity level
● Custom media type
● Specify res...
Abstract verbosity level
http://example.com/api/cats?verbosity=3
Custom media type
Accept: application/cat.simple+json
http://developer.github.com/v3/media/
Specify response fields
http://example.com/api/cats?fields=[cat_id,name,age]
Collection vs. resource
http://example.com/api/cats
http://example.com/api/cats/1
Control verbosity
Example #2 (Master/detail)
Cats (collection)
GET http://mostlygeeks.com:5000/cats
Output
[
{
"cat_id": 1,
"name": "Kaze",
"age": 2,
"photo_url": "htt...
Cat (resource)
GET http://mostlygeeks.com:5000/cats/1
Output
{
"cat_id": 1,
"name": "Kaze",
"age": 2,
"small_photo_url": "...
Restrict access
Principle #3
Identify the origin of all requests
● Application version
● User account
● Device type
● Operating system
● Network (IP) a...
Deny unauthorized requests
● Invalid credentials
● Rate limit
● Unsupported operating system
● Obsolete application versio...
Protect sensitive data
● Personal data
● Proprietary data
● Critical URL Resources
Keep it secret. Keep it safe.
Mobile-friendly security
Do
● HTTPS/SSL
● Access token
header
● 2-step verification
Don’t
● Session
● Cookies
● CSRF token...
Wait... I thought OAuth was good?
● Which implementation?
● Designed for 3-legged communication over
un-encrypted connecti...
Restrict access
Example #3 (Access token)
Login
POST http://mostlygeeks.com:5000/login
Input
{ "email": "chuck@example.com", "password": "buddy" }
Output
{
"access_...
Looking to the
future...
The Future...
...is now
● SPDY
● Binary Transfer Formats
○ Protobuf
○ BSON
○ Thrift
● Websockets
● HTTP 2.0
How was the session?
FeedbackSXSW App Session Feedback
1. Express yourself
2. Help us get better
3.Earn rewards
{Daily SXS...
done.
Matt Smollinger
CTO & Co-Founder, Skaffl
@mattsmollinger
Chuck Greb
Sr. Software Engineer, Mapzen
@ecgreb
#SXSW
#Dat...
Data to Go: Mobile API Design (SXSW)
Data to Go: Mobile API Design (SXSW)
Data to Go: Mobile API Design (SXSW)
Data to Go: Mobile API Design (SXSW)
Data to Go: Mobile API Design (SXSW)
Upcoming SlideShare
Loading in …5
×

Data to Go: Mobile API Design (SXSW)

1,058 views
941 views

Published on

Sildes for Data to Go: Mobile API Design @ SXSW 2014

http://schedule.sxsw.com/2014/events/event_IAP17442

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,058
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Data to Go: Mobile API Design (SXSW)

  1. 1. Data to Go Mobile API Design Matt Smollinger CTO & Co-Founder, Skaffl @mattsmollinger Chuck Greb Sr. Software Engineer, Mapzen @ecgreb #SXSW #DataToGo
  2. 2. About us Chief Technology Officer of Skaffl. com, Mobile Dev, and general geek. Mobile software craftsman, test- driven evangelist, and clean code connoisseur. Matt Smollinger CTO & Co-Founder, Skaffl @mattsmollinger Chuck Greb Sr. Software Engineer, Mapzen @ecgreb
  3. 3. Agenda ● Overview ● 3 Principles of (good) mobile API design ● Looking to the future
  4. 4. What is an API? An application programming interface (API) is a specification of how software components should interact with each other. In most cases an API is a library that includes specification for routines, data structures, object classes, and variables. http://en.wikipedia.org/wiki/Application_programming_interface
  5. 5. Remote Service API ● Web service ● Desktop, laptop, or mobile client ● Communication and protocol HTTP + JSON = <3
  6. 6. Web API Request
  7. 7. Mobile API Request Mobile API requests are generally slower and more prone to timeouts and other failures!
  8. 8. Yo ho ho and a few billion pageviews of RUM Josh Fraser, Torbit, 2012
  9. 9. How speed affects bounce rate (Fraser, 2012, p. 30)
  10. 10. How speed affects bounce rate (mobile) (Fraser, 2012, p. 34)
  11. 11. How speed affects user engagement (Fraser, 2012, p. 35)
  12. 12. How speed affects user engagement (mobile) (Fraser, 2012, p. 37)
  13. 13. The Three Little APIs Once upon a time...
  14. 14. Things users care about ● Speed ● Battery life ● Privacy
  15. 15. Public vs. Private APIs Is your API open to 3rd party developers?
  16. 16. 3 Principles of Mobile API Design 1. Reduce round trips to the server 2. Control verbosity 3. Restrict access
  17. 17. Catomatic ● Node.js server (Express) ● iOS client ● Android client
  18. 18. Catomatic Node Instance: http://mostlygeeks.com:5000/ https://github.com/msmollin/sxsw_node https://github.com/msmollin/catomatic_ios https://github.com/ecgreb/catomatic
  19. 19. Reduce round trips to the server Principle #1
  20. 20. Resource constrained environment ● CPU ● memory ● bandwidth ● battery
  21. 21. Hardware comparison Moto X ● Snapdragon S4 Pro ● Dual-core ● 1.7 GHz ● 2GB RAM Apple iMac ● Intel Core i7 ● Quad-core + HT ● 3.4 GHz ● 8GB RAM (standard) ● Up to 32GB
  22. 22. Users are impatient ● Reduce network overhead ● Brevity trumps discoverability ● RESTful vs. RESTish
  23. 23. Mobile Performance from Radio Up Ilya Grigorik, Google, 2013
  24. 24. The (short) life of a web request (Grigorik, 2013, p. 20)
  25. 25. Watch those energy tails! (Grigorik, 2013, p. 23)
  26. 26. HSPA vs LTE (U.S.) (Grigorik, 2013, p. 37)
  27. 27. HSPA vs LTE (World) (Grigorik, 2013, p. 37)
  28. 28. Show me the cache ● Memory ● Disk ● Invalidation Chiu-Ki Chan Caching Strategies for Mobile Apps Philly ETE 2012 http://chiuki.github.io/mobile-caching-strategies/
  29. 29. - Phil Karlton "There are two hard things in computer science: cache invalidation, naming things, and off-by-1 errors."
  30. 30. Reduce round trips to the server Example #1 (Login)
  31. 31. Verify Password POST http://mostlygeeks.com:5000/api/verify_password Input { "email": "chuck@example.com", "password": "buddy" } Output { "user_id": 1 }
  32. 32. Profile GET http://mostlygeeks.com:5000/api/users/1 { "user_id": 1, "name": "Chuck Greb", "email": "chuck@example.com" }
  33. 33. Cats GET http://mostlygeeks.com:5000/cats [ { "cat_id": 1, "name": "Kaze", "age": 2, "small_photo_url": "http://example.com/images/kaze_small.jpg", "short_description": "Kaze is an energetic and playful cat." }, ... ]
  34. 34. Login (input) POST http://mostlygeeks.com:5000/login { "email": "chuck@example.com", "password": "buddy" }
  35. 35. Login (output) { "user": { "user_id": 1, "name": "Chuck Greb", "email": "chuck@example.com" }, "cats": [ { "cat_id": 1, "name": "Kaze", "age": 2 }, ... ] }
  36. 36. Control verbosity Principle #2
  37. 37. Low hanging fruit ● Remove empty data ● Remove irrelevant data ● GZIP compression
  38. 38. Time Data is Money - Benjamin Franklin
  39. 39. Sip, don’t chug. ● Less data is faster ● Less data is less expensive
  40. 40. Knobs and dials ● Pagination ● Sort ● Search ● Filter
  41. 41. Object Expansion Specify verbosity level on per request basis ● Abstract verbosity level ● Custom media type ● Specify response fields in the request ● Collection vs. resource
  42. 42. Abstract verbosity level http://example.com/api/cats?verbosity=3
  43. 43. Custom media type Accept: application/cat.simple+json http://developer.github.com/v3/media/
  44. 44. Specify response fields http://example.com/api/cats?fields=[cat_id,name,age]
  45. 45. Collection vs. resource http://example.com/api/cats http://example.com/api/cats/1
  46. 46. Control verbosity Example #2 (Master/detail)
  47. 47. Cats (collection) GET http://mostlygeeks.com:5000/cats Output [ { "cat_id": 1, "name": "Kaze", "age": 2, "photo_url": "http://example.com/images/kaze.jpg", "short_description": "Kaze is an energetic and playful cat." }, ... ]
  48. 48. Cat (resource) GET http://mostlygeeks.com:5000/cats/1 Output { "cat_id": 1, "name": "Kaze", "age": 2, "small_photo_url": "http://example.com/images/kaze_small.jpg", "short_description": "Kaze is an energetic and playful cat.", "large_photo_url": "http://example.com/images/kaze_large.jpg", "long_description": "Kaze is an energetic and playful cat who likes to..." }
  49. 49. Restrict access Principle #3
  50. 50. Identify the origin of all requests ● Application version ● User account ● Device type ● Operating system ● Network (IP) address ● etc.
  51. 51. Deny unauthorized requests ● Invalid credentials ● Rate limit ● Unsupported operating system ● Obsolete application version ● Blacklisted IP address
  52. 52. Protect sensitive data ● Personal data ● Proprietary data ● Critical URL Resources
  53. 53. Keep it secret. Keep it safe.
  54. 54. Mobile-friendly security Do ● HTTPS/SSL ● Access token header ● 2-step verification Don’t ● Session ● Cookies ● CSRF tokens ● OAuth* ● HMAC* *Unless your API is public
  55. 55. Wait... I thought OAuth was good? ● Which implementation? ● Designed for 3-legged communication over un-encrypted connections. ● Apps can be decompiled to determine hashing algorithm if done client-side. ● Introduces significant overhead. ● OAuth2 = Security Sadness
  56. 56. Restrict access Example #3 (Access token)
  57. 57. Login POST http://mostlygeeks.com:5000/login Input { "email": "chuck@example.com", "password": "buddy" } Output { "access_token": "Y2h1Y2tAZXhhbXBsZS5jb20", "cats": [ ... ] }
  58. 58. Looking to the future...
  59. 59. The Future...
  60. 60. ...is now ● SPDY ● Binary Transfer Formats ○ Protobuf ○ BSON ○ Thrift ● Websockets ● HTTP 2.0
  61. 61. How was the session? FeedbackSXSW App Session Feedback 1. Express yourself 2. Help us get better 3.Earn rewards {Daily SXSW Posters + Grand Prizes} In 1 minute
  62. 62. done. Matt Smollinger CTO & Co-Founder, Skaffl @mattsmollinger Chuck Greb Sr. Software Engineer, Mapzen @ecgreb #SXSW #DataToGo

×