/
index.html
executable file
·249 lines (232 loc) · 26.5 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>websockets-in-production-with-and-without-a-framework</title>
<meta name="description" content="Websockets in production: with and without a framework">
<meta name="author" content="Peter Peerdeman">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/pp-reveal.css" id="theme">
<!-- For syntax highlighting -->
<!-- <link rel="stylesheet" href="lib/css/zenburn.css"> -->
<link rel="stylesheet" href="lib/css/googlecode.css">
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<meta property="og:image" content="favicon/facebook1200.png" />
<link rel="icon" type="image/x-icon" href="/faviconfavicon.ico" />
<link rel="icon" type="image/png" href="favicon/icon16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon/icon32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon/icon96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon/icon192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="favicon/icon57.png" sizes="57x57" />
<link rel="apple-touch-icon" href="favicon/icon72.png" sizes="72x72" />
<link rel="apple-touch-icon" href="favicon/icon76.png" sizes="76x76" />
<link rel="apple-touch-icon" href="favicon/icon114.png" sizes="114x114" />
<link rel="apple-touch-icon" href="favicon/icon120.png" sizes="120x120" />
<link rel="apple-touch-icon" href="favicon/icon144.png" sizes="144x144" />
<link rel="apple-touch-icon" href="favicon/icon152.png" sizes="152x152" />
<meta name="msapplication-TileImage" content="favicon/favicon-144.png" />
<meta name="msapplication-TileColor" content="#6C1EE7" />
<meta name="application-name" content="Lifely" />
<meta name="msapplication-square70x70logo" content="favicon/tile-tiny.png" />
<meta name="msapplication-square150x150logo" content="favicon/tile-square.png" />
<meta name="msapplication-wide310x150logo" content="favicon/tile-wide.png" />
<meta name="msapplication-square310x310logo" content="favicon/tile-large.png" />
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section data-state="firstSlide" class="pp-title" data-background="images-theme/bg/bg-intro.jpg">
<h1>Websockets & DDP: <br/>in production</h1>
<div class="divider"></div>
<img src="images-theme/peter.png" alt="" width="204" height= "136">
<span class="block">
<a href="http://twitter.com/peterpeerdeman">@peterpeerdeman</a>
</span>
<svg class="pp-title--logo" viewBox="0 0 80 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Artboard">
<path d="M56.3555556,5.79555556 L53.0962963,24.1659259 L58.0148148,24.1659259 L61.8074074,2.83259259 L56.3555556,5.79555556 Z M17.7185185,10.5955556 L15.3481481,24.2251852 L20.2666667,24.2251852 L23.1703704,7.69185185 L17.7185185,10.5955556 Z M69.9851852,26.477037 C69.5111111,27.2474074 69.0962963,27.9585185 68.6814815,28.6103704 C68.3030185,29.2215769 67.821879,29.7628587 67.2592593,30.2103704 C66.7347917,30.6402648 66.1306646,30.9624659 65.4814815,31.1585185 C64.7171675,31.410303 63.915661,31.530529 63.1111111,31.5140741 C62.2678008,31.5294956 61.4274821,31.40945 60.6222222,31.1585185 L61.3333333,27.1288889 C61.7858086,27.3121253 62.2675512,27.4124883 62.7555556,27.4251852 C63.3555666,27.4587269 63.9467192,27.2687136 64.4148148,26.8918519 C64.864057,26.4588474 65.2438297,25.9591465 65.5407407,25.4103704 L66.2518519,24.1659259 L62.8148148,8.99555556 L68.1481481,8.99555556 L69.6888889,18.9511111 L69.7481481,18.9511111 L74.7851852,8.99555556 L80,8.99555556 L69.9851852,26.477037 Z M40.7111111,17.8962963 C40.6855548,17.9938119 40.6657674,18.0927488 40.6518519,18.1925926 C40.6510381,18.5872799 40.7531636,18.9753571 40.9481481,19.3185185 C41.1404464,19.6486139 41.4035523,19.9319587 41.7185185,20.1481481 C42.0349504,20.3952791 42.3976213,20.5766146 42.7851852,20.6814815 C43.1896658,20.7985494 43.6085493,20.8583899 44.0296296,20.8592593 C44.7437212,20.8827259 45.4535679,20.7407565 46.1037037,20.4444444 C46.7096163,20.1581599 47.2532762,19.7554488 47.7037037,19.2592593 L50.7851852,21.6888889 C49.890897,22.685289 48.7742639,23.456781 47.5259259,23.9407407 C46.2989235,24.4207249 44.9915774,24.6620811 43.6740741,24.6518519 C42.6708936,24.6679204 41.6713101,24.5279787 40.7111111,24.237037 C39.8393963,23.9709163 39.0322985,23.5270125 38.3407407,22.9333333 C37.6793274,22.327959 37.1367044,21.6044617 36.7407407,20.8 C36.32289,19.8904343 36.1201193,18.8968578 36.1481481,17.8962963 C36.1434111,16.6369585 36.384981,15.3888474 36.8592593,14.2222222 C37.291856,13.1202379 37.9360786,12.1136402 38.7555556,11.2592593 C39.5854582,10.4228219 40.5721903,9.75828802 41.6592593,9.3037037 C42.8242248,8.82385986 44.0734587,8.58207265 45.3333333,8.59259259 C46.2591662,8.57157175 47.1815876,8.71194023 48.0592593,9.00740741 C48.8451936,9.27809974 49.5701052,9.7009648 50.1925926,10.2518519 C50.8099931,10.7973855 51.2789357,11.490605 51.5555556,12.2666667 C51.8767952,13.1392521 52.0374099,14.0627863 52.0296296,14.9925926 C52.0296296,15.3481481 51.9703704,15.8222222 51.9111111,16.3555556 C51.8410631,16.8938091 51.7421552,17.4279117 51.6148148,17.9555556 L40.7111111,17.9555556 L40.7111111,17.8962963 L40.7111111,17.8962963 Z M47.6444444,14.9333333 C47.6444444,14.8148148 47.7037037,14.7555556 47.7037037,14.637037 L47.7037037,14.3407407 C47.7214376,13.7101388 47.4614657,13.1035376 46.9925926,12.6814815 C46.4161077,12.1957898 45.6692035,11.9610484 44.9185185,12.0296296 C44.410051,12.0304058 43.9066902,12.131078 43.437037,12.3259259 C43.0212393,12.4918 42.63956,12.7328606 42.3111111,13.037037 C42.005737,13.3103021 41.7457071,13.6303389 41.5407407,13.9851852 C41.3625264,14.3031164 41.223252,14.6413544 41.1259259,14.9925926 L47.6444444,14.9925926 L47.6444444,14.9333333 L47.6444444,14.9333333 Z M37.0962963,4.74074074 C36.6831254,4.57129486 36.2389655,4.49053853 35.7925926,4.5037037 C35.4026142,4.47748798 35.0129737,4.55951756 34.6666667,4.74074074 C34.3706454,4.90689253 34.109153,5.12815535 33.8962963,5.39259259 C33.703322,5.68992484 33.5443035,6.00796198 33.4222222,6.34074074 C33.3151037,6.68946244 33.2358423,7.04613874 33.1851852,7.40740741 L32.8888889,9.00740741 L36.3259259,9.00740741 L35.6740741,12.6814815 L32.2962963,12.6814815 L30.2222222,24.237037 L25.4222222,24.237037 L27.4962963,12.6814815 L24.7111111,12.6814815 L25.362963,9.00740741 L28.0296296,9.00740741 L28.3259259,7.46666667 C28.4999827,6.60095361 28.7376647,5.7492598 29.037037,4.91851852 C29.6174756,3.25251738 30.8616411,1.90109623 32.4740741,1.18518519 C33.4620864,0.75068991 34.5364063,0.547988036 35.6148148,0.592592593 C36.0305106,0.582760502 36.4463787,0.602563742 36.8592593,0.651851852 C37.2227625,0.689487379 37.580695,0.769027929 37.9259259,0.888888889 L37.0962963,4.74074074 Z M0,24.1659259 L3.79259259,2.5362963 L8.88888889,2.5362963 L5.80740741,19.7214815 L13.2740741,19.7214815 L12.5037037,24.1659259 L0,24.1659259 L0,24.1659259 Z" id="Logo"></path>
</g>
</g>
</svg>
</section>
<section class="pp-title" data-background="images-theme/bg/bg-intro.jpg">
<svg class="pp-title-logo-big" viewBox="0 0 80 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Artboard">
<path d="M56.3555556,5.79555556 L53.0962963,24.1659259 L58.0148148,24.1659259 L61.8074074,2.83259259 L56.3555556,5.79555556 Z M17.7185185,10.5955556 L15.3481481,24.2251852 L20.2666667,24.2251852 L23.1703704,7.69185185 L17.7185185,10.5955556 Z M69.9851852,26.477037 C69.5111111,27.2474074 69.0962963,27.9585185 68.6814815,28.6103704 C68.3030185,29.2215769 67.821879,29.7628587 67.2592593,30.2103704 C66.7347917,30.6402648 66.1306646,30.9624659 65.4814815,31.1585185 C64.7171675,31.410303 63.915661,31.530529 63.1111111,31.5140741 C62.2678008,31.5294956 61.4274821,31.40945 60.6222222,31.1585185 L61.3333333,27.1288889 C61.7858086,27.3121253 62.2675512,27.4124883 62.7555556,27.4251852 C63.3555666,27.4587269 63.9467192,27.2687136 64.4148148,26.8918519 C64.864057,26.4588474 65.2438297,25.9591465 65.5407407,25.4103704 L66.2518519,24.1659259 L62.8148148,8.99555556 L68.1481481,8.99555556 L69.6888889,18.9511111 L69.7481481,18.9511111 L74.7851852,8.99555556 L80,8.99555556 L69.9851852,26.477037 Z M40.7111111,17.8962963 C40.6855548,17.9938119 40.6657674,18.0927488 40.6518519,18.1925926 C40.6510381,18.5872799 40.7531636,18.9753571 40.9481481,19.3185185 C41.1404464,19.6486139 41.4035523,19.9319587 41.7185185,20.1481481 C42.0349504,20.3952791 42.3976213,20.5766146 42.7851852,20.6814815 C43.1896658,20.7985494 43.6085493,20.8583899 44.0296296,20.8592593 C44.7437212,20.8827259 45.4535679,20.7407565 46.1037037,20.4444444 C46.7096163,20.1581599 47.2532762,19.7554488 47.7037037,19.2592593 L50.7851852,21.6888889 C49.890897,22.685289 48.7742639,23.456781 47.5259259,23.9407407 C46.2989235,24.4207249 44.9915774,24.6620811 43.6740741,24.6518519 C42.6708936,24.6679204 41.6713101,24.5279787 40.7111111,24.237037 C39.8393963,23.9709163 39.0322985,23.5270125 38.3407407,22.9333333 C37.6793274,22.327959 37.1367044,21.6044617 36.7407407,20.8 C36.32289,19.8904343 36.1201193,18.8968578 36.1481481,17.8962963 C36.1434111,16.6369585 36.384981,15.3888474 36.8592593,14.2222222 C37.291856,13.1202379 37.9360786,12.1136402 38.7555556,11.2592593 C39.5854582,10.4228219 40.5721903,9.75828802 41.6592593,9.3037037 C42.8242248,8.82385986 44.0734587,8.58207265 45.3333333,8.59259259 C46.2591662,8.57157175 47.1815876,8.71194023 48.0592593,9.00740741 C48.8451936,9.27809974 49.5701052,9.7009648 50.1925926,10.2518519 C50.8099931,10.7973855 51.2789357,11.490605 51.5555556,12.2666667 C51.8767952,13.1392521 52.0374099,14.0627863 52.0296296,14.9925926 C52.0296296,15.3481481 51.9703704,15.8222222 51.9111111,16.3555556 C51.8410631,16.8938091 51.7421552,17.4279117 51.6148148,17.9555556 L40.7111111,17.9555556 L40.7111111,17.8962963 L40.7111111,17.8962963 Z M47.6444444,14.9333333 C47.6444444,14.8148148 47.7037037,14.7555556 47.7037037,14.637037 L47.7037037,14.3407407 C47.7214376,13.7101388 47.4614657,13.1035376 46.9925926,12.6814815 C46.4161077,12.1957898 45.6692035,11.9610484 44.9185185,12.0296296 C44.410051,12.0304058 43.9066902,12.131078 43.437037,12.3259259 C43.0212393,12.4918 42.63956,12.7328606 42.3111111,13.037037 C42.005737,13.3103021 41.7457071,13.6303389 41.5407407,13.9851852 C41.3625264,14.3031164 41.223252,14.6413544 41.1259259,14.9925926 L47.6444444,14.9925926 L47.6444444,14.9333333 L47.6444444,14.9333333 Z M37.0962963,4.74074074 C36.6831254,4.57129486 36.2389655,4.49053853 35.7925926,4.5037037 C35.4026142,4.47748798 35.0129737,4.55951756 34.6666667,4.74074074 C34.3706454,4.90689253 34.109153,5.12815535 33.8962963,5.39259259 C33.703322,5.68992484 33.5443035,6.00796198 33.4222222,6.34074074 C33.3151037,6.68946244 33.2358423,7.04613874 33.1851852,7.40740741 L32.8888889,9.00740741 L36.3259259,9.00740741 L35.6740741,12.6814815 L32.2962963,12.6814815 L30.2222222,24.237037 L25.4222222,24.237037 L27.4962963,12.6814815 L24.7111111,12.6814815 L25.362963,9.00740741 L28.0296296,9.00740741 L28.3259259,7.46666667 C28.4999827,6.60095361 28.7376647,5.7492598 29.037037,4.91851852 C29.6174756,3.25251738 30.8616411,1.90109623 32.4740741,1.18518519 C33.4620864,0.75068991 34.5364063,0.547988036 35.6148148,0.592592593 C36.0305106,0.582760502 36.4463787,0.602563742 36.8592593,0.651851852 C37.2227625,0.689487379 37.580695,0.769027929 37.9259259,0.888888889 L37.0962963,4.74074074 Z M0,24.1659259 L3.79259259,2.5362963 L8.88888889,2.5362963 L5.80740741,19.7214815 L13.2740741,19.7214815 L12.5037037,24.1659259 L0,24.1659259 L0,24.1659259 Z" id="Logo"></path>
</g>
</g>
</svg>
<h3>architect in online</h3>
</section>
<section class="pp-title" data-background="images-theme/bg/bg-quote.jpg">
<h3>CMD Minor</h3>
<h2>"Real-time Web"</h2>
</section>
<section class="pp-title" data-background="images-theme/bg/bg-quote.jpg">
<h3>a.k.a.</h3>
<h2>"Create a realtime application without a framework"</h2>
</section>
<section>
<h3>So here is my case. <span class="fragment">Using a framework</span></h3>
<img class="fragment" height=200 src="images/internet-troll.jpg" alt=""/>
</section>
<section class="pp-title" data-background="images-theme/bg/bg-subject.jpg">
<h2>Whitelabel Intranet</h2>
</section>
<section data-background="images/screen-sd-1a.jpg">
</section>
<section data-background="images/screen-sd-1b.jpg">
</section>
<section data-background="images/screen-sd-2.jpg">
</section>
<section data-background="images/screen-sd-3.jpg">
</section>
<section>
<h3>Start Dashboard tech stack</h3>
<ul>
<li class="fragment">Back-end: Meteor (NodeJS)</li>
<li class="fragment">Front-end: React</li>
<li class="fragment">Transport: DDP (websockets)</li>
</ul>
</section>
<section>
<h3>Distributed Data Protocol</h3>
<h4>(as per spec)</h4>
<blockquote>"a protocol between client and server that supports RPC, the client subscribing to documents and the server sending changes about those documents"</blockquote>
<!--<blockquote>"a <u>simple</u> and <u>standard</u> way for servers to <u>publish</u> documents to clients and keep the documents updated when <u>changes</u> are made"</blockquote>-->
</section>
<section>
<h3>Distributed Data Protocol</h3>
<h4>(as per peter)</h4>
<blockquote>"a unique chance to define interoperability in realtime websockets, as http did for request response"</blockquote>
</section>
<section>
<h2>DDP spec</h2>
<ul>
<li class="fragment">Connection</li>
<li class="fragment">Managing Data</li>
<li class="fragment">Remote Procedure Calls</li>
<li class="fragment">Errors</li>
</ul>
</section>
<section class="pp-title" data-background="images-theme/bg/bg-subject.jpg">
<h2>Whitelabel Intranet</h3>
<h3>Websocket frame inspection demo</h3>
</section>
<section>
<h2>Code</h2>
<p><img height=500 src="images/sd-1.png"/></p>
</section>
<section class="pp-title" data-background="images-theme/bg/bg-quote.jpg">
<h3>"But I don't want to use meteor"</h3>
<h2 class="fragment">You don't have to</h2>
</section>
<section>
<h2>Code</h2>
<p><img width=500 src="images/endpointcon-server-and-client.png"/></p>
<p><a href="https://github.com/peterpeerdeman/ddp-the-real-time-api-for-web-applications/tree/gh-pages/examples/endpointcon-server">endpointcon-server node example on github</a></p>
<p><a href="https://github.com/peterpeerdeman/ddp-the-real-time-api-for-web-applications/tree/gh-pages/examples/endpointcon-client">endpointcon-client javascript example on github</a></p>
</section>
<section>
<h2>That's great, but... will it scale?</h2>
<ul>
<li class="fragment">limited to max connections per box</li>
<li class="fragment">loadbalancing requires session affinity</li>
<li class="fragment">autoscaling with hosted solutions like meteor galaxy</li>
<li class="fragment">scale it yourself using docker images</li>
<li class="fragment">checkout partup devops!</li>
</ul>
</section>
<section>
<h2>Bonus:</h2>
<h3>GraphQL</h3>
<p><img width=500 src="images/graphql.png"/></p>
<a href="https://learngraphql.com/leaderboard">learngraphql.com</a>
</section>
<section>
<h2>What I ask of you?</h2>
<ul>
<li>Push the web forward: pick a standard!</li>
<li>Give DDP in websockets a try</li>
<li>or use <a href="https://github.com/apollographql/subscriptions-transport-ws">GraphQL subscriptions</a> if you are feeling adventurous</li>
</ul>
</section>
<section class="pp-title" data-background="images-theme/bg/bg-title.jpg">
<h3>Thank you<br/> for your attention</h3>
<a style="font-size:.6em;" href="https://github.com/peterpeerdeman/websockets-and-ddp-in-production">github.com/peterpeerdeman/websockets-and-ddp-in-production</a>
</section>
<section data-state="firstSlide" class="pp-title" data-background="images-theme/bg/bg-intro.jpg">
<h1>Websockets & DDP: <br/>in production</h1>
<div class="divider"></div>
<img src="images-theme/peter.png" alt="" width="204" height= "136">
<span class="block">
<a href="http://twitter.com/peterpeerdeman">@peterpeerdeman</a>
</span>
<svg class="pp-title--logo" viewBox="0 0 80 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Artboard">
<path d="M56.3555556,5.79555556 L53.0962963,24.1659259 L58.0148148,24.1659259 L61.8074074,2.83259259 L56.3555556,5.79555556 Z M17.7185185,10.5955556 L15.3481481,24.2251852 L20.2666667,24.2251852 L23.1703704,7.69185185 L17.7185185,10.5955556 Z M69.9851852,26.477037 C69.5111111,27.2474074 69.0962963,27.9585185 68.6814815,28.6103704 C68.3030185,29.2215769 67.821879,29.7628587 67.2592593,30.2103704 C66.7347917,30.6402648 66.1306646,30.9624659 65.4814815,31.1585185 C64.7171675,31.410303 63.915661,31.530529 63.1111111,31.5140741 C62.2678008,31.5294956 61.4274821,31.40945 60.6222222,31.1585185 L61.3333333,27.1288889 C61.7858086,27.3121253 62.2675512,27.4124883 62.7555556,27.4251852 C63.3555666,27.4587269 63.9467192,27.2687136 64.4148148,26.8918519 C64.864057,26.4588474 65.2438297,25.9591465 65.5407407,25.4103704 L66.2518519,24.1659259 L62.8148148,8.99555556 L68.1481481,8.99555556 L69.6888889,18.9511111 L69.7481481,18.9511111 L74.7851852,8.99555556 L80,8.99555556 L69.9851852,26.477037 Z M40.7111111,17.8962963 C40.6855548,17.9938119 40.6657674,18.0927488 40.6518519,18.1925926 C40.6510381,18.5872799 40.7531636,18.9753571 40.9481481,19.3185185 C41.1404464,19.6486139 41.4035523,19.9319587 41.7185185,20.1481481 C42.0349504,20.3952791 42.3976213,20.5766146 42.7851852,20.6814815 C43.1896658,20.7985494 43.6085493,20.8583899 44.0296296,20.8592593 C44.7437212,20.8827259 45.4535679,20.7407565 46.1037037,20.4444444 C46.7096163,20.1581599 47.2532762,19.7554488 47.7037037,19.2592593 L50.7851852,21.6888889 C49.890897,22.685289 48.7742639,23.456781 47.5259259,23.9407407 C46.2989235,24.4207249 44.9915774,24.6620811 43.6740741,24.6518519 C42.6708936,24.6679204 41.6713101,24.5279787 40.7111111,24.237037 C39.8393963,23.9709163 39.0322985,23.5270125 38.3407407,22.9333333 C37.6793274,22.327959 37.1367044,21.6044617 36.7407407,20.8 C36.32289,19.8904343 36.1201193,18.8968578 36.1481481,17.8962963 C36.1434111,16.6369585 36.384981,15.3888474 36.8592593,14.2222222 C37.291856,13.1202379 37.9360786,12.1136402 38.7555556,11.2592593 C39.5854582,10.4228219 40.5721903,9.75828802 41.6592593,9.3037037 C42.8242248,8.82385986 44.0734587,8.58207265 45.3333333,8.59259259 C46.2591662,8.57157175 47.1815876,8.71194023 48.0592593,9.00740741 C48.8451936,9.27809974 49.5701052,9.7009648 50.1925926,10.2518519 C50.8099931,10.7973855 51.2789357,11.490605 51.5555556,12.2666667 C51.8767952,13.1392521 52.0374099,14.0627863 52.0296296,14.9925926 C52.0296296,15.3481481 51.9703704,15.8222222 51.9111111,16.3555556 C51.8410631,16.8938091 51.7421552,17.4279117 51.6148148,17.9555556 L40.7111111,17.9555556 L40.7111111,17.8962963 L40.7111111,17.8962963 Z M47.6444444,14.9333333 C47.6444444,14.8148148 47.7037037,14.7555556 47.7037037,14.637037 L47.7037037,14.3407407 C47.7214376,13.7101388 47.4614657,13.1035376 46.9925926,12.6814815 C46.4161077,12.1957898 45.6692035,11.9610484 44.9185185,12.0296296 C44.410051,12.0304058 43.9066902,12.131078 43.437037,12.3259259 C43.0212393,12.4918 42.63956,12.7328606 42.3111111,13.037037 C42.005737,13.3103021 41.7457071,13.6303389 41.5407407,13.9851852 C41.3625264,14.3031164 41.223252,14.6413544 41.1259259,14.9925926 L47.6444444,14.9925926 L47.6444444,14.9333333 L47.6444444,14.9333333 Z M37.0962963,4.74074074 C36.6831254,4.57129486 36.2389655,4.49053853 35.7925926,4.5037037 C35.4026142,4.47748798 35.0129737,4.55951756 34.6666667,4.74074074 C34.3706454,4.90689253 34.109153,5.12815535 33.8962963,5.39259259 C33.703322,5.68992484 33.5443035,6.00796198 33.4222222,6.34074074 C33.3151037,6.68946244 33.2358423,7.04613874 33.1851852,7.40740741 L32.8888889,9.00740741 L36.3259259,9.00740741 L35.6740741,12.6814815 L32.2962963,12.6814815 L30.2222222,24.237037 L25.4222222,24.237037 L27.4962963,12.6814815 L24.7111111,12.6814815 L25.362963,9.00740741 L28.0296296,9.00740741 L28.3259259,7.46666667 C28.4999827,6.60095361 28.7376647,5.7492598 29.037037,4.91851852 C29.6174756,3.25251738 30.8616411,1.90109623 32.4740741,1.18518519 C33.4620864,0.75068991 34.5364063,0.547988036 35.6148148,0.592592593 C36.0305106,0.582760502 36.4463787,0.602563742 36.8592593,0.651851852 C37.2227625,0.689487379 37.580695,0.769027929 37.9259259,0.888888889 L37.0962963,4.74074074 Z M0,24.1659259 L3.79259259,2.5362963 L8.88888889,2.5362963 L5.80740741,19.7214815 L13.2740741,19.7214815 L12.5037037,24.1659259 L0,24.1659259 L0,24.1659259 Z" id="Logo"></path>
</g>
</g>
</svg>
</section>
<section>
<h2>BonusBonus:</h2>
<h3>GraphQL subscriptions</h3>
<p><img width=500 src="images/graphql-subscriptions.png"/></p>
<a href="https://github.com/apollographql/GitHunt-API">GitHunt-API</a> &
<a href="https://github.com/apollographql/GitHunt-React">GitHunt-React</a>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
Reveal.addEventListener( 'slidechanged', function( event ) {
var classNames = event.currentSlide.className;
if (classNames.indexOf('pp-title') != -1) {
document.getElementsByClassName('progress')[0].style.opacity= '0';
} else {
document.getElementsByClassName('progress')[0].style.opacity = '1';
}
} );
Reveal.addEventListener( 'ready', function( event ) {
var classNames = event.currentSlide.className;
if (classNames.indexOf('pp-title') != -1) {
document.getElementsByClassName('progress')[0].style.opacity= '0';
}
} );
</script>
</body>
</html>