SlideShare ist ein Scribd-Unternehmen logo
1 von 83
Downloaden Sie, um offline zu lesen
REACTIVE JAVASCRIPT MIT RXJSREACTIVE JAVASCRIPT MIT RXJS
MAXIMILIAN BERGHOFF - 21.08.2016 - FROSCONMAXIMILIAN BERGHOFF - 21.08.2016 - FROSCON
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
1 von 83 22.08.2016 08:58
STELL EUCH VOR, ...STELL EUCH VOR, ...
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
2 von 83 22.08.2016 08:58
ITERATOR PATTERNITERATOR PATTERN
&&
OBSERVER PATTERNOBSERVER PATTERN
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
3 von 83 22.08.2016 08:58
RXJS - REACTIVE JAVASCRIPTRXJS - REACTIVE JAVASCRIPT
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
4 von 83 22.08.2016 08:58
DIE AKTEUREDIE AKTEURE
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
5 von 83 22.08.2016 08:58
Maximilian Berghoff
@ElectricMaxxx
github.com/electrimaxxx
May�ower GmbH - Würzburg
Maximilian.Berghoff@may�ower.de
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
6 von 83 22.08.2016 08:58
ITERATOR PATTERNITERATOR PATTERN
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
7 von 83 22.08.2016 08:58
var Iterator = function () {};
Iterator.prototype.next();
Iterator.prototype.rewind();
Iterator.prototype.current();
Iterator.prototype.hasNext();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
8 von 83 22.08.2016 08:58
TRAVERSIERENTRAVERSIEREN
while (Iterator.hasNext()) {
console.log(Iterator.next());
}
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
9 von 83 22.08.2016 08:58
GEDANKENSPIELGEDANKENSPIEL
Liste von Cocktails
Eigenschaften: id, name, zutaten, prozent, ...
Aufgabe: "id & name von allem Contails mit prozent > 5.0"
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
10 von 83 22.08.2016 08:58
var cocktails = [
{id: 1001, name: 'Piña Colada', zutaten: [], prozent: 5.0 },
{id: 1002, name: ' Tequila Sunrise', zutaten: [], prozent: 6.0 },
{id: 1003, name: ' Long Island', zutaten: [], prozent: 7.0 },
];
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
11 von 83 22.08.2016 08:58
var newList = [];
for(var i = 0; i <= cocktails.length; i++) {
if (cocktails[i].prozent > 5.0) {
newList.push({id: cocktails[i].id, title: cocktails[i].title})
}
}
console.log(newList);
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
12 von 83 22.08.2016 08:58
var newList = [];
cocktails.forEach(function (cocktail) {
if (cocktails[i].prozent > 5.0) {
newList.push({id: cocktail.id, title: cocktail.title})
}
});
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
13 von 83 22.08.2016 08:58
var godOnes = cocktails
.filter(function (cocktail) {
return cocktail.prozent > 5;
})
.map(function (cocktail) {
return {id: cocktail.id, name: cocktail.name};
});
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
14 von 83 22.08.2016 08:58
OBSERVER PATTERNOBSERVER PATTERN
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
15 von 83 22.08.2016 08:58
Observable.prototype.subscribe();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
16 von 83 22.08.2016 08:58
Observer.prototype.notify();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
17 von 83 22.08.2016 08:58
var Observable = function () {};
Observable.prototype.subscribe = function () {};
Observable.prototype.unsubscribe = function () {};
var Observer = function () {};
Observer.prototype.notify = function() {};
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
18 von 83 22.08.2016 08:58
HISTORYHISTORY
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
19 von 83 22.08.2016 08:58
ERIK MEIERERIK MEIER
BRAIN BACKMANBRAIN BACKMAN
MATHEW PODWYSOCKIMATHEW PODWYSOCKI
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
20 von 83 22.08.2016 08:58
LINQ TO EVENTSLINQ TO EVENTS
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
21 von 83 22.08.2016 08:58
VOLTAVOLTA
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
22 von 83 22.08.2016 08:58
WINDOWS FORMSWINDOWS FORMS
<=><=>
WEB FORMSWEB FORMS
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
23 von 83 22.08.2016 08:58
BEISPIEL:BEISPIEL:
DRAG & DROPDRAG & DROP
MAUSBEWEGUNG VERFOLGENMAUSBEWEGUNG VERFOLGEN
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
24 von 83 22.08.2016 08:58
EVENT LISTENER REGISTRIERENEVENT LISTENER REGISTRIEREN
elem.addEventListener('mousedown', mousedown, false);
elem.addEventListener('mouseup', mouseup, false);
elem.addEventListener('mousemove', mousemove, false);
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
25 von 83 22.08.2016 08:58
MOUSE DOWNMOUSE DOWN
function mousedown(e) {
isDown = true;
state = { startX: e.offsetX, startY: e.offsetY};
}
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
26 von 83 22.08.2016 08:58
MOUSE MOVEMOUSE MOVE
function mousemove(e) {
if (!isDown) {return;}
var delta = {
endX: e.clientX - state.startX,
endY: e.clientY - state.startY
};
}
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
27 von 83 22.08.2016 08:58
MOUSE UPMOUSE UP
function mouseup (e) {
isDown = false;
state = null;
}
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
28 von 83 22.08.2016 08:58
UNSUBSCRIBEUNSUBSCRIBE
function dispose() {
elem.removeEventListener('mousedown', mousedown, false);
elem.removeEventListener('mouseup', mouseup, false);
elem.removeEventListener('mousemove', mousemove, false);
}
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
29 von 83 22.08.2016 08:58
DIE HOCHZEITDIE HOCHZEIT
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
30 von 83 22.08.2016 08:58
REACTIVE EXTENSIONREACTIVE EXTENSION
RxJava
RxJS
Rx.Net
Rx.Scala
Rx.Clojure
Rx.Swift
...
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
31 von 83 22.08.2016 08:58
REACTIVEX.IOREACTIVEX.IO
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
32 von 83 22.08.2016 08:58
GITHUB.COM/REACTIVE-EXTIONSIONGITHUB.COM/REACTIVE-EXTIONSION
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
33 von 83 22.08.2016 08:58
STREAM VON EVENTSSTREAM VON EVENTS
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
34 von 83 22.08.2016 08:58
var list = [1, 2, 3, 4, 5];
list.forEach(function (item) {
console.log("nexItem: %s", item);
});
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
35 von 83 22.08.2016 08:58
var list = [1, 2, 3, 4, 5];
var source = Rx.Observable.fromArray(list);
var disposal = source.subscribe(
function (x) {console.log('Next: ' + x);},
function (err) {console.log('Error: ' + err);},
function () {console.log('Completed');});
disposal.dispose();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
36 von 83 22.08.2016 08:58
ASCII MURMELNASCII MURMELN
...1...2...3...4...5.> Rx.Observable.fromArray([1, 2, 3, 4, 5])
...1...2...3...4...5|
1, 2, 3, 4, 5 are emitted values
X is an error
| is the 'completed' signal
...> is the timeline
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
37 von 83 22.08.2016 08:58
OBSERVEROBSERVER
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
38 von 83 22.08.2016 08:58
var disposal = source.subscribe(
function (x) {console.log('Next: ' + x);},
function (err) {console.log('Error: ' + err);},
function () {console.log('Completed');}
);
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
39 von 83 22.08.2016 08:58
function Observer() { }
Observer.prototype.onNext = function (value) { ... };
Observer.prototype.onError = function (error) { ... };
Observer.prototype.onCompleted = function () { ... };
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
40 von 83 22.08.2016 08:58
var source = Rx.Observable.range(1,10);
var reducedSource = source.filter(function (value) {
return value % 2 === 0;
});
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
41 von 83 22.08.2016 08:58
...1...2...3...4...5...6...7...8...9...10> Rx.Observable.range(1, 10)
.......2.......4.......6.......8.......10| reducedSource
...1...2...3...4...5...6...7...8...9...10| source
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
42 von 83 22.08.2016 08:58
OBSERVALBEOBSERVALBE
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
43 von 83 22.08.2016 08:58
function Disposable() { }
Disposable.prototype.dispose = function () { ... }
function Observable() { }
/**
* @return Disposable
*/
Observable.prototype.subscribe = function (observer) { ... }
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
44 von 83 22.08.2016 08:58
(ER-) ZEUGUNG(ER-) ZEUGUNG
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
45 von 83 22.08.2016 08:58
Rx.Observable.create();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
46 von 83 22.08.2016 08:58
var source = Rx.Observable.create(function (observer) {
observer.onNext(42);
observer.onCompleted();
return function () {
console.log('disposed');
}
});
var subscription = source.subscribe(
function (x) { console.log('onNext: %s', x); },
function (e) { console.log('onError: %s', e); },
function () { console.log('onCompleted'); }
);
subscription.dispose();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
47 von 83 22.08.2016 08:58
> onNext: 42
> onCompleted
> disposed
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
48 von 83 22.08.2016 08:58
Rx.Observable.range();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
49 von 83 22.08.2016 08:58
Rx.Observable.fromEvent(element, eventName, [selector])
// oder
Rx.Observable.fromCallback(func, [context], [selector])
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
50 von 83 22.08.2016 08:58
var input = $('#input');
var source = Rx.Observable.fromEvent(input, 'keyup');
var subscription = source.subscribe(
function (x) {console.log('Next: key pressed!');},
function (err) {console.log('Error: %s', err);},
function () {console.log('Completed');});
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
51 von 83 22.08.2016 08:58
var fs = require('fs'),
Rx = require('rx');
var exists = Rx.Observable.fromCallback(fs.exists);
var source = exists('file.txt');
var subscription = source.subscribe(
function (x) {console.log('Next: ' + x);},
function (err) {console.log('Error: ' + err);},
function () {console.log('Completed');}
);
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
52 von 83 22.08.2016 08:58
ARBEITENARBEITEN
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
53 von 83 22.08.2016 08:58
LINQLINQ
LANGUAGE INTEGRATED QUERYLANGUAGE INTEGRATED QUERY
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
54 von 83 22.08.2016 08:58
KOMBINATIONKOMBINATION
.concat();
// oder
.merge();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
55 von 83 22.08.2016 08:58
CONCAT()CONCAT()
...1...2...3...4...5..> sourceOne = Rx.Observable.range(1, 5)
..6..7..8..9..10.> sourceTwo = Rx.Observable.range(6, 5)
...1...2...3...4...5..6..7..8..9..10| sourceOne.concat(sourceTwo)
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
56 von 83 22.08.2016 08:58
MERGE()MERGE()
...1...2...3...4...5..> sourceOne = Rx.Observable.range(1, 5)
..6..7..8..9..10.> sourceTwo = Rx.Observable.range(6, 5)
...?...?...?...?...?...?...?...?...?...?| sourceOne.merge(sourceTwo)
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
57 von 83 22.08.2016 08:58
MERGE()MERGE()
...1...2...3...4...5..> sourceOne = Rx.Observable.range(1, 5)
..6..7..8...9..10.> sourceTwo = Rx.Observable.range(6, 5)
..61.7.28..39.410..5.| sourceOne.merge(sourceTwo)
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
58 von 83 22.08.2016 08:58
FILTERFILTER
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
59 von 83 22.08.2016 08:58
var source = Rx.Observable.range(1,10);
var filtered = source.filter(function (x) {
return x % 2 === 0;
});
...1...2...3...4...5...6...7...8...9...10> Rx.Observable.range(1, 10)
......2......4.........6.......8.......10| filtered
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
60 von 83 22.08.2016 08:58
PROJEKTIONENPROJEKTIONEN
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
61 von 83 22.08.2016 08:58
var list = [
{id: 1001, name: 'Piña Colada', zutaten: [], prozent: 5.0 },
{id: 1002, name: ' Tequila Sunrise', zutaten: [], prozent: 6.0 },
{id: 1003, name: ' Long Island', zutaten: [], prozent: 7.0 },
];
var source = Rx.Observable.from(list);
var ids = source.map(function (item) {
return item.id;
});
var disposal = ids.subscribe(function (x) {
console.log('onNext Id: ' + x);
});
disposal.dispose();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
62 von 83 22.08.2016 08:58
OUTPUTOUTPUT
onNext Id: 1001
onNext Id: 1002
onNext Id: 1003
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
63 von 83 22.08.2016 08:58
??
.flatMap();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
64 von 83 22.08.2016 08:58
var source = Rx.Observable
.range(1, 2)
.flatMap(function (x) {
return Rx.Observable.range(x, 2);
});
var subscription = source.subscribe(
function (x) {
console.log('onNext: ' + x);
}
);
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
65 von 83 22.08.2016 08:58
return Rx.Observable.range(1, 2);
return Rx.Observable.range(2, 2);
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
66 von 83 22.08.2016 08:58
OUTPUTOUTPUT
> onNext: 1
> onNext: 2
> onNext: 2
> onNext: 3
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
67 von 83 22.08.2016 08:58
NOCH MEHR?NOCH MEHR?
GITHUB/DOKUMENTATIONGITHUB/DOKUMENTATION
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
68 von 83 22.08.2016 08:58
PROMISES?PROMISES?
Single Value
Cancellation?
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
69 von 83 22.08.2016 08:58
ARRAY OPERATORENARRAY OPERATOREN
VS.VS.
RX OPERATORENRX OPERATOREN
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
70 von 83 22.08.2016 08:58
ARRAY OPERATORENARRAY OPERATOREN
Komplette Liste wird durch gereicht
dabei auf jedem Eintrag
Projektion - map, ..
Ge�ltert - reduce, �lter
Ergänzt - concat, merge
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
71 von 83 22.08.2016 08:58
RX OPERTORENRX OPERTOREN
Jedes Event/Jeder Eintrag einzeln
dabei
Projektion - map, ..
Ge�ltert - reduce, �lter
Ergänzt - concat, merge
Filter = STOP => nicht weiter gereicht
Ergänzung nur der Zugang für weiteren Stream
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
72 von 83 22.08.2016 08:58
ACTIONACTION
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
73 von 83 22.08.2016 08:58
<input type="text" id="input"/>
<h2>Results</h2>
<ul id="results">
</ul>
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
74 von 83 22.08.2016 08:58
var $input = $('#input');
var $results = $('#results');
var suggestions = Rx.Observable.fromEvent($input, 'keyup');
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
75 von 83 22.08.2016 08:58
var suggestions = Rx.Observable.fromEvent($input, 'keyup')
.pluck('target', 'value')
.filter(function(text) { return text.length > 2 })
.debounce(500 /* ms */)
.distinctUntilChanged();
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
76 von 83 22.08.2016 08:58
...
flatMapLatest(function (term) {
return $.ajax({
url: 'https://en.wikipedia.org/w/api.php',
dataType: 'jsonp',
data: {
action: 'opensearch',
format: 'json',
search: term
}
}).promise();
});
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
77 von 83 22.08.2016 08:58
...
.subscribe(
function(data) {
$results
.empty()
.append($.map(data[1], function (value) {
return $('<li>').text(value);
}))
},
function(error) {
$results
.empty()
.append($('<li>'))
.text('Error:' + error);
}
);
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
78 von 83 22.08.2016 08:58
JS FIDDLEJS FIDDLE
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
79 von 83 22.08.2016 08:58
QUESTIONS?QUESTIONS?
Ask Now!
Twitter: @ElectricMaxxx
Mail: Maximilian.Berghoff@may�ower.de
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
80 von 83 22.08.2016 08:58
LINKSLINKS
RxJS docs
Marbles
Liste an Tutorials
Repository
Ausführliches Tutorial
Video Tutorials
Buch
ALTERNATIVENALTERNATIVEN
cyclejs
BACONJS
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
81 von 83 22.08.2016 08:58
THANK YOU!THANK YOU!
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
82 von 83 22.08.2016 08:58
< <
Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/
83 von 83 22.08.2016 08:58

