15 |
16 | RxJS - Mario
16 |Originally was developed by Daniel Fudala on GitHub
17 |Use arrow keys (←, →, ↑, ↓) to move around your Mario!
18 | 19 | 20 |
42 |
47 | the mouse!
17 | its tail!
18 | is happy!
19 |
20 |
21 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/virtual-list/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
25 | RxJS Follow the Mouse Example
23 |Example to show coordinating delayed mouse movements and adding a wag.
24 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/canvas-paint/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
19 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/crop/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
23 | RxJS Canvas Paint Example
21 |Example to show combining mouse events to draw on an HTML5 Canvas.
22 |
24 |
25 |
26 |
17 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/react-demos/react-recompoes-demo/src/App.js:
--------------------------------------------------------------------------------
1 | // import React from 'react';
2 | // import { Observable } from 'rxjs';
3 | // import config from 'recompose/rxjsObservableConfig';
4 | // import {
5 | // setObservableConfig,
6 | // componentFromStream
7 | // } from 'recompose';
8 |
9 | // setObservableConfig(config);
10 |
11 | // // class App extends Component {
12 | // // render() {
13 | // // return (
14 | // //
18 |
24 | RxJS Crop Image Example
19 |
20 |
21 |
22 |
23 |
15 | // //
19 | // // );
20 | // // }
21 | // // }
22 |
23 | // const App = componentFromStream(props$ => {
24 | // return Observable.interval(1000).map(i => (
25 | // 16 | // // Hello World 17 | // //
18 | // //{i}
26 | // ));
27 | // });
28 |
29 | // export default App;
30 | import React from "react"
31 | import { render } from "react-dom"
32 | import { Observable } from "rxjs"
33 | import config from "recompose/rxjsObservableConfig"
34 | import {
35 | setObservableConfig,
36 | componentFromStream
37 | } from "recompose"
38 |
39 | setObservableConfig(config)
40 |
41 | const App = componentFromStream(props$ => {
42 | return Observable.interval(1000).map(i => (
43 | {i}
44 | ))
45 | })
46 |
47 | export default App;
48 |
--------------------------------------------------------------------------------
/smart-counter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
15 | ![]()
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/debt-calculator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
16 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/smart-counter/index.js:
--------------------------------------------------------------------------------
1 | ;(function () {
2 | 'use strict';
3 |
4 | var input = document.getElementById('range');
5 | var updateButton = document.getElementById('update');
6 |
7 | // Utility functions
8 | function takeUntilFunc(endRange, currentNumber) {
9 | return endRange > currentNumber
10 | ? function (val) { return val <= endRange; }
11 | : function (val) { return val >= endRange; }
12 | }
13 |
14 | function positiveOrNegative(endRange, currentNumber) {
15 | return endRange > currentNumber ? 1 : -1;
16 | }
17 |
18 | function updateHTML(id) {
19 | return function (val) {
20 | return document.getElementById(id).innerHTML = val;
21 | };
22 | }
23 |
24 | // Creating subscription
25 | var subscription = (function(currentNumber) {
26 | return Rx.Observable
27 | .fromEvent(updateButton, 'click')
28 | .map(function() { return parseInt(input.value); })
29 | .switchMap(function(endRange) {
30 | return Rx.Observable.timer(0, 20)
31 | .mapTo(positiveOrNegative(endRange, currentNumber))
32 | .startWith(currentNumber)
33 | .scan(function(acc, curr) {
34 | return acc + curr;
35 | })
36 | .takeWhile(takeUntilFunc(endRange, currentNumber));
37 | })
38 | .do(function(v) {
39 | return currentNumber = v;
40 | })
41 | .startWith(currentNumber)
42 | .subscribe(updateHTML('display'));
43 | })(0);
44 | })();
--------------------------------------------------------------------------------
/drag-drop/dragdrop.js:
--------------------------------------------------------------------------------
1 | ;(function(){
2 |
3 | 'use strict';
4 |
5 | function main () {
6 |
7 | var targetElement = document.getElementById('dragTarget');
8 |
9 | /*
10 | Get the three major mouseEvents we'll be observing.
11 | */
12 | var mouseUp = Rx.Observable.fromEvent( targetElement, 'mouseup' );
13 | var mouseMove = Rx.Observable.fromEvent( document, 'mousemove' );
14 | var mouseDown = Rx.Observable.fromEvent( targetElement, 'mousedown' );
15 |
16 | var mouseDrag = mouseDown.flatMap(function (md) {
17 |
18 | /*
19 | Calculates the offsets when mouse starting moving down
20 | */
21 | var startX = md.offsetX,
22 | startY = md.offsetY;
23 |
24 | /*
25 | Calculates delta with mouseMove events
26 | until mouseUp events are done.
27 | */
28 | return mouseMove.map(function (mm) {
29 | mm.preventDefault();
30 |
31 | return {
32 | left: mm.clientX - startX,
33 | top: mm.clientY - startY
34 | };
35 | }).takeUntil(mouseUp);
36 | });
37 |
38 | function updateElementPosition(position){
39 | this.style.top = position.top + 'px';
40 | this.style.left = position.left + 'px';
41 | }
42 |
43 | /*
44 | Updates drag&drop Element position.
45 | */
46 | mouseDrag.subscribe(
47 | updateElementPosition.bind( targetElement )
48 | );
49 | }
50 |
51 | main();
52 |
53 | })();
--------------------------------------------------------------------------------
/typehead/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
15 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/dynamic-render/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
16 |
19 |
20 | RxJS Typehead example
17 |Example to show combining input events such as keyup with Ajax requests
18 |
21 |
31 |
32 |
33 |
34 |
36 |
15 |
19 |
20 |
21 |
25 |
26 |
27 |
31 |
32 |
33 |
37 |
38 |
39 |
43 |
44 |
45 |
49 |
50 |
51 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/data-binding/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
16 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/follow-the-mouse/custom.js:
--------------------------------------------------------------------------------
1 | ;(function(){
2 |
3 | 'use strict';
4 |
5 | function extractClientX(e) { return e.clientX; }
6 | function extractClientY(e) { return e.clientY; }
7 | function setLeft(x) { this.style.left = x + 'px'; }
8 | function setTop(y) { this.style.top = y + 'px'; }
9 | function add(x, y) { return x + y }
10 | function partialAdd(x) { return add.bind(null, x); }
11 | function randomize() { return Math.round(10 * Math.random() -5); }
12 |
13 | var delay = 300;
14 |
15 | var mouseMove = Rx.Observable.fromEvent(document, 'mousemove');
16 | var left = mouseMove.map(extractClientX);
17 | var top = mouseMove.map(extractClientY);
18 |
19 | // Update the mouse
20 | var theMouse = document.querySelector('#theMouse');
21 | left.subscribe(setLeft.bind(theMouse));
22 | top.subscribe(setTop.bind(theMouse));
23 |
24 | // Update the tail
25 | var mouseOffset = theMouse.offsetWidth;
26 | var theTail = document.querySelector('#theTail');
27 | left
28 | .map(partialAdd(mouseOffset))
29 | .delay(delay)
30 | .subscribe(setLeft.bind(theTail))
31 | ;
32 | top
33 | .delay(delay)
34 | .subscribe(setTop.bind(theTail))
35 | ;
36 |
37 | // Update the wagging
38 | var wagDelay = delay * 1.5;
39 | var wagging = document.querySelector('#theWagging');
40 | var mouseAndTailOffset = mouseOffset + theTail.offsetWidth;
41 | left
42 | .map(partialAdd(mouseAndTailOffset))
43 | .delay(wagDelay)
44 | .subscribe(setLeft.bind(wagging))
45 | ;
46 | var waggingDelay = Rx.Observable
47 | .interval(100)
48 | .map(randomize)
49 | ;
50 |
51 | top
52 | .delay(wagDelay)
53 | .combineLatest(waggingDelay, add)
54 | .subscribe(setTop.bind(wagging))
55 | ;
56 |
57 | })();
--------------------------------------------------------------------------------
/docs/OBSERVABLE_PIPELINE.md:
--------------------------------------------------------------------------------
1 | # Observable Pipeline
2 | > An Observable pipeline is a technique that combines a group of operators chained together, where each one takes an Observable as input and returns an Observable as output.
3 |
4 | ### Pipeline Example
5 | ```javascript
6 | Rx.Observable
7 | .from(1, 2, 3, 4, 5, 6, 7, 8)
8 | .filter(function(val) { return val % 2 })
9 | .map(function(val) { return val * 10 });
10 | ```
11 | Pipelines are self-contained. All state flows from one operator to the next, without the need for any external variables. As a result, the operators in a pipeline should always use pure functions to avoid any side effects.
12 |
13 | Pure functions always return the same output given the same input. It's easier to design programs with high concurrency when we can guarantee that a function in the program can't modify state other functions rely on.
14 |
15 | ### Pipelines are efficient
16 | ```javascript
17 | stringObservalbe // represents an observable emitting 1,000 strings
18 | .map(function(str) {
19 | return str.toUpperCase();
20 | })
21 | .filter(function(str) {
22 | return /^[A-Z]+$/.test(str);
23 | })
24 | .subscribe(function(str) {
25 | console.log(str);
26 | });
27 | ```
28 |
29 | Observable pipelines look extremely similar to array chains, but their similarities end here. In an Observable, nothing ever happens until we **subscribe** to it, no matter how many queries and transformations we apply to it. When we chain a transformation like *map*, we're composing a single function that will operate on every item of the array once.
30 |
31 | With Observables, we'll ONLY go through our array list once, and we'll apply the transformations only if absolutely required. This way of operating is called *lazy evaluation*, and it is very common in functional languages such as Haskell and Miranda.
32 |
33 |
--------------------------------------------------------------------------------
/docs/rxjs_ng_europe.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function map(transformFn) {
4 | const inputObservable = this;
5 | const outputObservable = createObservable(function subscribe(outputObserver) {
6 | inputObservable.subscribe({
7 | next: function(x) {
8 | const y = transformFn(x);
9 | outputObserver.next(y);
10 | },
11 | error: function(e) {
12 | outputObserver.error(e);
13 | },
14 | complete: function () {
15 | outputObserver.complete();
16 | }
17 | })
18 | });
19 | return outputObservable;
20 | }
21 |
22 | function filter(conditionFn) {
23 | const inputObservable = this;
24 | const outputObservable = createObservable(function subscribe(outputObserver) {
25 | inputObservable.subscribe({
26 | next: function(x) {
27 | if (conditionFn(x)) {
28 | outputObserver.next(x);
29 | }
30 | },
31 | error: function(e) {
32 | outputObserver.error(e);
33 | },
34 | complete: function () {
35 | outputObserver.complete();
36 | }
37 | })
38 | });
39 | return outputObservable;
40 | }
41 |
42 |
43 | function createObservable(subscribe) {
44 | return {
45 | subscribe: subscribe,
46 | map: map,
47 | filter: filter
48 | };
49 | }
50 |
51 | const arrayObservable = createObservable(function(observer) {
52 | [10, 20, 30].forEach(observer.next);
53 | observer.complete();
54 | });
55 |
56 | const observer = {
57 | next: function nextCallback(data) {
58 | console.log(data);
59 | },
60 | error: function errorCallback(err) {
61 | console.error(err);
62 | },
63 | complete: function completeCallback() {
64 | console.log('done');
65 | }
66 | };
67 |
68 |
69 | arrayObservable
70 | .map(function(x) { return x / 10; })
71 | .filter(function (x) { return x !== 2; })
72 | .subscribe(observer);
73 |
74 |
--------------------------------------------------------------------------------
/react-demos/react-recompoes-demo/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
14 |
23 |
17 |
20 | RxJS Data Binding Example
18 |Demonstrate concepts of RxJS form data binding!
19 |
21 |
35 |
36 |