-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
290 lines (272 loc) · 9.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Skyring - Distributed Timers</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/blood.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
The `Delayed Work` Problem
<aside class="notes">
<ul>
<li>There is a recurring problem that every developer encounters</li>
<li>The general problem criteria are the same...</li>
</ul>
</aside>
</section>
<section>
<section>Delay execution of some code for <code>X</code> amount of time</section>
<section>
Exectue as soon as time has lapsed
<aside class="notes">
<p>accuracy is important - not ASAP</p>
<p>a MQ isn't enough</p>
</aside>
</section>
<section>Execute <em>Exactly</em> once</section>
<section>Waiting for execution doesn't block everything else</section>
<section>
Ability to cancel pending execution
<aside class="notes">
example:
<br/>
Ability to "unsend" an email
<ol>
<li>write nasty email to boss</li>
<li>accidentally hit send</li>
<li>delay send for 10 seconds</li>
<li>user hits "undo" -> cancel timer</li>
</ol>
</aside>
</section>
</section>
<section>
<h4>setTimeout / clearTimeout</h4>
<p class="fragment fade-up">Asynchronous</p>
<p class="fragment fade-up">Non-Blocking</p>
<p class="fragment fade-up">High Resolution (ms)</p>
<p class="fragment fade-up">Cancelable</p>
<p class="fragment fade-up"><em><strong>Exactly Once</strong></em> Execution Guarantees</p>
<aside class="notes">
<p>The solution is staring you in the face</p>
<p>A timer does all of the things we want</p>
<p>you can probably see the code in your head</p>
</aside>
</section>
<section>
<div><strong>10 Lines of Code ( literally )</strong></div>
<pre>
<code data-trim data-noescape class="js">
const timers = new Map()
function set(id, delay, fn) {
if (!timers.has(id)) {
timers.set(id, setTimeout( fn, delay ).unref());
}
}
function cancel(id) {
const ref = timers.get(id);
clearTimeout( ref );
return timers.delete(id);
}
</code>
</pre>
<aside class="notes">
code is:
<ul>
<li>excplicit in what it does</li>
<li>easy to follow</li>
<li>to the point</li>
</ul>
A first year developer who has never seen javascript can understand
</aside>
</section>
<section>
Timers Live In memory
<aside class="notes">
This makes them unreliable
<ul>
<li>Browsers are volatile ( refresh, navigation )</li>
<li>Servers are ephemeral</li>
<li>Clusters - Locating a timer in a 10,000 node cluster is hard...</li>
<li>Usually requires complex message queuing systems, centralize data storage, etc</li>
<li>Things get very complicated very hard</li>
</ul>
</aside>
</section>
<section>
<p class="fragement" data-fragment-index="1">
<img src="./img/skyring-inverted.png" style="border:0; background: transparent; max-width: 960" alt="skyring logo"/>
</p>
<p class="fragment fade-in" data-fragment-index="2">
Distributed Timers - As A Service
</p>
<aside class="notes">
Exposes a very simple API
</aside>
</section>
<section>
<section>
<h3>Set A Timer:</h3>
<h5 style="text-align: left; margin: 0 auto; width: 90%">POST /timer</h5>
<pre>
<code data-trim data-noescape class="bash">
curl -i -XPOST http://localhost:2300/timer -d '{
"timeout": 10000
, "data": "Hello!"
, "callback": {
"transport": "http"
, "uri": "http://some.domain.com/world"
, "method": "post"
}
}'
-H "Content-Type: application/json"
</code>
</pre>
<aside class="notes">
<ul>
<li>Timer execution sends a message over a specified transport</li>
<li>http ( for now )</li>
</ul>
</aside>
</section>
<section>
<h4>Response</h4>
<pre>
<code data-trim data-noescape class="http">
HTTP/1.1 201 CREATED
location: /timer/4adb026b-6ef3-44a8-af16-4d6be0343ecf
Date: Fri, 23 Dec 2016 00:19:13 GMT
Connection: keep-alive
Content-Length: 0
</code>
</pre>
<aside class="notes">
<ul>
<li>All relevant info in headers</li>
<li>easier to deal with</li>
<li>no payload is always faster</li>
</ul>
</aside>
</section>
</section>
<section>
<section>
<h3>Cancel A Timer</h3>
<h5 style="text-align: left; margin: 0 auto; width: 90%">DELETE /timer/:id</h5>
<pre>
<code data-trim data-noescape class="bash">
curl -i -XDELETE http://localhost:2300/timer/4adb026b-6ef3-44a8-af16-4d6be0343ecf
</code>
</pre>
</section>
<section>
<h3>Response</h3>
<pre>
<code data-trim data-noescape class="http">
HTTP/1.1 202 Accepted
Date: Fri, 23 Dec 2016 00:22:12 GMT
Connection: keep-alive
Content-Length: 0
</code>
</pre>
</section>
</section>
<section>
<section>
<h3>Hashring</h3>
<img src="./img/s01.png" style="border:0; background: transparent; max-width: 80%" alt="hashring-1"/>
<aside class="notes">
<ul>
<li>nodes are aligned in consistent hashing w/ persistent tcp connection</li>
<li>Each node responsible for a section of key</li>
<li>Given an KEY, know exactly which server is responsible</li>
<li>one network hop</li>
<li>true horizontal scale - no p2p / message bus</li>
</ul>
A a couple of interesting problems...
</aside>
</section>
<section>
<h3>Join & Rebalance</h3>
<img src="./img/s02.png" style="border:0; background: transparent; max-width: 80%" alt="hashring join"/>
<aside class="notes">
<ul>
<li>when a new node joins the ring, who is responsible changes</li>
<li>automatically redistributes timers</li>
</ul>
</aside>
</section>
<section>
<h3>Leave & Rebalance</h3>
<img src="./img/s03.png" style="border:0; background: transparent; max-width: 80%" alt="hashring leave"/>
<aside class="notes">
<ul>
<li>Leaving is tricky</li>
<li>No longer a member of the ring</li>
<li>NATS messaging layer</li>
<li>Nodes in NATS group - random distribution</li>
<li>business as usual</li>
</ul>
</aside>
</section>
<section>
<h3>Bird's eye view</h3>
<img src="./img/skyring-arch-inverted.png" style="border:0; background: transparent; max-width: 75%" alt="skyring arch"/>
<aside class="notes">
</aside>
</section>
</section>
<section>
<h3>DEMO</h3>
</section>
<section style="text-align: left;">
<h2>Eric Satterwhite <img src="./img/help-logo.png" style="border: 0; display: inline-block; background-color: transparent; width: 175px" alt="help.com" /></h2>
I work at Help.com - We do Node.js
<br/>
<br/>
<ul>
<li>codedependant / esatterwhite</li>
<li><strong>website</strong>: codedependant.net</li>
<li><strong>twitter</strong>: codedependant</li>
<li><strong>github</strong>: github.com/esatterwhite</li>
</ul>
<h2>Skyring</h2>
<ul>
<li><strong>github</strong>: esatterwhite/skyring</li>
<li><strong>slides</strong>: esatterwhite/skyring-lightningtalk-01-17</li>
</ul>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
width: 1280,
height: 700,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>