Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Reactive Hypermedia 
Kevin Swiber
It’s true.
I work on an open source platform 
for the Internet of Things. 
http://zettajs.org
The World As We 
Know It
The most popular APIs 
are URL-first.
Client-server architecture 
is abundant.
Event-Driven Architecture 
is often in a silo.
We are modeling HTTP handlers 
as actions on controllers.
Change is Coming
We are shifting from full 
service to self service.
We are moving from few 
and big to many and small.
We are progressing from 
rigid to flexible.
Distributed 
Questions
How do we allow clients 
to access resources 
hosted on any server?
How can API Resources offer 
event-driven data streams?
How can we manage state 
in our API Resources?
How can we make resource transition 
availability a responsibility of the 
server?
How do we gain greater 
control over latency?
Constraints
Resource abstractions 
must be joyful to use.
Proxies are a common 
component in the architecture.
Clients may need to contend with 
resources that are not yet available.
Everything needs an API.
A New Approach
API responses must 
represent state machines.
Event-driven design must run 
alongside tried and true client-server.
Multiple servers will be 
responsible for processing logic.
Utilize reactive 
programming.
Implementation
Model resources as finite 
state machines. 
LED.prototype.init = function(config) { 
config 
.type('led') 
.state('off') 
...
Use a hypermedia type that can 
represent the state machine model.
Transitions are represented as 
affordances in the message. 
"actions": [ 
{ 
"name": "turn-on", 
"method": "POST", 
"href...
We need to consume an 
object stream. 
links: [ 
{ 
title: “pulse“, 
rel: [“http://rxapi.org/object-stream“], 
href: “ws:/...
We need to consume an 
object stream. 
» wscat -c ws://... 
connected (press CTRL+C to quit) 
< {"topic":"heartbeat/1/puls...
Monitor resource events 
before taking action. 
links: [ 
{ 
title: “logs“, 
rel: [ 
“monitor“, 
“http://rxapi.org/object-...
Monitor resource events 
before taking action. 
» wscat -c ws://... 
connected (press CTRL+C to quit) 
< {"topic":"led/2/l...
We also need binary. 
links: [ 
{ 
rel: [“http://rxapi.org/binary-stream“], 
href: “ws://...“, 
type: “video/mpeg“, 
} 
]
We also need binary. 
» wscat -c ws://... 
connected (press CTRL+C to quit) 
Q`rCEDˌDIp=`"3ss79:Yk}{` 5e`>9%J[K89z^> 8X Gp...
We also need binary. 
» wscat -c ws://... 
connected (press CTRL+C to quit)
Clients work!
Going Forward
Solve the producer-consumer 
problem.
We need to do a best-effort doc 
generation from state machines.
Build reactive clients. 
get(‘http://...‘) 
.links() 
.where({ ‘rel‘, { contains: ‘monitor‘ }) 
.subscribe(function(data) ...
Make more.
Share. :)
Questions? 
• kswiber@gmail.com 
• https://twitter.com/kevinswiber 
• https://linkedin.com/in/kevinswiber 
• https://githu...
Upcoming SlideShare
Loading in …5
×

Reactive Hypermedia

1,183 views

Published on

Reactive Hypermedia is a style of API that promotes both client-server interactions and event-driven data streams. It was developed to solve the problems of massive scale introduced by the Internet of Things.

Published in: Technology
  • Be the first to comment

Reactive Hypermedia

  1. 1. Reactive Hypermedia Kevin Swiber
  2. 2. It’s true.
  3. 3. I work on an open source platform for the Internet of Things. http://zettajs.org
  4. 4. The World As We Know It
  5. 5. The most popular APIs are URL-first.
  6. 6. Client-server architecture is abundant.
  7. 7. Event-Driven Architecture is often in a silo.
  8. 8. We are modeling HTTP handlers as actions on controllers.
  9. 9. Change is Coming
  10. 10. We are shifting from full service to self service.
  11. 11. We are moving from few and big to many and small.
  12. 12. We are progressing from rigid to flexible.
  13. 13. Distributed Questions
  14. 14. How do we allow clients to access resources hosted on any server?
  15. 15. How can API Resources offer event-driven data streams?
  16. 16. How can we manage state in our API Resources?
  17. 17. How can we make resource transition availability a responsibility of the server?
  18. 18. How do we gain greater control over latency?
  19. 19. Constraints
  20. 20. Resource abstractions must be joyful to use.
  21. 21. Proxies are a common component in the architecture.
  22. 22. Clients may need to contend with resources that are not yet available.
  23. 23. Everything needs an API.
  24. 24. A New Approach
  25. 25. API responses must represent state machines.
  26. 26. Event-driven design must run alongside tried and true client-server.
  27. 27. Multiple servers will be responsible for processing logic.
  28. 28. Utilize reactive programming.
  29. 29. Implementation
  30. 30. Model resources as finite state machines. LED.prototype.init = function(config) { config .type('led') .state('off') .when('off', { allow: ['turn-on'] }) .when('on', { allow: ['turn-off'] }) .map('turn-on', this.turnOn) .map('turn-off', this.turnOff); };
  31. 31. Use a hypermedia type that can represent the state machine model.
  32. 32. Transitions are represented as affordances in the message. "actions": [ { "name": "turn-on", "method": "POST", "href": “...”, "fields": [ { "name": "action", "type": "hidden", "value": "turn-on" } ] } ]
  33. 33. We need to consume an object stream. links: [ { title: “pulse“, rel: [“http://rxapi.org/object-stream“], href: “ws://...” } ]
  34. 34. We need to consume an object stream. » wscat -c ws://... connected (press CTRL+C to quit) < {"topic":"heartbeat/1/pulse","timestamp":1411757412119,"data":61} < {"topic":"heartbeat/1/pulse","timestamp":1411757412620,"data":65} < {"topic":"heartbeat/1/pulse","timestamp":1411757413121,"data":69} < {"topic":"heartbeat/1/pulse","timestamp":1411757413622,"data":71} < {"topic":"heartbeat/1/pulse","timestamp":1411757414124,"data":66} < {"topic":"heartbeat/1/pulse","timestamp":1411757414626,"data":64} < {"topic":"heartbeat/1/pulse","timestamp":1411757415128,"data":68} < {"topic":"heartbeat/1/pulse","timestamp":1411757415629,"data":63} < {"topic":"heartbeat/1/pulse","timestamp":1411757416130,"data":65} < {"topic":"heartbeat/1/pulse","timestamp":1411757416631,"data":63}
  35. 35. Monitor resource events before taking action. links: [ { title: “logs“, rel: [ “monitor“, “http://rxapi.org/object-stream“ ], href: “ws://...” } ]
  36. 36. Monitor resource events before taking action. » wscat -c ws://... connected (press CTRL+C to quit) < {"topic":"led/2/logs","timestamp": 1411809676901,"transition":"turn-on","input":[],"properties": {"id":"2","type":"led","name":null,"state":"on"}} < {"topic":"led/2/logs","timestamp": 1411809677548,"transition":"turn-off","input":[],"properties": {"id":"2","type":"led","name":null,"state":"off"}} < {"topic":"led/2/logs","timestamp": 1411809678483,"transition":"turn-on","input":[],"properties": {"id":"2","type":"led","name":null,"state":"on"}} < {"topic":"led/2/logs","timestamp": 1411809679126,"transition":"turn-off","input":[],"properties": {"id":"2","type":"led","name":null,"state":"off"}}
  37. 37. We also need binary. links: [ { rel: [“http://rxapi.org/binary-stream“], href: “ws://...“, type: “video/mpeg“, } ]
  38. 38. We also need binary. » wscat -c ws://... connected (press CTRL+C to quit) Q`rCEDˌDIp=`"3ss79:Yk}{` 5e`>9%J[K89z^> 8X Gp;W̮qXF h1{%O;7<Bi ڞ.r r5 vyeK[X@ƯDRmT:uLz[ހށނރބޅކއވމފދތލގޏސޑޒޓޔޕޖޗޘޙޚޛޜޝޞޟޠޡޢޣޤޥަާިީުޫެޭޮޯްޱV .vK",,u!N8=֝LQ=s~ӆ`]{E6[ WȝM]3Uo|&n Њmo('/K>2칩e,l{%`:<rtN|SXu曆psFJS*s#AB]ý0Rt_`uS}vX3ctA>kJfuΎ^L๖䜼V"u8GU粦 *ڹ
  39. 39. We also need binary. » wscat -c ws://... connected (press CTRL+C to quit)
  40. 40. Clients work!
  41. 41. Going Forward
  42. 42. Solve the producer-consumer problem.
  43. 43. We need to do a best-effort doc generation from state machines.
  44. 44. Build reactive clients. get(‘http://...‘) .links() .where({ ‘rel‘, { contains: ‘monitor‘ }) .subscribe(function(data) { console.log(‘Received:‘, data); });
  45. 45. Make more.
  46. 46. Share. :)
  47. 47. Questions? • kswiber@gmail.com • https://twitter.com/kevinswiber • https://linkedin.com/in/kevinswiber • https://github.com/kevinswiber

×