Weitere ähnliche Inhalte

Andere mochten auch

CV ΛΑΡΙΣΑ-ΘΕΣΣΑΛΟΝΙΚΗ
CV ΛΑΡΙΣΑ-ΘΕΣΣΑΛΟΝΙΚΗCV ΛΑΡΙΣΑ-ΘΕΣΣΑΛΟΝΙΚΗ
CV ΛΑΡΙΣΑ-ΘΕΣΣΑΛΟΝΙΚΗ3darchdeco
 
Eine Symfony Application um CMS-Funktionen erweitern
Eine Symfony Application um CMS-Funktionen erweiternEine Symfony Application um CMS-Funktionen erweitern
Eine Symfony Application um CMS-Funktionen erweiternMaximilian Berghoff
 
знайомство з бібліотекою - філією №2 Івано-Франківської МЦБС
знайомство з бібліотекою - філією №2 Івано-Франківської МЦБСзнайомство з бібліотекою - філією №2 Івано-Франківської МЦБС
знайомство з бібліотекою - філією №2 Івано-Франківської МЦБСkorsuna
 
आपली पृथ्वी आणि तिची वैशिष्ट्ये
आपली पृथ्वी आणि तिची वैशिष्ट्येआपली पृथ्वी आणि तिची वैशिष्ट्ये
आपली पृथ्वी आणि तिची वैशिष्ट्येJnana Prabodhini Educational Resource Center
 
