Backpressure—resistance opposing the desired flow of data through software—from massive scale, to death by a thousand cuts, it's something nearly every software engineer will have to deal with at some point. For some, it’s a frequent problem. But the term itself isn’t nearly as understood and recognized as such. In this talk, we'll discover what backpressure really is, when it happens, and the strategies you can apply to deal with it.

1. Backpressure?
Resistance is not futile.
@_jayphelps

2. Jay Phelps
@_jayphelps
Senior Software Engineer
Citadel
@_jayphelps

3. Backpressure
@_jayphelps

4. A term borrowed from fluid dynamics,
like in automotive exhaust and house
plumbing.
@_jayphelps

5. “Resistance or force opposing the
desired flow of fluid through pipes.”
@_jayphelps

6. “Resistance or force opposing the
desired flow of fluid through pipes.”
@_jayphelps

7. “Resistance or force opposing the
desired flow of fluid through pipes.”
^ data through software.
@_jayphelps

8. “Resistance or force opposing the
desired flow of data through software.”
@_jayphelps

9. i.e. “input is coming in faster
than we can output”
@_jayphelps

10. Cool
@_jayphelps

11. …but…what is Backpressure?
@_jayphelps

12. Let’s start with an analogy!
@_jayphelps

13. I Love Lucy: Chocolate Factory
@_jayphelps

14. "I Love Lucy" Job Switching - 1952 - CBS
https://www.youtube.com/watch?v=_y0nsN4px10

15. Lucy has Backpressure!
@_jayphelps

16. She tries to set them to the side
(buffering)
@_jayphelps

17. Then she tries eating and hiding them
(dropping)
@_jayphelps

18. She needs to slow down the conveyor belt
(producer control)
@_jayphelps

19. Let’s talk software
@_jayphelps

20. UI Rendering
@_jayphelps

21. User input
e.g. keyboard, mouse, etc.
@_jayphelps

22. Death by a thousand cuts
e.g. slow DOM updates because a lot of work is being done
@_jayphelps

23. High volume WebSockets
@_jayphelps

30. Events are coming in faster
than we can update the DOM
@_jayphelps

31. Monitor wouldn’t be able to display it anyway!
No point updating DOM more than once within 16.7 ms (60 fps)
@_jayphelps

32. Ignore source for given time, then emit most recent value
auditTime(duration: number, scheduler?: Scheduler): Observable
@_jayphelps

33. requestAnimationFrame()
@_jayphelps

34. requestAnimationFrame() = animationFrameScheduler
@_jayphelps

39. Is this even a good User Experience?
@_jayphelps

40. Performance problems are often UX problems!
@_jayphelps

41. Backpressure Strategies
@_jayphelps

42. If you can, scale up your resources
@_jayphelps

43. Three fundamental strategies
@_jayphelps

44. Control the producer
@_jayphelps

45. Control the producer
Buffer
@_jayphelps

46. Control the producer
Buffer
Drop
@_jayphelps

47. Control the producer
slow down/speed up is decided by consumer
@_jayphelps

48. const source = connectToSource();
source.pull(response1 => {
console.log(response1);
// later…
source.pull(response2 => {
console.log(response2);
});
});
@_jayphelps

49. interface AsyncIterator<T> {
next(): Promise<{
value?: T,
done: boolean
}>;
}
@_jayphelps

50. const asyncIterator = {
next() {
return Promise.resolve({
value: 9001,
done: false
});
}
};
asyncIterator.next().then(value => {
console.log(value);
// 9001
});
@_jayphelps

51. const source = connectToSource();
source.pull(response1 => {
console.log(response1);
// later…
source.pull(response2 => {
console.log(response2);
});
});
@_jayphelps

52. const source = connectToSource();
source.next().then(response1 => {
console.log(response1);
// later…
source.next().then(response2 => {
console.log(response2);
});
});
@_jayphelps

53. const source = connectToSource();
const response1 = await source.next();
console.log(response1);
// later…
const response2 = await source.next();
console.log(response2);
@_jayphelps

54. IxJS
Interactive Extensions - utilities for dealing with AsyncIterators
@_jayphelps

55. Pull+Push may have overhead
Pulling n-number instead of just 1-by-1 can somewhat mitigate
@_jayphelps

