forked from CyclejsCN/cyclejs.cn
-
Notifications
You must be signed in to change notification settings - Fork 0
/
basic-examples.html
630 lines (484 loc) · 24.1 KB
/
basic-examples.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
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Cycle.js - Basic examples</title>
<!-- Flatdoc -->
<script src='support/vendor/jquery.js'></script>
<script src='support/vendor/highlight.pack.js'></script>
<script src='legacy.js'></script>
<script src='flatdoc.js'></script>
<!-- Algolia's DocSearch main theme -->
<link href='//cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css' rel='stylesheet' />
<!-- Others -->
<script async src="//static.jsbin.com/js/embed.js"></script>
<!-- Flatdoc theme -->
<link href='theme/style.css' rel='stylesheet'>
<script src='theme/script.js'></script>
<link href='support/vendor/highlight-github-gist.css' rel='stylesheet'>
<!-- Meta -->
<meta content="Cycle.js - Basic examples" property="og:title">
<meta content="一个函数式和响应式的 JavaScript 框架，用来编写前瞻性代码。" name="description">
<!-- Content -->
<script id="markdown" type="text/markdown" src="index.html">
# Basic examples
## Common structure
Cycle.js apps will always include at least three important components: `main()`, **drivers**, and `run()`. In `main()`, we receive messages from drivers (sources, the input to `main`) and we send messages to drivers (sinks, the output of `main`).
**You can find the source code for these examples, and others, at [cyclejs/examples](https://github.com/cyclejs/cyclejs/tree/master/examples).**
`run()` ties `main()` and drivers together, as we saw in the last chapter. In the case of the DOM Driver, our `main()` will interact with the user through the DOM. Most of our examples will use the DOM Driver, but keep in mind that Cycle.js is modular and extensible. You could build an application, targeting Web Audio or native mobile for instance, without using the DOM Driver.
```javascript
function main(driverSources) {
const driverSinks = {
DOM: // transform driverSources.DOM
// through a series of stream operators
};
return driverSinks;
}
const drivers = {
DOM: makeDOMDriver('#app'),
};
run(main, drivers);
```
## Toggle a checkbox
Let's start with this `index.html` file, that should have an element dedicated to contain our application.
> Inside index.html
```html
<!-- html head goes here -->
<body>
<div id="app"></div>
</body>
```
We will point our Cycle.js app to live inside `#app`. The `checkbox-app.js` file should look like this (before it is transpiled from ES6 to ES5, if that is required).
> checkbox-app.js
```javascript
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, makeDOMDriver} from '@cycle/dom';
function main(sources) {
const sinks = {DOM: null};
return sinks;
}
run(main, {
DOM: makeDOMDriver('#app'),
});
```
Cycle *DOM* is a package containing two drivers and some helpers to use those libraries. A DOM Driver is created with `makeDOMDriver()` and an HTML Driver (for server-side rendering) is created with `makeHTMLDriver()`. Cycle DOM also includes `div()`, `h1()`, `h2()`, `input()`, `ul()`, `li()`, `svg()`, etc. These functions output virtual elements (also known as [*Virtual Nodes*](https://github.com/paldepind/snabbdom/#virtual-node) or *VNodes*). See [`snabbdom`](https://github.com/paldepind/snabbdom) docs for details.
Our `main()`, for now, does nothing. It takes driver `sources` and outputs driver `sinks`. To make something appear on the screen, we need to output a stream of VNode in `sinks.DOM`. The name `DOM` in `sinks` must match the name we gave in the drivers object given to `run()`. This is how Cycle.js knows which drivers to match with which sink streams. This is also true for sources: we listen to DOM events by using `sources.DOM`.
We just added a stream of `false` mapped to a VNode. [`xs.of(x)`](https://github.com/staltz/xstream#of) creates a stream which just emits `x` once. Then we use [`map()`](https://github.com/staltz/xstream#map) to convert that to the virtual DOM VNode containing an `<input type="checkbox">` and a `<p>` element displaying `off` if the `toggled` boolean is `false`, and displaying `ON` otherwise.
```javascript
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, input, p, makeDOMDriver} from '@cycle/dom';
function main(sources) {
const sinks = {
DOM: xs.of(false)
.map(toggled =>
div([
input({attrs: {type: 'checkbox'}}), 'Toggle me',
p(toggled ? 'ON' : 'off')
])
)
};
return sinks;
}
run(main, {
DOM: makeDOMDriver('#app'),
});
```
<a class="jsbin-embed" href="https://jsbin.com/robiyod/embed?output">JS Bin on jsbin.com</a>
This is nice: we can see the DOM elements generated by the virtual DOM elements created with `div()`, `input()`, and `p()`. But if we click the "Toggle me" checkbox, the label "off" under it does not change to "ON". That is because we are not listening to DOM events. In essence, our `main()` isn't listening to the *user*.
We do that by using `sources.DOM`, mapping `change` events on the checkbox to the `checked` value of the element (the first `map()`) to VNodes displaying that value. However, we need a [`.startWith()`](https://github.com/staltz/xstream#startWith) to give a default value to be converted to a VNode Stream. Without this, nothing would be shown! Why? Because our `sinks` is reacting to `sources`, but `sources` is reacting to `sinks`. If no one triggers the first event, nothing will happen. It is the same effect as meeting a stranger, and not having anything to say. Someone needs to take the initiative to start the conversation. That is what `main()` is doing: kickstarting the interaction, and then letting subsequent actions be mutual reactions between `main()` and the DOM Driver.
```diff
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, input, p, makeDOMDriver} from '@cycle/dom';
function main(sources) {
const sinks = {
- DOM: xs.of(false)
+ DOM: sources.DOM.select('input').events('change')
+ .map(ev => ev.target.checked)
+ .startWith(false)
.map(toggled =>
div([
input({attrs: {type: 'checkbox'}}), 'Toggle me',
p(toggled ? 'ON' : 'off')
])
)
};
return sinks;
}
run(main, {
DOM: makeDOMDriver('#app')
});
```
<a class="jsbin-embed" href="https://jsbin.com/makuye/embed?output">JS Bin on jsbin.com</a>
## HTTP requests
One of the most obvious requirements web apps normally have is to fetch and render data from the server. How would we build that with Cycle.js?
Suppose we have a backend with a database containing ten users. We want to have a front-end with one button "get a random user", and to display the user's details, like name and email. This is what we want to achieve:
<a class="jsbin-embed" href="https://jsbin.com/vedote/embed?output">JS Bin on jsbin.com</a>
Essentially we just need to make a request for the endpoint `/user/:number` whenever the button is clicked. Where would this HTTP request fit in a Cycle.js app?
*Sinks* are instructions from `main()` to drivers to perform side effects, and *sources* are readable side effects. HTTP requests are sinks, and HTTP responses are sources.
The [HTTP Driver](https://github.com/cyclejs/cyclejs/tree/master/http) is similar in style to the DOM Driver: it expects a sink stream (for requests), and gives you a source stream (for responses). Instead of studying the details of how the HTTP Driver works, let's see what a basic HTTP example looks like.
If HTTP requests are sent when the button is clicked, then the HTTP request stream should depend directly on the button click stream. `getRandomUser$` is the request stream we give to the HTTP Driver, by returning it as a sink in the `main()` function.
```javascript
function main(sources) {
// ...
const click$ = sources.DOM.select('.get-random').events('click');
const getRandomUser$ = click$.map(() => {
const randomNum = Math.round(Math.random() * 9) + 1;
return {
url: 'https://jsonplaceholder.typicode.com/users/' + String(randomNum),
category: 'users',
method: 'GET'
};
});
// ...
return {
// ...
HTTP: getRandomUser$,
};
}
```
We still need to display data for the current user, and this comes only when we get an HTTP response. For that purpose, we need the stream of user data to depend directly on the HTTP response stream. This is available from `main`'s input: `sources.HTTP` (the name `HTTP` needs to match the driver name you gave for the HTTP driver when calling `run()`).
```javascript
function main(sources) {
// ...
const user$ = sources.HTTP.select('users')
.flatten()
.map(res => res.body);
// ...
}
```
`sources.HTTP` is an "HTTP Source", representing all the network responses for this app. `select(category)` is an API specific to the HTTP Source that returns a stream of all response streams that are related to the `category` given. Because that output is a stream-of-streams, we apply `flatten()`, to get a flattened stream of responses. Check above for the declaration of `getRandomUser$` where we returned a request object with a `category: users` field. This might feel like magic right now, so read the [HTTP Driver docs](https://github.com/cyclejs/cyclejs/tree/master/http) if you're curious about the details. We map each response `res` to `res.body` in order to get the JSON data from the response and ignore other fields like HTTP status.
We still haven't specified how to render our app. We should display to the DOM whatever data we have from the current user in `user$`. So the VNode stream called `vdom$` should depend directly on `user$`.
```javascript
function main(sources) {
// ...
const vdom$ = user$.map(user =>
div('.users', [
button('.get-random', 'Get random user'),
div('.user-details', [
h1('.user-name', user.name),
h4('.user-email', user.email),
a('.user-website', {href: user.website}, user.website)
])
])
);
// ...
}
```
However, initially, there won't be any `user$` event, because those only happen when the user clicks. This is the same "conversation initiative" problem we saw in the previous "checkbox" example. So we need to make `user$` start with a `null` user, and in case `vdom$` sees a null user, it renders just the button. Otherwise, if we have real user data, we also display their name, their email, and website.
```diff
function main(sources) {
// ...
const user$ = sources.HTTP.select('users')
.flatten()
.map(res => res.body)
+ .startWith(null);
const vdom$ = user$.map(user =>
div('.users', [
button('.get-random', 'Get random user'),
- div('.user-details', [
+ user === null ? null : div('.user-details', [
h1('.user-name', user.name),
h4('.user-email', user.email),
a('.user-website', {href: user.website}, user.website)
])
])
);
// ...
}
```
We give `vdom$` to the DOM Driver, and it renders those for us.
When done, the whole code looks like this.
```javascript
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, button, h1, h4, a, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';
function main(sources) {
const getRandomUser$ = sources.DOM.select('.get-random').events('click')
.map(() => {
const randomNum = Math.round(Math.random() * 9) + 1;
return {
url: 'https://jsonplaceholder.typicode.com/users/' + String(randomNum),
category: 'users',
method: 'GET'
};
});
const user$ = sources.HTTP.select('users')
.flatten()
.map(res => res.body)
.startWith(null);
const vdom$ = user$.map(user =>
div('.users', [
button('.get-random', 'Get random user'),
user === null ? null : div('.user-details', [
h1('.user-name', user.name),
h4('.user-email', user.email),
a('.user-website', {attrs: {href: user.website}}, user.website)
])
])
);
return {
DOM: vdom$,
HTTP: getRandomUser$
};
}
run(main, {
DOM: makeDOMDriver('#app'),
HTTP: makeHTTPDriver()
});
```
<a class="jsbin-embed" href="https://jsbin.com/vedote/embed?output">JS Bin on jsbin.com</a>
## Increment a counter
We saw how to use the *sources and sinks* pattern of building user interfaces, but our examples didn't have state: the label just reacted to the checkbox event, and the user details view just showed what came from the HTTP response. Normally applications have state in memory, so let's see how to build a Cycle.js app for that case.
If we have a counter stream (emitting events to tell the current counter value), displaying the counter is as simple as this.
```javascript
count$.map(count =>
div([
button('.increment', 'Increment'),
button('.decrement', 'Decrement'),
p('Counter: ' + count)
])
)
```
> ### What is the `$` convention?
>
> Notice we used the name `count$` for the stream of current counter values. The dollar sign `$` *suffixed* to a name is a soft convention to indicate that the variable is a stream. It is a naming helper to indicate types.
>
> Suppose you have a stream of VNode depending on a stream of "name" strings
>
> `const vdom$ = name$.map(name => h1(name));`
>
> Notice that the function inside `map` takes `name` as an argument, while the stream is named `name$`. The naming convention indicates that `name` is the value being emitted by `name$`. In general, `foobar$` emits `foobar`. Without this convention, if `name$` would be named simply `name`, it would confuse readers about the types involved. Also, `name$` is succinct compared to alternatives like `nameStream`, `nameObservable`, or `nameObs`. This convention can also be extended to arrays: use plurality to indicate the type is an array. Example: `vdoms` is an array of `vdom` but `vdom$` is a stream of `vdom`.
But how do we create a `count$`? Clearly it must depend on increment clicks and decrement clicks. The former should mean a "+1" operation, and the latter a "-1" operation.
```javascript
const action$ = xs.merge(
DOM.select('.decrement').events('click').mapTo(-1),
DOM.select('.increment').events('click').mapTo(+1)
);
```
The [`merge`](https://github.com/staltz/xstream#merge) operator allows us to get an event stream of actions, either increment or decrement actions. In this sense, `merge` has *OR* semantics. But this still isn't a `count$`. It is just an `action$`.
`count$` should begin with zero and should later be the sum of all the numbers emitted by `action$`. To join all events on a stream over time, we use the operator [`fold()`](https://github.com/staltz/xstream#fold):
```js
const count$ = action$.fold((x, y) => x + y, 0);
```
What does `fold` do? It is similar to [`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce), allowing us to accumulate values over the sequence. Also, `fold` has some `startWith` behavior included, because it takes a `seed` argument (we gave the number `0`) and emits that initially.
If we put `action$` and `count$` together in our `main()`, we can implement the counter like this:
<a class="jsbin-embed" href="https://jsbin.com/husiyul/embed?output">JS Bin on jsbin.com</a>
```javascript
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, button, p, makeDOMDriver} from '@cycle/dom';
function main(sources) {
const action$ = xs.merge(
sources.DOM.select('.dec').events('click').mapTo(-1),
sources.DOM.select('.inc').events('click').mapTo(+1)
);
const count$ = action$.fold((x, y) => x + y, 0);
const vdom$ = count$.map(count =>
div([
button('.dec', 'Decrement'),
button('.inc', 'Increment'),
p('Counter: ' + count)
])
);
return {
DOM: vdom$
};
}
run(main, {
DOM: makeDOMDriver('#app')
});
```
## Body mass index calculator
Now that we've got the hang of Cycle.js apps with state, let's tackle something a bit larger. Consider the following [BMI](https://en.wikipedia.org/wiki/Body_mass_index) calculator: it has a slider to select the weight, a slider to select the height, and the text indicates the calculated BMI from the weight and height values selected.
<a class="jsbin-embed" href="https://jsbin.com/nucepu/embed?output">JS Bin on jsbin.com</a>
In the previous example, we had the actions *decrement* and *increment*. In this example, we have "change weight" and "change height". These seem straightforward to implement.
```javascript
const changeWeight$ = sources.DOM.select('.weight')
.events('input')
.map(ev => ev.target.value);
const changeHeight$ = sources.DOM.select('.height')
.events('input')
.map(ev => ev.target.value);
```
By now we know that app state is usually initialized with `startWith` or `fold`. We need the *height* and *weight* as *values over time*, not as *change events*. In order to represent *height* as state, we just need to give an initial value prepended to `changeHeight$`.
```javascript
const weight$ = changeWeight$.startWith(70);
const height$ = changeHeight$.startWith(170);
```
To combine these two pieces of state and use their values to compute the BMI, we use the xstream [`combine`](https://github.com/staltz/xstream#combine) operator. We saw in the previous example that `merge` had *OR* semantics. `combine` has, on the other hand, *AND* semantics. For instance, to compute the BMI, we need a `weight` value *AND* a `height` value. `combine` takes **multiple** streams as input, and produces **one** stream of arrays that contain **multiple** values, one for each input stream.
```javascript
const bmi$ = xs.combine(weight$, height$)
.map(([weight, height]) => {
const heightMeters = height * 0.01;
return Math.round(weight / (heightMeters * heightMeters));
});
```
Now we just need a function to visualize the BMI result and the sliders. We do that by mapping `bmi$` to a stream of VNode, and giving that to the `DOM` driver.
<a class="jsbin-embed" href="https://jsbin.com/wojokof/embed?output">JS Bin on jsbin.com</a>
```javascript
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, input, h2, makeDOMDriver} from '@cycle/dom';
function main(sources) {
const changeWeight$ = sources.DOM.select('.weight')
.events('input')
.map(ev => ev.target.value);
const changeHeight$ = sources.DOM.select('.height')
.events('input')
.map(ev => ev.target.value);
const weight$ = changeWeight$.startWith(70);
const height$ = changeHeight$.startWith(170);
const bmi$ = xs.combine(weight$, height$)
.map(([weight, height]) => {
const heightMeters = height * 0.01;
return Math.round(weight / (heightMeters * heightMeters));
});
const vdom$ = bmi$.map(bmi =>
div([
div([
'Weight ___kg',
input('.weight', {attrs: {type: 'range', min: 40, max: 140}})
]),
div([
'Height ___cm',
input('.height', {attrs: {type: 'range', min: 140, max: 210}})
]),
h2('BMI is ' + bmi)
])
);
return {
DOM: vdom$
};
}
run(main, {
DOM: makeDOMDriver('#app')
});
```
This code works. We can get the calculated BMI when we move the slider. However, maybe you noticed, the labels for weight and height do not show what the slider is selecting. Instead, they just show e.g. `Weight ___kg`, which is useless since we do not know what value we are choosing for the weight.
The problem happens because when we map on `bmi$`, we do not have the `weight` and `height` values anymore. Therefore, for the function which renders the VNode, we need to use a stream which emits a complete amount of data instead of just BMI data. We need a `state$`.
```javascript
const state$ = xs.combine(weight$, height$)
.map(([weight, height]) => {
const heightMeters = height * 0.01;
const bmi = Math.round(weight / (heightMeters * heightMeters));
return {weight, height, bmi};
});
```
Below is the program that uses `state$` to render all dynamic values correctly to the DOM.
<a class="jsbin-embed" href="https://jsbin.com/nucepu/embed?output">JS Bin on jsbin.com</a>
```javascript
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, input, h2, makeDOMDriver} from '@cycle/dom';
function main(sources) {
const changeWeight$ = sources.DOM.select('.weight')
.events('input')
.map(ev => ev.target.value);
const changeHeight$ = sources.DOM.select('.height')
.events('input')
.map(ev => ev.target.value);
const weight$ = changeWeight$.startWith(70);
const height$ = changeHeight$.startWith(170);
const state$ = xs.combine(weight$, height$)
.map(([weight, height]) => {
const heightMeters = height * 0.01;
const bmi = Math.round(weight / (heightMeters * heightMeters));
return {weight, height, bmi};
});
const vdom$ = state$.map(({weight, height, bmi}) =>
div([
div([
'Weight ' + weight + 'kg',
input('.weight', {type: 'range', min: 40, max: 140, value: weight})
]),
div([
'Height ' + height + 'cm',
input('.height', {type: 'range', min: 140, max: 210, value: height})
]),
h2('BMI is ' + bmi)
])
);
return {
DOM: vdom$
};
}
run(main, {
DOM: makeDOMDriver('#app')
});
```
Great, this program functions exactly like we want it to. Weight and height labels react to the sliders being dragged, and the BMI result gets recalculated as well.
However, we wrote all the code inside one function: `main()`. This approach doesn't scale, and even for a small app like this, it already looks too large and is doing too many things.
We need a proper architecture for user interfaces that follows the reactive, functional, and cyclic principles of Cycle.js. This is the subject of our [next chapter](model-view-intent.html).
</script>
<!-- Initializer -->
<script>
Flatdoc.run({
fetcher: function(callback) {
callback(null, document.getElementById('markdown').innerHTML);
},
highlight: function (code, value) {
return hljs.highlight(value, code).value;
},
});
</script>
</head>
<body role='flatdoc' class="no-literate">
<div class='header'>
<div class='left'>
<h1><a href="/"><img class="logo" src="img/cyclejs_logo.svg" >Cycle.js</a></h1>
<ul>
<li><a href='getting-started.html'>Documentation</a></li>
<li><a href='api/index.html'>API reference</a></li>
<li><a href='releases.html'>Releases</a></li>
<li><a href='https://github.com/cyclejs/cyclejs'>GitHub</a></li>
</ul>
<input id="docsearch" />
</div>
<div class='right'>
<!-- GitHub buttons: see https://ghbtns.com -->
<iframe src="https://ghbtns.com/github-btn.html?user=cyclejs&repo=cyclejs&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</div>
</div>
<div class='content-root'>
<div class='menubar'>
<div class='menu section'>
<ul>
<li><a href="getting-started.html" class="level-1 out-link">起步</a></li>
<li><a href="dialogue.html" class="level-1 out-link">对话抽象</a></li>
<li><a href="streams.html" class="level-1 out-link">Streams</a></li>
</ul>
<div role='flatdoc-menu'></div>
<ul>
<li><a href="model-view-intent.html" class="level-1 out-link">Model-View-Intent</a></li>
<li><a href="components.html" class="level-1 out-link">Components</a></li>
<li><a href="drivers.html" class="level-1 out-link">Drivers</a></li>
</ul>
</div>
</div>
<div role='flatdoc-content' class='content'></div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-101243593-1', 'auto');
ga('send', 'pageview');
</script>
<script>
((window.gitter = {}).chat = {}).options = {
room: 'cyclejs/cyclejs'
};
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
<script src='//cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js'></script>
<script src='docsearch.js'></script>
</body>
</html>