PioneersIO - Networking with Docker
PioneersIO - Networking with DockerPioneersIO - Networking with Docker
PioneersIO - Networking with DockerLaurent Grangeau
 
Meetup Openstack : At the heart of IT revolution
Meetup Openstack : At the heart of IT revolutionMeetup Openstack : At the heart of IT revolution
Meetup Openstack : At the heart of IT revolutionLaurent Grangeau
 
Lptw proper-10 a-yc-ot lesson for sunday skol
Lptw proper-10 a-yc-ot lesson for sunday skolLptw proper-10 a-yc-ot lesson for sunday skol
Lptw proper-10 a-yc-ot lesson for sunday skolGemma Diaz
 

Andere mochten auch (16)

CV ΛΑΡΙΣΑ-ΘΕΣΣΑΛΟΝΙΚΗ
CV ΛΑΡΙΣΑ-ΘΕΣΣΑΛΟΝΙΚΗCV ΛΑΡΙΣΑ-ΘΕΣΣΑΛΟΝΙΚΗ
CV ΛΑΡΙΣΑ-ΘΕΣΣΑΛΟΝΙΚΗ
 
Andaimeparte3ok
Andaimeparte3okAndaimeparte3ok
Andaimeparte3ok
 
आम्ले आम्लारी आणि क्षार
आम्ले आम्लारी आणि क्षारआम्ले आम्लारी आणि क्षार
आम्ले आम्लारी आणि क्षार
 