56. When to use Push vs. Pull+Push?
@_jayphelps

57. Push
When you can’t (or don’t want to) control the producer
Pull+Push
When you can control the producer
@_jayphelps

58. It’s not unusual to use both push and
pull+push streams in the same app
@_jayphelps

59. Buffer
accumulate incoming data spikes temporarily
@_jayphelps

60. import { fromEvent } from 'rxjs';
import { bufferTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(events => {
console.log(events);
// [Event, Event, Event]
});
bufferTime(300)
@_jayphelps

61. import { fromEvent } from 'rxjs';
import { bufferTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(events => {
console.log(events);
// [Event, Event, Event]
});
bufferTime(300)
@_jayphelps

62. import { fromEvent } from 'rxjs';
import { bufferTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(events => {
console.log(events);
// [Event, Event, Event]
});
bufferTime(300)
@_jayphelps

63. Be careful with unbounded buffers!
@_jayphelps

64. import { fromEvent } from 'rxjs';
import { bufferTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(events => {
console.log(events);
// [Event, Event, Event]
});
bufferTime(300)
@_jayphelps

65. import { fromEvent } from 'rxjs';
import { bufferTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(events => {
console.log(events);
// [Event, Event, Event]
});
bufferTime(300)
@_jayphelps

66. import { fromEvent } from 'rxjs';
import { bufferTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(events => {
console.log(events);
// [Event, Event, Event]
});
bufferTime(300, null, 10) // max of 10
@_jayphelps

67. Drop
sample a percentage of the incoming data
@_jayphelps

68. throttle, debounce, audit, sample, etc
@_jayphelps

69. import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(event => {
console.log(event);
});
throttleTime(300)
@_jayphelps

70. import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(event => {
console.log(event);
});
throttleTime(300)
@_jayphelps

71. import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(event => {
console.log(event);
});
debounceTime(300)
@_jayphelps

72. import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(event => {
console.log(event);
});
auditTime(300)
@_jayphelps

73. import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
const input = document.getElementById('input');
const events = fromEvent(input, 'input').pipe(
);
events.subscribe(event => {
console.log(event);
});
sampleTime(300)
@_jayphelps

74. You can provide a different scheduler
They use AsyncScheduler by default, which is basically setTimeout
@_jayphelps

75. Summary
@_jayphelps

76. “Resistance opposing the
desired flow of data through software.”
@_jayphelps

77. i.e. “input is coming in faster
than we can output”
@_jayphelps

78. Control the producer
Buffer
Drop
@_jayphelps

79. @_jayphelps

80. If RxJS is a DSL, why not
a full programming language?
@_jayphelps

81. let a = 1
let b = 2
let c = a + b
// 3
@_jayphelps

82. let a = 1 then 2
let b = 2
let c = a + b
do log(a)
// 3
// 4
@_jayphelps

83. let i = 0 then 1 then 2
do log(i)
// 0
// 1
// 2
@_jayphelps

84. let i = 0 then i + 1
do log(i)
// 0
// 1
// 2
// 3
// …etc
@_jayphelps

85. let i = 0 then i delay 1s + 1
do log(i)
// 0
// …1 sec later…
// 1
// …1 sec later…
// 2
// etc
@_jayphelps

86. let value = WebSocket<Int64>('ws://numbers.com')
backpressure (buffer: 1, latest: true)
// ***
// Standing in for more complicated application logic
// ***
let timesTen = value * 10
let result = String::fromInt64(timesTen)
do document.body.setInnerText(result)
@_jayphelps

87. ApplicationInputs Outputs
@_jayphelps

88. Application
Pull
Inputs Outputs
@_jayphelps

89. Application
PullPull
Inputs Outputs
@_jayphelps

90. Application
PullPull
Inputs Outputs
@_jayphelps

91. Application
PullPull
Push
Inputs Outputs
@_jayphelps

92. Application
Pull
Push
Pull
Push
Inputs Outputs
@_jayphelps

93. JaguarA Reactive Dataflow Language
@_jayphelps

94. It’s just an experiment for fun!
No one really knows if this is a good idea,
in practice, that’s why I’m doing it!
@_jayphelps

95. Thanks!
@_jayphelps
@_jayphelps