Data to Go: Mobile API Design (SXSW)

67
Data to Go Mobile API Design Matt Smollinger CTO & Co-Founder, Skaffl @mattsmollinger Chuck Greb Sr. Software Engineer, Mapzen @ecgreb #SXSW #DataToGo

description

Sildes for Data to Go: Mobile API Design @ SXSW 2014 http://schedule.sxsw.com/2014/events/event_IAP17442

Transcript of Data to Go: Mobile API Design (SXSW)

Page 1: Data to Go: Mobile API Design (SXSW)

Data to GoMobile API DesignMatt SmollingerCTO & Co-Founder, Skaffl@mattsmollinger

Chuck GrebSr. Software Engineer, Mapzen@ecgreb

#SXSW #DataToGo

Page 2: Data to Go: Mobile API Design (SXSW)

About us

Chief Technology Officer of Skaffl.com, Mobile Dev, and general geek.

Mobile software craftsman, test-driven evangelist, and clean code connoisseur.

Matt SmollingerCTO & Co-Founder, Skaffl@mattsmollinger

Chuck GrebSr. Software Engineer, Mapzen@ecgreb

Page 3: Data to Go: Mobile API Design (SXSW)

Agenda

● Overview● 3 Principles of (good) mobile API design● Looking to the future

Page 4: Data to Go: Mobile API Design (SXSW)
Page 5: Data to Go: Mobile API Design (SXSW)

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

Page 6: Data to Go: Mobile API Design (SXSW)

Remote Service API

● Web service● Desktop, laptop, or mobile client● Communication and protocol

HTTP + JSON = <3

Page 7: Data to Go: Mobile API Design (SXSW)

Web API Request

Page 8: Data to Go: Mobile API Design (SXSW)

Mobile API Request

Mobile API requests are generally slower and more prone to timeouts and other failures!

Page 9: Data to Go: Mobile API Design (SXSW)
Page 10: Data to Go: Mobile API Design (SXSW)

Yo ho ho and a few billion pageviews of RUMJosh Fraser, Torbit, 2012

Page 11: Data to Go: Mobile API Design (SXSW)
Page 12: Data to Go: Mobile API Design (SXSW)

How speed affects bounce rate

(Fraser, 2012, p. 30)

Page 13: Data to Go: Mobile API Design (SXSW)

How speed affects bounce rate (mobile)

(Fraser, 2012, p. 34)

Page 14: Data to Go: Mobile API Design (SXSW)

How speed affects user engagement

(Fraser, 2012, p. 35)

Page 15: Data to Go: Mobile API Design (SXSW)

How speed affects user engagement (mobile)

(Fraser, 2012, p. 37)

Page 16: Data to Go: Mobile API Design (SXSW)

The Three Little APIs

Once upon a time...

Page 17: Data to Go: Mobile API Design (SXSW)

Things users care about

● Speed● Battery life● Privacy

Page 18: Data to Go: Mobile API Design (SXSW)

Public vs. Private APIs

Is your API open to 3rd party developers?

Page 19: Data to Go: Mobile API Design (SXSW)

3 Principles of Mobile API Design

1. Reduce round trips to the server2. Control verbosity3. Restrict access

Page 20: Data to Go: Mobile API Design (SXSW)
Page 21: Data to Go: Mobile API Design (SXSW)

Catomatic

● Node.js server (Express)● iOS client● Android client

Page 22: Data to Go: Mobile API Design (SXSW)

CatomaticNode Instance: http://mostlygeeks.com:5000/

https://github.com/msmollin/sxsw_node

https://github.com/msmollin/catomatic_ios

https://github.com/ecgreb/catomatic

Page 23: Data to Go: Mobile API Design (SXSW)

Reduce round trips to the serverPrinciple #1

Page 24: Data to Go: Mobile API Design (SXSW)

Resource constrained environment

● CPU● memory● bandwidth● battery

Page 25: Data to Go: Mobile API Design (SXSW)

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

Page 26: Data to Go: Mobile API Design (SXSW)

Users are impatient

● Reduce network overhead● Brevity trumps discoverability● RESTful vs. RESTish

Page 27: Data to Go: Mobile API Design (SXSW)

Mobile Performance from Radio UpIlya Grigorik, Google, 2013

Page 28: Data to Go: Mobile API Design (SXSW)
Page 29: Data to Go: Mobile API Design (SXSW)

The (short) life of a web request

(Grigorik, 2013, p. 20)

Page 30: Data to Go: Mobile API Design (SXSW)

Watch those energy tails!

(Grigorik, 2013, p. 23)

Page 31: Data to Go: Mobile API Design (SXSW)

HSPA vs LTE (U.S.)

(Grigorik, 2013, p. 37)

Page 32: Data to Go: Mobile API Design (SXSW)

HSPA vs LTE (World)

(Grigorik, 2013, p. 37)

Page 33: Data to Go: Mobile API Design (SXSW)

Show me the cache

● Memory● Disk● Invalidation

Chiu-Ki ChanCaching Strategies for Mobile AppsPhilly ETE 2012http://chiuki.github.io/mobile-caching-strategies/

