Tweet
Tweet

Slide 1

Slide 1 text

Adding realtime to your API Justin Karneges CEO, Fanout justin@fanout.io @jkarneges

Slide 2

Slide 2 text

Adding realtime to your API justin@fanout.io About me 䡧 Fanout 䡧 Livefyre CTO 䡧 XMPP contributor 䡧 Keywords: realtime, network protocols, federation, open standards

Slide 3

Slide 3 text

Adding realtime to your API justin@fanout.io Topics 䡧 What is a realtime API? 䡧 Challenges 䡧 A new architecture 䡧 Demo

Slide 4

Slide 4 text

Adding realtime to your API justin@fanout.io What is a realtime API?

Slide 5

Slide 5 text

Adding realtime to your API justin@fanout.io What is realtime? 䡧 “Push” data to recipients 䡧 News, fintech, collaboration, chat, dispatch, games, etc. 䡧 Near-realtime

Slide 6

Slide 6 text

Adding realtime to your API justin@fanout.io Does my API need to be realtime? 䡧 Users expect realtime experiences 䡧 Realtime apps depend on realtime APIs 䡧 Polling sucks 䡧 So…. yes

Slide 7

Slide 7 text

Adding realtime to your API justin@fanout.io “A Post HTTP World” ? 䡧 Don’t worry, most realtime APIs today are HTTP-based. 䡧 There are new protocols, but it’s going to be a long transition. 䡧 Also, HTTP/2 may address most issues.

Slide 8

Slide 8 text

Adding realtime to your API justin@fanout.io Common realtime push mechanisms 䡧 HTTP streaming 䡧 HTTP long-polling 䡧 Webhooks (HTTP callbacks) 䡧 WebSockets

Slide 9

Slide 9 text

Adding realtime to your API justin@fanout.io HTTP streaming 䡧 Response with indefinite length 䡧 Content usually line-delimited text 䡧 Usually JSON or Server-Sent Events (SSE)

Slide 10

Slide 10 text

Adding realtime to your API justin@fanout.io GET /1.1/statuses/sample.json HTTP/1.1
 Host: stream.twitter.com
 Authorization: OAuth […] HTTP streaming

Slide 11

Slide 11 text

Adding realtime to your API justin@fanout.io HTTP/1.1 200 OK connection: close content-type: application/json date: Fri, 17 Apr 2015 00:32:07 GMT server: tsa transfer-encoding: chunked x-connection-hash: 6028cbda…6f0443a6 {"created_at":"Fri Apr 17 00:32:06 +0000 2015”,"id": 588862464202297345,”text":"tweet 1", … } {"created_at":"Fri Apr 17 00:32:07 +0000 2015”,"id": 588862468392255488,"text":"tweet 2", … } … HTTP streaming

Slide 12

Slide 12 text

Adding realtime to your API justin@fanout.io Challenges

Slide 13

Slide 13 text

Adding realtime to your API justin@fanout.io Immature ecosystem 䡧 Most tools are end-to-end 䡧 Little interoperability 䡧 Realtime APIs tend to be custom-built

Slide 14

Slide 14 text

Adding realtime to your API justin@fanout.io Custom-built realtime push 䡧 Event-driven frameworks 䡧 Complex code 䡧 Separate codebase from the non-realtime parts 䡧 Specific to vendor/application

Slide 15

Slide 15 text

Adding realtime to your API justin@fanout.io API-oriented realtime solutions

Slide 16

Slide 16 text

Adding realtime to your API justin@fanout.io A new architecture

Slide 17

Slide 17 text

Adding realtime to your API justin@fanout.io Pull has it right Client Client Client Caching / CDN API Management Backend API + directives API

Slide 18

Slide 18 text

Adding realtime to your API justin@fanout.io Let’s make Push awesome as Pull 䡧 Separate API design, engineering, operations 䡧 Interoperable / standardized components 䡧 Reference implementation: Pushpin 䡧 Proxy server with realtime magic 䡧 Open source

Slide 19

Slide 19 text

Adding realtime to your API justin@fanout.io Pushpin philosophy … the API process …

Slide 20

Slide 20 text

Adding realtime to your API justin@fanout.io Pushpin philosophy GET /stream

Slide 21

Slide 21 text

Adding realtime to your API justin@fanout.io Pushpin philosophy API Server GET /stream

Slide 22

Slide 22 text

Adding realtime to your API justin@fanout.io Pushpin philosophy API Server GET /stream open integration protocol

Slide 23

Slide 23 text

Adding realtime to your API justin@fanout.io Pushpin philosophy Client API Server GET /stream open integration protocol

Slide 24

Slide 24 text

Adding realtime to your API justin@fanout.io Pushpin philosophy Client API Server GET /stream open integration protocol

Slide 25

Slide 25 text

Adding realtime to your API justin@fanout.io Generic Realtime Intermediary Protocol (GRIP) 䡧 Common protocol between edge and backend 䡧 Engineering targets GRIP 䡧 DevOps manages the edge tier however they want 䡧 Client protocol agnostic

Slide 26

Slide 26 text

Adding realtime to your API justin@fanout.io GRIP flow Client API Server HTTP request

Slide 27

Slide 27 text

Adding realtime to your API justin@fanout.io GRIP flow Client API Server HTTP request HTTP request (forwarded)

Slide 28

Slide 28 text

Adding realtime to your API justin@fanout.io GRIP flow Client API Server HTTP request HTTP request (forwarded) instructions response

Slide 29

Slide 29 text

Adding realtime to your API justin@fanout.io GRIP flow Client API Server HTTP request (hold for updates)

Slide 30

Slide 30 text

Adding realtime to your API justin@fanout.io GRIP flow Client API Server HTTP request push payload

Slide 31

Slide 31 text

Adding realtime to your API justin@fanout.io GRIP flow Client API Server HTTP request push payload HTTP response (realtime push)

Slide 32

Slide 32 text

Adding realtime to your API justin@fanout.io Real world example 䡧 LaunchDarkly 䡧 Continuous delivery platform 䡧 Feature flags with controlled rollouts 䡧 Feature checks don’t require contact with LaunchDarkly

Slide 33

Slide 33 text

Adding realtime to your API justin@fanout.io Real world example LD Agent API Backend App Client App Server A LaunchDarkly customer’s web service LaunchDarkly API service GET /page config sync (config cache)

Slide 34

Slide 34 text

Adding realtime to your API justin@fanout.io Demo!

Slide 35

Slide 35 text

Adding realtime to your API justin@fanout.io Example project: TodoMVC 䡧 http://todomvc.pushpin.org/ 䡧 To-do list demo with realtime collaboration 䡧 Built with React, Pushpin, Django, Redis 䡧 API documented with Apiary

Slide 36

Slide 36 text

Adding realtime to your API justin@fanout.io Thanks! 䡧 Tell us about realtime apps you’re building 䡧 Check out the project:
 http://pushpin.org