Eine Symfony Application um CMS-Funktionen erweitern
Eine Symfony Application um CMS-Funktionen erweiternEine Symfony Application um CMS-Funktionen erweitern
Eine Symfony Application um CMS-Funktionen erweitern
 
знайомство з бібліотекою - філією №2 Івано-Франківської МЦБС
знайомство з бібліотекою - філією №2 Івано-Франківської МЦБСзнайомство з бібліотекою - філією №2 Івано-Франківської МЦБС
знайомство з бібліотекою - філією №2 Івано-Франківської МЦБС
 
CV-2015 net
CV-2015 netCV-2015 net
CV-2015 net
 
APT - CANTEIRO DE OBRA
APT - CANTEIRO DE OBRAAPT - CANTEIRO DE OBRA
APT - CANTEIRO DE OBRA
 
आपली पृथ्वी आणि तिची वैशिष्ट्ये
आपली पृथ्वी आणि तिची वैशिष्ट्येआपली पृथ्वी आणि तिची वैशिष्ट्ये
आपली पृथ्वी आणि तिची वैशिष्ट्ये
 
PioneersIO - Networking with Docker
PioneersIO - Networking with DockerPioneersIO - Networking with Docker
PioneersIO - Networking with Docker
 
Animals
AnimalsAnimals
Animals
 
Meetup Openstack : At the heart of IT revolution
Meetup Openstack : At the heart of IT revolutionMeetup Openstack : At the heart of IT revolution
Meetup Openstack : At the heart of IT revolution
 
RESTing on HTTP
RESTing on HTTPRESTing on HTTP
RESTing on HTTP
 
The desert g
The desert gThe desert g
The desert g
 
साधी यंत्रे
साधी यंत्रेसाधी यंत्रे
साधी यंत्रे
 
APT - BUEIROS
APT - BUEIROSAPT - BUEIROS
APT - BUEIROS
 
Lptw proper-10 a-yc-ot lesson for sunday skol
Lptw proper-10 a-yc-ot lesson for sunday skolLptw proper-10 a-yc-ot lesson for sunday skol
Lptw proper-10 a-yc-ot lesson for sunday skol
 

Ähnlich wie Reactive Javascript - FrOSCon - 2016

Reaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenReaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenQAware GmbH
 
Reaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenReaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenQAware GmbH
 
Reaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenReaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenQAware GmbH
 
Reaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenReaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenQAware GmbH
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht SkriptsprachenA. LE
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScriptManfred Steyer
 
Einführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungEinführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungDigicomp Academy AG
 
Java FX8 JumpStart - JUG ch - zürich
Java FX8   JumpStart - JUG ch - zürichJava FX8   JumpStart - JUG ch - zürich
Java FX8 JumpStart - JUG ch - zürichSven Ruppert
 
Funktionale Reaktive Programmierung mit Sodium
Funktionale Reaktive Programmierung mit SodiumFunktionale Reaktive Programmierung mit Sodium
Funktionale Reaktive Programmierung mit SodiumTorsten Fink
 
Open icf (open identity connector framework) @ forgerock deutsch
Open icf (open identity connector framework) @ forgerock   deutschOpen icf (open identity connector framework) @ forgerock   deutsch
Open icf (open identity connector framework) @ forgerock deutschHanns Nolan
 
ICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehenICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehenKai Donato
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2Manfred Steyer
 
Leveraging the Power of Solr with Spark
Leveraging the Power of Solr with SparkLeveraging the Power of Solr with Spark
Leveraging the Power of Solr with SparkQAware GmbH
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014emrox
 
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG
 
Reaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenReaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenQAware GmbH
 