Page 34: Data to Go: Mobile API Design (SXSW)

- Phil Karlton

"There are two hard things in computer science:

cache invalidation, naming things, and off-by-1 errors."

Page 35: Data to Go: Mobile API Design (SXSW)

Reduce round trips to the serverExample #1 (Login)

Page 36: Data to Go: Mobile API Design (SXSW)

Verify PasswordPOST http://mostlygeeks.com:5000/api/verify_password

Input{ "email": "[email protected]", "password": "buddy" }

Output{ "user_id": 1 }

Page 37: Data to Go: Mobile API Design (SXSW)

ProfileGET http://mostlygeeks.com:5000/api/users/1

{

"user_id": 1,

"name": "Chuck Greb",

"email": "[email protected]"

}

Page 38: Data to Go: Mobile API Design (SXSW)

CatsGET 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."

},

...

]

Page 39: Data to Go: Mobile API Design (SXSW)

Login (input)POST http://mostlygeeks.com:5000/login

{ "email": "[email protected]", "password": "buddy" }

Page 40: Data to Go: Mobile API Design (SXSW)

Login (output){

"user": {

"user_id": 1,

"name": "Chuck Greb",

"email": "[email protected]"

},

"cats": [

{

"cat_id": 1,

"name": "Kaze",

"age": 2

},

...

]

}

Page 41: Data to Go: Mobile API Design (SXSW)

Control verbosityPrinciple #2

Page 42: Data to Go: Mobile API Design (SXSW)

Low hanging fruit

● Remove empty data● Remove irrelevant data● GZIP compression

Page 43: Data to Go: Mobile API Design (SXSW)

Time

Data

is

Money- Benjamin Franklin

Page 44: Data to Go: Mobile API Design (SXSW)

Sip, don’t chug.

● Less data is faster● Less data is less expensive

Page 45: Data to Go: Mobile API Design (SXSW)

Knobs and dials

● Pagination● Sort● Search● Filter

Page 46: Data to Go: Mobile API Design (SXSW)

Object Expansion

Specify verbosity level on per request basis● Abstract verbosity level● Custom media type● Specify response fields in the request● Collection vs. resource

Page 47: Data to Go: Mobile API Design (SXSW)

Abstract verbosity level

http://example.com/api/cats?verbosity=3

Page 48: Data to Go: Mobile API Design (SXSW)

Custom media type

Accept: application/cat.simple+json

http://developer.github.com/v3/media/

Page 49: Data to Go: Mobile API Design (SXSW)

Specify response fields

http://example.com/api/cats?fields=[cat_id,name,age]

Page 50: Data to Go: Mobile API Design (SXSW)

Collection vs. resource

http://example.com/api/cats

http://example.com/api/cats/1

Page 51: Data to Go: Mobile API Design (SXSW)

Control verbosityExample #2 (Master/detail)

Page 52: Data to Go: Mobile API Design (SXSW)

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."

},

...

]

Page 53: Data to Go: Mobile API Design (SXSW)

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..."

}

Page 54: Data to Go: Mobile API Design (SXSW)

Restrict accessPrinciple #3

Page 55: Data to Go: Mobile API Design (SXSW)

Identify the origin of all requests

● Application version● User account● Device type● Operating system● Network (IP) address● etc.

Page 56: Data to Go: Mobile API Design (SXSW)

Deny unauthorized requests

● Invalid credentials● Rate limit● Unsupported operating system● Obsolete application version● Blacklisted IP address

Page 57: Data to Go: Mobile API Design (SXSW)

Protect sensitive data

● Personal data● Proprietary data● Critical URL Resources

Page 58: Data to Go: Mobile API Design (SXSW)

Keep it secret. Keep it safe.

Page 59: Data to Go: Mobile API Design (SXSW)

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

Page 60: Data to Go: Mobile API Design (SXSW)

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

Page 61: Data to Go: Mobile API Design (SXSW)

Restrict accessExample #3 (Access token)

Page 62: Data to Go: Mobile API Design (SXSW)

LoginPOST http://mostlygeeks.com:5000/login

Input{ "email": "[email protected]", "password": "buddy" }

Output{

"access_token": "Y2h1Y2tAZXhhbXBsZS5jb20",

"cats": [ ... ]

}

Page 63: Data to Go: Mobile API Design (SXSW)

Looking to the future...

Page 64: Data to Go: Mobile API Design (SXSW)

The Future...

Page 65: Data to Go: Mobile API Design (SXSW)

...is now

● SPDY● Binary Transfer Formats

○ Protobuf○ BSON○ Thrift

● Websockets● HTTP 2.0

Page 66: Data to Go: Mobile API Design (SXSW)

How was the session?

FeedbackSXSW App Session Feedback

1. Express yourself2. Help us get better

3.Earn rewards{Daily SXSW Posters + Grand Prizes}

In 1 minute

Page 67: Data to Go: Mobile API Design (SXSW)

done.Matt SmollingerCTO & Co-Founder, Skaffl@mattsmollinger

Chuck GrebSr. Software Engineer, Mapzen@ecgreb

#SXSW #DataToGo