APIStrat 2016 | Using Hypermedia APIs to Drive Interactive Mobile Applications (Ben Greenberg)

APIStrat 2016 | Using Hypermedia APIs to Drive Interactive Mobile Applications (Ben Greenberg)

At Comcast, the backbone of cross-platform Xfinity TV experience is a hypermedia API supporting both XHTML and HAL as media types. It's given us several expected benefits: self-documentation, loose coupling, and discoverability. At the same time, it also uncovered some limitations of hypermedia.

Hypermedia is designed so that the API works very similarly to a traditional web site—load a resource, follow a link, and then load the next resource. Modern, native mobile apps, on the other hand, try very hard to not present a page-oriented, wait and load experience. Users expect their apps to be responsive, fast, and not beholden to a page-like paradigm.

In this presentation, Benjamin will discuss the design of our hypermedia API and demonstrate some of the strategies we''ve come up with to address these concerns. We'll use different examples from our API to illustrate how we promoted parallel requests, improved cacheability, and minimized response sizes, all while staying true to the link- and form-driven spirit of hypermedia.

Transcript

  1. 1.

    Using Hypermedia APIs to Power Interactive Mobile Applications APIStrat Boston

    November 3, 2016 Benjamin Greenberg, Comcast Advanced Applications Engineering @bengreen Benjamin_Greenberg@comcast.com
  2. 2.
  3. 3.

    Architecture Ben Greenberg - Using Hypermedia APIs to Drive Interactive

    Mobile Applications 3 The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License. The Roku image was created by IntelFreePress and is reproduced under the Creative Commons 20 Attribution License: https://creativecommons.org/licenses/by/2.0/legalcode Other images are public domain or used with permission.
  4. 4.

    Hypermedia • REST: GET, POST, DELETE, PUT • REST is

    not RPC • Roy Fielding: “REST APIs must be hypertext-driven” • Hypermedia As The Engine of Application State => HATEOAS Ben Greenberg - Using Hypermedia APIs to Drive Interactive Mobile Applications 4
  5. 5.

    Hypermedia Ben Greenberg - Using Hypermedia APIs to Drive Interactive

    Mobile Applications 5 Home Page Client URL Resource Resource Relation Relation Resource Resource Resource
  6. 6.

    HAL – Hypertext Application Language By Mike Kelly, 2011 http://stateless.co/hal_specification.html

    Draft RFC: https://github.com/mikekelly/hal-rfc Ben Greenberg - Using Hypermedia APIs to Drive Interactive Mobile Applications 6
  7. 7.

    HAL Ben Greenberg - Using Hypermedia APIs to Drive Interactive

    Mobile Applications 7 Image by Mike Kelly, used with permission. Source: http://stateless.co/hal_specification.html self
  8. 8.

    HAL Ben Greenberg - Using Hypermedia APIs to Drive Interactive

    Mobile Applications 8 { "title": "Cheers", "contentRating": "TV-PG", "releaseYear": 1982, "endYear": 1993, "_links": { "self": { profile: "s:TvSeries", href: "/tvseries/12345" }, "credits": { href: "/tvseries/12345/credits" } }, "_embedded": { "episodes": [{ "title": "The Spy Who Came in for a Cold One", "season": 1, "episode": 16, "_links": { "self": { "profile": "S:TvSeriesEpisode", "href": "/tvseries/12345/episodes/9875" },
  9. 9.

    HAL Ben Greenberg - Using Hypermedia APIs to Drive Interactive

    Mobile Applications 9 { "title": "Cheers", "contentRating": "TV-PG", "releaseYear": 1982, "endYear": 1993, "_links": { "self": { profile: "S:TvSeries", href: "/tvseries/12345" }, "credits": { href: "/tvseries/12345/credits" } }, "_embedded": { "episodes": [{ "title": "The Spy Who Came in for a Cold One", "season": 1, "episode": 16 "_links": { "self": { "profile": "S:TvSeriesEpisode", "href": "/tvseries/12345/episodes/9875" },
  10. 10.

    HAL Ben Greenberg - Using Hypermedia APIs to Drive Interactive

    Mobile Applications 10 { "title": ”Cheers", "contentRating": "TV-PG", "releaseYear": 1982, "endYear": 1993, "_links": { "self": { profile: "S:TvSeries", href: "/tvseries/12345" }, "credits": { href: "/tvseries/12345/credits" } }, "_embedded": { "episodes": [{ "title": "The Spy Who Came in for a Cold One", "season": 1, "episode": 16, "_links": { "self": { "profile": "S:TvSeriesEpisode", "href": "/tvseries/12345/episodes/9875" },
  11. 11.

    HAL Ben Greenberg - Using Hypermedia APIs to Drive Interactive

    Mobile Applications 11 { "title": ”Cheers", "contentRating": "TV-PG", "releaseYear": 1982, "endYear": 1993, "_links": { "self": { profile: "S:TvSeries", href: "/tvseries/12345" }, "credits": { href: "/tvseries/12345/credits" } }, "_embedded": { "episodes": [{ "title": "The Spy Who Came in for a Cold One", "season": 1, "episode": 16, "_links": { "self": { "profile": "S:TvSeriesEpisode", "href": "/tvseries/12345/episodes/9875" },
  12. 12.

    Goals • Minimize server round trips and tolerate non-persistent connections.

    • Support a responsive client experience. Ben Greenberg - Using Hypermedia APIs to Drive Interactive Mobile Applications 12
  13. 14.
  14. 15.

    Making Responses More Cacheable Ben Greenberg - Using Hypermedia APIs

    to Drive Interactive Mobile Applications 15 /tvseries/1 Resource State title description releaseYear contentRating Links Embedded Resources Episode Episode Episode Episode Episode Episode Episode Episode Episode Episode Episode On-Demand Showings Episode Episode Episode Episode Episode Upcoming Listings Recording Recording Recording Recording episodes /tvseries/1/episodes vodShowings /tvseries/1/vod upcomingListings /tvseries/1/listings self /tvseries/1
  15. 16.

    Making Responses More Cacheable Ben Greenberg - Using Hypermedia APIs

    to Drive Interactive Mobile Applications 16 Embedded Recording Resource State recordingStatus Links resumePoints[] self Embedded Resources /recordings/12345 Episode Episode Episode Episode Episode Resume Point self tag:resumepoint-1
  16. 17.

    Ben Greenberg - Using Hypermedia APIs to Drive Interactive Mobile

    Applications 17 Episodes Episod e Episod e Episod e TV Series Resume Points Episod e Episod e Resum e Point Recordings Episod e Episod e Recor ding On Demand Assets Episod e Episod e Asset Cache-Control: private max-age=10 min Cache-Control: private max-age=1 min Cache-Control: public max-age=4 hours Cache-Control: public max-age=4 hours Cache-Control: public max-age=15 min Home Page
  17. 18.

    Making Responses More Cacheable Ben Greenberg - Using Hypermedia APIs

    to Drive Interactive Mobile Applications 18 /tvseries/12345 /my/resumePoints /tvseries/12345/episodes /tvseries/12345/ondemand /my/recordings Resource Store CDN
  18. 20.
  19. 21.

    Size of the grid Ben Greenberg - Using Hypermedia APIs

    to Drive Interactive Mobile Applications 21 21 Channel x 500 channels Listings Channel Channel Listings TV Listing 24 shows per day x 500 channels = 12,000 listings per day = 168,000 listings for two weeks x 1.2 KB/channel = 600KB x 397 bytes/listing = 63.6MB
  20. 22.

    Breaking Apart the Channel Grid Ben Greenberg - Using Hypermedia

    APIs to Drive Interactive Mobile Applications 22 /channelMap /listingChunk?{startTime,hours} /gridShape?{startTime,hours}
  21. 23.

    Breaking Apart the Channel Grid Ben Greenberg - Using Hypermedia

    APIs to Drive Interactive Mobile Applications 23 /channelMap /listingChunk?{startTime,hours} /gridShape?{startTime,hours} Channel Channel Channel Channel Channel self tag:channel-HBOHD-123
  22. 24.

    Breaking Apart the Channel Grid Ben Greenberg - Using Hypermedia

    APIs to Drive Interactive Mobile Applications 24 /channelMap /listingChunk?{startTime,hours} /gridShape?{startTime,hours} Channel Channel Channel Channel TimeOffsetChannelGroup channel tag:channel-HBOHD-123 "listingStartTimeOffsetsSecs": [ -848, 951, 2751, 4551, 6351, 8151, 9951, … ]
  23. 25.

    Breaking Apart the Channel Grid Ben Greenberg - Using Hypermedia

    APIs to Drive Interactive Mobile Applications 25 /channelMap /listingChunk?{startTime,hours} /gridShape?{startTime,hours} Channel Channel Channel Channel TV Listing channel tag:channel-HBOHD-123 self /tvlistings/98765
  24. 26.

    Breaking Apart the Channel Grid Ben Greenberg - Using Hypermedia

    APIs to Drive Interactive Mobile Applications 26 /channelMap /listingChunk?{startTime,hours} /gridShape?{startTime,hours} 336 hours 6 hours 600KB 1.3MB 1.4MB
  25. 27.

    Summary and Take Aways • Use gzip compression (server and

    client) • Support etags • Set Cache-Control headers • Be aware of changing cache semantics when embedding resources • Break up resources in line with cacheability • Componentize resources to allow UI to draw while data loads Ben Greenberg - Using Hypermedia APIs to Drive Interactive Mobile Applications 27 Ben Greenberg @bengreen benjamin_greenberg@comcast.com
  26. 28.