Ähnlich wie Reactive Javascript - FrOSCon - 2016 (20)

Reaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenReaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen Worten
 
Reaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenReaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen Worten
 
Reaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenReaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen Worten
 
Reaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenReaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen Worten
 
Mit dem API ins CMS
Mit dem API ins CMSMit dem API ins CMS
Mit dem API ins CMS
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
 
Einführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungEinführung in die funktionale Programmierung
Einführung in die funktionale Programmierung
 
Java FX8 JumpStart - JUG ch - zürich
Java FX8   JumpStart - JUG ch - zürichJava FX8   JumpStart - JUG ch - zürich
Java FX8 JumpStart - JUG ch - zürich
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
 
Funktionale Reaktive Programmierung mit Sodium
Funktionale Reaktive Programmierung mit SodiumFunktionale Reaktive Programmierung mit Sodium
Funktionale Reaktive Programmierung mit Sodium
 
Open icf (open identity connector framework) @ forgerock deutsch
Open icf (open identity connector framework) @ forgerock   deutschOpen icf (open identity connector framework) @ forgerock   deutsch
Open icf (open identity connector framework) @ forgerock deutsch
 
ICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehenICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehen
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2
 
TypeScript
TypeScriptTypeScript
TypeScript
 
Leveraging the Power of Solr with Spark
Leveraging the Power of Solr with SparkLeveraging the Power of Solr with Spark
Leveraging the Power of Solr with Spark
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
 
TypeScript
TypeScriptTypeScript
TypeScript
 
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
 
Reaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen WortenReaktive Programmierung in verständlichen Worten
Reaktive Programmierung in verständlichen Worten
 

Mehr von Maximilian Berghoff

Sustainability in der deploy pipeline
Sustainability in der deploy pipelineSustainability in der deploy pipeline
Sustainability in der deploy pipelineMaximilian Berghoff
 
Natural language understanding meets php php ruhr 2018
Natural language understanding meets php   php ruhr 2018Natural language understanding meets php   php ruhr 2018
Natural language understanding meets php php ruhr 2018Maximilian Berghoff
 
Angular Mini Hackathon Code Talks 2019
Angular Mini Hackathon Code Talks 2019Angular Mini Hackathon Code Talks 2019
Angular Mini Hackathon Code Talks 2019Maximilian Berghoff
 
Search engine optimization for symfony developers
Search engine optimization for symfony developersSearch engine optimization for symfony developers
Search engine optimization for symfony developersMaximilian Berghoff
 
Introduction into FrOSCon PHP Track
Introduction into FrOSCon PHP TrackIntroduction into FrOSCon PHP Track
Introduction into FrOSCon PHP TrackMaximilian Berghoff
 
API Plattform - A Backend in Minutes
API Plattform - A Backend in MinutesAPI Plattform - A Backend in Minutes
API Plattform - A Backend in MinutesMaximilian Berghoff
 
The content manager loves the tree
The content manager loves the treeThe content manager loves the tree
The content manager loves the treeMaximilian Berghoff
 
Extending a symfony application by cms features
Extending a symfony application by cms featuresExtending a symfony application by cms features
Extending a symfony application by cms featuresMaximilian Berghoff
 
RESTing on HTTP - FrOSCon 10 - 2015-08-23
RESTing on HTTP - FrOSCon 10 - 2015-08-23RESTing on HTTP - FrOSCon 10 - 2015-08-23
RESTing on HTTP - FrOSCon 10 - 2015-08-23Maximilian Berghoff
 

Mehr von Maximilian Berghoff (16)

Sustainability in der deploy pipeline
Sustainability in der deploy pipelineSustainability in der deploy pipeline
Sustainability in der deploy pipeline
 
Development is for future
Development is for futureDevelopment is for future
Development is for future
 
Development is for future
Development is for futureDevelopment is for future
Development is for future
 
Natural language understanding meets php php ruhr 2018
Natural language understanding meets php   php ruhr 2018Natural language understanding meets php   php ruhr 2018
Natural language understanding meets php php ruhr 2018
 
NLU meets PHP
NLU meets PHPNLU meets PHP
NLU meets PHP
 
Angular Mini Hackathon Code Talks 2019
Angular Mini Hackathon Code Talks 2019Angular Mini Hackathon Code Talks 2019
Angular Mini Hackathon Code Talks 2019
 
Search engine optimization for symfony developers
Search engine optimization for symfony developersSearch engine optimization for symfony developers
Search engine optimization for symfony developers
 
Introduction into FrOSCon PHP Track
Introduction into FrOSCon PHP TrackIntroduction into FrOSCon PHP Track
Introduction into FrOSCon PHP Track
 
Angular Workshop FrOSCon 2018
Angular Workshop  FrOSCon 2018Angular Workshop  FrOSCon 2018
Angular Workshop FrOSCon 2018
 
API Plattform - A Backend in Minutes
API Plattform - A Backend in MinutesAPI Plattform - A Backend in Minutes
API Plattform - A Backend in Minutes
 
The content manager loves the tree
The content manager loves the treeThe content manager loves the tree
The content manager loves the tree
 
Aspects Of Code Quality meetup
Aspects Of Code Quality   meetupAspects Of Code Quality   meetup
Aspects Of Code Quality meetup
 
Extending a symfony application by cms features
Extending a symfony application by cms featuresExtending a symfony application by cms features
Extending a symfony application by cms features
 
Concepts of Code Quality
Concepts of Code QualityConcepts of Code Quality
Concepts of Code Quality
 
RESTing on HTTP - FrOSCon 10 - 2015-08-23
RESTing on HTTP - FrOSCon 10 - 2015-08-23RESTing on HTTP - FrOSCon 10 - 2015-08-23
RESTing on HTTP - FrOSCon 10 - 2015-08-23
 
Symfony-CMF/SeoBundle - unKonf
Symfony-CMF/SeoBundle - unKonfSymfony-CMF/SeoBundle - unKonf
Symfony-CMF/SeoBundle - unKonf
 

Reactive Javascript - FrOSCon - 2016

  • 1. REACTIVE JAVASCRIPT MIT RXJSREACTIVE JAVASCRIPT MIT RXJS MAXIMILIAN BERGHOFF - 21.08.2016 - FROSCONMAXIMILIAN BERGHOFF - 21.08.2016 - FROSCON Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 1 von 83 22.08.2016 08:58
  • 2. STELL EUCH VOR, ...STELL EUCH VOR, ... Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 2 von 83 22.08.2016 08:58
  • 3. ITERATOR PATTERNITERATOR PATTERN && OBSERVER PATTERNOBSERVER PATTERN Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 3 von 83 22.08.2016 08:58
  • 4. RXJS - REACTIVE JAVASCRIPTRXJS - REACTIVE JAVASCRIPT Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 4 von 83 22.08.2016 08:58
  • 5. DIE AKTEUREDIE AKTEURE Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 5 von 83 22.08.2016 08:58
  • 6. Maximilian Berghoff @ElectricMaxxx github.com/electrimaxxx May�ower GmbH - Würzburg Maximilian.Berghoff@may�ower.de Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 6 von 83 22.08.2016 08:58
  • 7. ITERATOR PATTERNITERATOR PATTERN Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 7 von 83 22.08.2016 08:58
  • 8. var Iterator = function () {}; Iterator.prototype.next(); Iterator.prototype.rewind(); Iterator.prototype.current(); Iterator.prototype.hasNext(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 8 von 83 22.08.2016 08:58
  • 9. TRAVERSIERENTRAVERSIEREN while (Iterator.hasNext()) { console.log(Iterator.next()); } Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 9 von 83 22.08.2016 08:58
  • 10. GEDANKENSPIELGEDANKENSPIEL Liste von Cocktails Eigenschaften: id, name, zutaten, prozent, ... Aufgabe: "id & name von allem Contails mit prozent > 5.0" Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 10 von 83 22.08.2016 08:58
  • 11. var cocktails = [ {id: 1001, name: 'Piña Colada', zutaten: [], prozent: 5.0 }, {id: 1002, name: ' Tequila Sunrise', zutaten: [], prozent: 6.0 }, {id: 1003, name: ' Long Island', zutaten: [], prozent: 7.0 }, ]; Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 11 von 83 22.08.2016 08:58
  • 12. var newList = []; for(var i = 0; i <= cocktails.length; i++) { if (cocktails[i].prozent > 5.0) { newList.push({id: cocktails[i].id, title: cocktails[i].title}) } } console.log(newList); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 12 von 83 22.08.2016 08:58
  • 13. var newList = []; cocktails.forEach(function (cocktail) { if (cocktails[i].prozent > 5.0) { newList.push({id: cocktail.id, title: cocktail.title}) } }); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 13 von 83 22.08.2016 08:58
  • 14. var godOnes = cocktails .filter(function (cocktail) { return cocktail.prozent > 5; }) .map(function (cocktail) { return {id: cocktail.id, name: cocktail.name}; }); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 14 von 83 22.08.2016 08:58
  • 15. OBSERVER PATTERNOBSERVER PATTERN Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 15 von 83 22.08.2016 08:58
  • 16. Observable.prototype.subscribe(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 16 von 83 22.08.2016 08:58
  • 17. Observer.prototype.notify(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 17 von 83 22.08.2016 08:58
  • 18. var Observable = function () {}; Observable.prototype.subscribe = function () {}; Observable.prototype.unsubscribe = function () {}; var Observer = function () {}; Observer.prototype.notify = function() {}; Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 18 von 83 22.08.2016 08:58
  • 19. HISTORYHISTORY Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 19 von 83 22.08.2016 08:58
  • 20. ERIK MEIERERIK MEIER BRAIN BACKMANBRAIN BACKMAN MATHEW PODWYSOCKIMATHEW PODWYSOCKI Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 20 von 83 22.08.2016 08:58
  • 21. LINQ TO EVENTSLINQ TO EVENTS Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 21 von 83 22.08.2016 08:58
  • 22. VOLTAVOLTA Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 22 von 83 22.08.2016 08:58
  • 23. WINDOWS FORMSWINDOWS FORMS <=><=> WEB FORMSWEB FORMS Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 23 von 83 22.08.2016 08:58
  • 24. BEISPIEL:BEISPIEL: DRAG & DROPDRAG & DROP MAUSBEWEGUNG VERFOLGENMAUSBEWEGUNG VERFOLGEN Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 24 von 83 22.08.2016 08:58
  • 25. EVENT LISTENER REGISTRIERENEVENT LISTENER REGISTRIEREN elem.addEventListener('mousedown', mousedown, false); elem.addEventListener('mouseup', mouseup, false); elem.addEventListener('mousemove', mousemove, false); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 25 von 83 22.08.2016 08:58
  • 26. MOUSE DOWNMOUSE DOWN function mousedown(e) { isDown = true; state = { startX: e.offsetX, startY: e.offsetY}; } Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 26 von 83 22.08.2016 08:58
  • 27. MOUSE MOVEMOUSE MOVE function mousemove(e) { if (!isDown) {return;} var delta = { endX: e.clientX - state.startX, endY: e.clientY - state.startY }; } Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 27 von 83 22.08.2016 08:58
  • 28. MOUSE UPMOUSE UP function mouseup (e) { isDown = false; state = null; } Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 28 von 83 22.08.2016 08:58
  • 29. UNSUBSCRIBEUNSUBSCRIBE function dispose() { elem.removeEventListener('mousedown', mousedown, false); elem.removeEventListener('mouseup', mouseup, false); elem.removeEventListener('mousemove', mousemove, false); } Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 29 von 83 22.08.2016 08:58
  • 30. DIE HOCHZEITDIE HOCHZEIT Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 30 von 83 22.08.2016 08:58
  • 31. REACTIVE EXTENSIONREACTIVE EXTENSION RxJava RxJS Rx.Net Rx.Scala Rx.Clojure Rx.Swift ... Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 31 von 83 22.08.2016 08:58
  • 32. REACTIVEX.IOREACTIVEX.IO Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 32 von 83 22.08.2016 08:58
  • 33. GITHUB.COM/REACTIVE-EXTIONSIONGITHUB.COM/REACTIVE-EXTIONSION Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 33 von 83 22.08.2016 08:58
  • 34. STREAM VON EVENTSSTREAM VON EVENTS Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 34 von 83 22.08.2016 08:58
  • 35. var list = [1, 2, 3, 4, 5]; list.forEach(function (item) { console.log("nexItem: %s", item); }); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 35 von 83 22.08.2016 08:58
  • 36. var list = [1, 2, 3, 4, 5]; var source = Rx.Observable.fromArray(list); var disposal = source.subscribe( function (x) {console.log('Next: ' + x);}, function (err) {console.log('Error: ' + err);}, function () {console.log('Completed');}); disposal.dispose(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 36 von 83 22.08.2016 08:58
  • 37. ASCII MURMELNASCII MURMELN ...1...2...3...4...5.> Rx.Observable.fromArray([1, 2, 3, 4, 5]) ...1...2...3...4...5| 1, 2, 3, 4, 5 are emitted values X is an error | is the 'completed' signal ...> is the timeline Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 37 von 83 22.08.2016 08:58
  • 38. OBSERVEROBSERVER Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 38 von 83 22.08.2016 08:58
  • 39. var disposal = source.subscribe( function (x) {console.log('Next: ' + x);}, function (err) {console.log('Error: ' + err);}, function () {console.log('Completed');} ); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 39 von 83 22.08.2016 08:58
  • 40. function Observer() { } Observer.prototype.onNext = function (value) { ... }; Observer.prototype.onError = function (error) { ... }; Observer.prototype.onCompleted = function () { ... }; Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 40 von 83 22.08.2016 08:58
  • 41. var source = Rx.Observable.range(1,10); var reducedSource = source.filter(function (value) { return value % 2 === 0; }); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 41 von 83 22.08.2016 08:58
  • 42. ...1...2...3...4...5...6...7...8...9...10> Rx.Observable.range(1, 10) .......2.......4.......6.......8.......10| reducedSource ...1...2...3...4...5...6...7...8...9...10| source Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 42 von 83 22.08.2016 08:58
  • 43. OBSERVALBEOBSERVALBE Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 43 von 83 22.08.2016 08:58
  • 44. function Disposable() { } Disposable.prototype.dispose = function () { ... } function Observable() { } /** * @return Disposable */ Observable.prototype.subscribe = function (observer) { ... } Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 44 von 83 22.08.2016 08:58
  • 45. (ER-) ZEUGUNG(ER-) ZEUGUNG Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 45 von 83 22.08.2016 08:58
  • 46. Rx.Observable.create(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 46 von 83 22.08.2016 08:58
  • 47. var source = Rx.Observable.create(function (observer) { observer.onNext(42); observer.onCompleted(); return function () { console.log('disposed'); } }); var subscription = source.subscribe( function (x) { console.log('onNext: %s', x); }, function (e) { console.log('onError: %s', e); }, function () { console.log('onCompleted'); } ); subscription.dispose(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 47 von 83 22.08.2016 08:58
  • 48. > onNext: 42 > onCompleted > disposed Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 48 von 83 22.08.2016 08:58
  • 49. Rx.Observable.range(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 49 von 83 22.08.2016 08:58
  • 50. Rx.Observable.fromEvent(element, eventName, [selector]) // oder Rx.Observable.fromCallback(func, [context], [selector]) Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 50 von 83 22.08.2016 08:58
  • 51. var input = $('#input'); var source = Rx.Observable.fromEvent(input, 'keyup'); var subscription = source.subscribe( function (x) {console.log('Next: key pressed!');}, function (err) {console.log('Error: %s', err);}, function () {console.log('Completed');}); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 51 von 83 22.08.2016 08:58
  • 52. var fs = require('fs'), Rx = require('rx'); var exists = Rx.Observable.fromCallback(fs.exists); var source = exists('file.txt'); var subscription = source.subscribe( function (x) {console.log('Next: ' + x);}, function (err) {console.log('Error: ' + err);}, function () {console.log('Completed');} ); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 52 von 83 22.08.2016 08:58
  • 53. ARBEITENARBEITEN Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 53 von 83 22.08.2016 08:58
  • 54. LINQLINQ LANGUAGE INTEGRATED QUERYLANGUAGE INTEGRATED QUERY Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 54 von 83 22.08.2016 08:58
  • 55. KOMBINATIONKOMBINATION .concat(); // oder .merge(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 55 von 83 22.08.2016 08:58
  • 56. CONCAT()CONCAT() ...1...2...3...4...5..> sourceOne = Rx.Observable.range(1, 5) ..6..7..8..9..10.> sourceTwo = Rx.Observable.range(6, 5) ...1...2...3...4...5..6..7..8..9..10| sourceOne.concat(sourceTwo) Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 56 von 83 22.08.2016 08:58
  • 57. MERGE()MERGE() ...1...2...3...4...5..> sourceOne = Rx.Observable.range(1, 5) ..6..7..8..9..10.> sourceTwo = Rx.Observable.range(6, 5) ...?...?...?...?...?...?...?...?...?...?| sourceOne.merge(sourceTwo) Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 57 von 83 22.08.2016 08:58
  • 58. MERGE()MERGE() ...1...2...3...4...5..> sourceOne = Rx.Observable.range(1, 5) ..6..7..8...9..10.> sourceTwo = Rx.Observable.range(6, 5) ..61.7.28..39.410..5.| sourceOne.merge(sourceTwo) Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 58 von 83 22.08.2016 08:58
  • 59. FILTERFILTER Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 59 von 83 22.08.2016 08:58
  • 60. var source = Rx.Observable.range(1,10); var filtered = source.filter(function (x) { return x % 2 === 0; }); ...1...2...3...4...5...6...7...8...9...10> Rx.Observable.range(1, 10) ......2......4.........6.......8.......10| filtered Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 60 von 83 22.08.2016 08:58
  • 61. PROJEKTIONENPROJEKTIONEN Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 61 von 83 22.08.2016 08:58
  • 62. var list = [ {id: 1001, name: 'Piña Colada', zutaten: [], prozent: 5.0 }, {id: 1002, name: ' Tequila Sunrise', zutaten: [], prozent: 6.0 }, {id: 1003, name: ' Long Island', zutaten: [], prozent: 7.0 }, ]; var source = Rx.Observable.from(list); var ids = source.map(function (item) { return item.id; }); var disposal = ids.subscribe(function (x) { console.log('onNext Id: ' + x); }); disposal.dispose(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 62 von 83 22.08.2016 08:58
  • 63. OUTPUTOUTPUT onNext Id: 1001 onNext Id: 1002 onNext Id: 1003 Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 63 von 83 22.08.2016 08:58
  • 64. ?? .flatMap(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 64 von 83 22.08.2016 08:58
  • 65. var source = Rx.Observable .range(1, 2) .flatMap(function (x) { return Rx.Observable.range(x, 2); }); var subscription = source.subscribe( function (x) { console.log('onNext: ' + x); } ); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 65 von 83 22.08.2016 08:58
  • 66. return Rx.Observable.range(1, 2); return Rx.Observable.range(2, 2); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 66 von 83 22.08.2016 08:58
  • 67. OUTPUTOUTPUT > onNext: 1 > onNext: 2 > onNext: 2 > onNext: 3 Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 67 von 83 22.08.2016 08:58
  • 68. NOCH MEHR?NOCH MEHR? GITHUB/DOKUMENTATIONGITHUB/DOKUMENTATION Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 68 von 83 22.08.2016 08:58
  • 69. PROMISES?PROMISES? Single Value Cancellation? Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 69 von 83 22.08.2016 08:58
  • 70. ARRAY OPERATORENARRAY OPERATOREN VS.VS. RX OPERATORENRX OPERATOREN Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 70 von 83 22.08.2016 08:58
  • 71. ARRAY OPERATORENARRAY OPERATOREN Komplette Liste wird durch gereicht dabei auf jedem Eintrag Projektion - map, .. Ge�ltert - reduce, �lter Ergänzt - concat, merge Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 71 von 83 22.08.2016 08:58
  • 72. RX OPERTORENRX OPERTOREN Jedes Event/Jeder Eintrag einzeln dabei Projektion - map, .. Ge�ltert - reduce, �lter Ergänzt - concat, merge Filter = STOP => nicht weiter gereicht Ergänzung nur der Zugang für weiteren Stream Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 72 von 83 22.08.2016 08:58
  • 73. ACTIONACTION Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 73 von 83 22.08.2016 08:58
  • 74. <input type="text" id="input"/> <h2>Results</h2> <ul id="results"> </ul> Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 74 von 83 22.08.2016 08:58
  • 75. var $input = $('#input'); var $results = $('#results'); var suggestions = Rx.Observable.fromEvent($input, 'keyup'); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 75 von 83 22.08.2016 08:58
  • 76. var suggestions = Rx.Observable.fromEvent($input, 'keyup') .pluck('target', 'value') .filter(function(text) { return text.length > 2 }) .debounce(500 /* ms */) .distinctUntilChanged(); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 76 von 83 22.08.2016 08:58
  • 77. ... flatMapLatest(function (term) { return $.ajax({ url: 'https://en.wikipedia.org/w/api.php', dataType: 'jsonp', data: { action: 'opensearch', format: 'json', search: term } }).promise(); }); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 77 von 83 22.08.2016 08:58
  • 78. ... .subscribe( function(data) { $results .empty() .append($.map(data[1], function (value) { return $('<li>').text(value); })) }, function(error) { $results .empty() .append($('<li>')) .text('Error:' + error); } ); Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 78 von 83 22.08.2016 08:58
  • 79. JS FIDDLEJS FIDDLE Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 79 von 83 22.08.2016 08:58
  • 80. QUESTIONS?QUESTIONS? Ask Now! Twitter: @ElectricMaxxx Mail: Maximilian.Berghoff@may�ower.de Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 80 von 83 22.08.2016 08:58
  • 81. LINKSLINKS RxJS docs Marbles Liste an Tutorials Repository Ausführliches Tutorial Video Tutorials Buch ALTERNATIVENALTERNATIVEN cyclejs BACONJS Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 81 von 83 22.08.2016 08:58
  • 82. THANK YOU!THANK YOU! Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 82 von 83 22.08.2016 08:58
  • 83. < < Reactive JavaScript mit RxJS - FrOSCon - 2016 http://localhost:8000/Reactive/?print-pdf/#/ 83 von 83 22.08.2016 08:58