Skip to content
This repository was archived by the owner on Apr 20, 2018. It is now read-only.

Commit 0e21de2

Browse files
New build
1 parent 2105b32 commit 0e21de2

3 files changed

Lines changed: 248 additions & 16 deletions

File tree

readme.md

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
*...is a set of libraries to compose asynchronous and event-based programs using observable collections and [Array#extras](http://blogs.msdn.com/b/ie/archive/2010/12/13/ecmascript-5-part-2-array-extras.aspx) style composition in JavaScript*
2424

25-
The project is actively developed by [Microsoft Open Technologies, Inc.](https://msopentech.com/), in collaboration with a community of open source developers.
25+
The project is actively developed by [Microsoft](https://microsoft.com/), in collaboration with a community of open source developers.
2626

2727
## The Need to go Reactive ##
2828

@@ -196,11 +196,9 @@ Please check out:
196196
## Resources
197197
198198
- Contact us
199-
- [Tech Blog](http://blogs.msdn.com/b/rxteam/)
200199
- [Twitter @ReactiveX](https://twitter.com/ReactiveX)
201-
- [Twitter @OpenAtMicrosoft](https://twitter.com/OpenAtMicrosoft)
200+
- [Gitter.im](https://gitter.im/Reactive-Extensions/RxJS)
202201
- [StackOverflow rxjs](http://stackoverflow.com/questions/tagged/rxjs)
203-
- [Slack](https://reactivex.slack.com/)
204202
205203
- Tutorials
206204
- [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)
@@ -240,14 +238,6 @@ Please check out:
240238
241239
There are a number of ways to get started with RxJS. The files are available on [cdnjs](http://cdnjs.com/libraries/rxjs/) and [jsDelivr](http://www.jsdelivr.com/#!rxjs).
242240
243-
### Custom Builds
244-
245-
You can use the [`rx-cli`](https://www.npmjs.com/package/rx-cli) to perform custom builds to create the RxJS you want:
246-
247-
```bash
248-
$ rx --lite --compat --methods select,selectmany,takeuntil,fromevent
249-
```
250-
251241
### Download the Source
252242
253243
```bash

src/modular/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@rxjs/rx",
3-
"version": "4.0.8",
3+
"version": "4.0.9",
44
"description": "The Reactive Extensions for JavaScript",
55
"main": "index.js",
66
"scripts": {

src/modular/readme.md

Lines changed: 245 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,249 @@
1-
[![NPM version](https://img.shields.io/npm/v/rx.svg)](https://www.npmjs.com/package/rx)
2-
[![Downloads](https://img.shields.io/npm/dm/rx.svg)](https://www.npmjs.com/package/rx)
1+
[![NPM version](https://img.shields.io/npm/v/@rxjs/rx.svg)](https://www.npmjs.com/package/@rxjs/rx)
2+
[![Downloads](https://img.shields.io/npm/dm/@rxjs/rx.svg)](https://www.npmjs.com/package/@rxjs/rx
33
[![Join the chat at https://gitter.im/Reactive-Extensions/RxJS](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Reactive-Extensions/RxJS?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
4-
# RxJS - The Reactive Extensions for JavaScript
4+
5+
**[The Need to go Reactive](#the-need-to-go-reactive)** |
6+
**[About the Reactive Extensions](#about-the-reactive-extensions)** |
7+
**[Batteries Included](#batteries-included)** |
8+
**[Why RxJS?](#why-rxjs)** |
9+
**[Dive In!](#dive-in)** |
10+
**[Resources](#resources)** |
11+
**[Getting Started](#getting-started)** |
12+
**[Contributing](#contributing)** |
13+
**[License](#license)**
14+
15+
# The Reactive Extensions for JavaScript (RxJS) <sup>4.0</sup>... #
16+
17+
*...is a set of libraries to compose asynchronous and event-based programs using observable collections and [Array#extras](http://blogs.msdn.com/b/ie/archive/2010/12/13/ecmascript-5-part-2-array-extras.aspx) style composition in JavaScript*
18+
19+
The project is actively developed by [Microsoft](https://microsoft.com/), in collaboration with a community of open source developers.
20+
21+
## The Need to go Reactive ##
22+
23+
Applications, especially on the web have changed over the years from being a simple static page, to DHTML with animations, to the Ajax revolution. Each time, we're adding more complexity, more data, and asynchronous behavior to our applications. How do we manage it all? How do we scale it? By moving towards "Reactive Architectures" which are event-driven, resilient and responsive. With the Reactive Extensions, you have all the tools you need to help build these systems.
24+
25+
## About the Reactive Extensions ##
26+
27+
The Reactive Extensions for JavaScript (RxJS) is a set of libraries for composing asynchronous and event-based programs using observable sequences and fluent query operators that many of you already know by [Array#extras](http://blogs.msdn.com/b/ie/archive/2010/12/13/ecmascript-5-part-2-array-extras.aspx) in JavaScript. Using RxJS, developers represent asynchronous data streams with Observables, query asynchronous data streams using our many operators, and parameterize the concurrency in the asynchronous data streams using Schedulers. Simply put, RxJS = Observables + Operators + Schedulers.
28+
29+
Whether you are authoring a web-based application in JavaScript or a server-side application in Node.js, you have to deal with asynchronous and event-based programming. Although some patterns are emerging such as the Promise pattern, handling exceptions, cancellation, and synchronization is difficult and error-prone.
30+
31+
Using RxJS, you can represent multiple asynchronous data streams (that come from diverse sources, e.g., stock quote, tweets, computer events, web service requests, etc.), and subscribe to the event stream using the Observer object. The Observable notifies the subscribed Observer instance whenever an event occurs.
32+
33+
Because observable sequences are data streams, you can query them using standard query operators implemented by the Observable type. Thus you can filter, project, aggregate, compose and perform time-based operations on multiple events easily by using these operators. In addition, there are a number of other reactive stream specific operators that allow powerful queries to be written. Cancellation, exceptions, and synchronization are also handled gracefully by using the methods on the Observable object.
34+
35+
But the best news of all is that you already know how to program like this. Take for example the following JavaScript code, where we get some stock data and then manipulate and iterate the results.
36+
37+
```js
38+
/* Get stock data somehow */
39+
const source = getAsyncStockData();
40+
41+
const subscription = source
42+
.filter(quote => quote.price > 30)
43+
.map(quote => quote.price)
44+
.forEach(price => console.log(`Prices higher than $30: ${price}`);
45+
```
46+
47+
Now what if this data were to come as some sort of event, for example a stream, such as a WebSocket? Then we could pretty much write the same query to iterate our data, with very little change.
48+
49+
```js
50+
/* Get stock data somehow */
51+
const source = getAsyncStockData();
52+
53+
const subscription = source
54+
.filter(quote => quote.price > 30)
55+
.map(quote => quote.price)
56+
.subscribe(
57+
price => console.log(`Prices higher than $30: ${price}`),
58+
err => console.log(`Something went wrong: ${err.message}`);
59+
);
60+
61+
/* When we're done */
62+
subscription.dispose();
63+
```
64+
65+
The only difference is that we can handle the errors inline with our subscription. And when we're no longer interested in receiving the data as it comes streaming in, we call `dispose` on our subscription. Note the use of `subscribe` instead of `forEach`. We could also use `forEach` which is an alias for `subscribe` but we highly suggest you use `subscribe`.
66+
67+
## Batteries Included ##
68+
69+
Sure, there are a lot of ways to get started with RxJS. Since RxJS has been built using the CommonJS style of modules, you can either take the whole thing via Node.js with requiring `@rxjs/rx` or simply in your browser using the files of `dist/rx.all.js` or `dist/rx.all.min.js`. We also have smaller versions such as a modular version of `rx.lite` which you can get via Node by requiring `@rxjs/rx/rx.lite` or in your browser `dist/rx.lite.js` or `dist/rx.lite.min.js`.
70+
71+
```js
72+
var Rx = require('@rxjs/rx');
73+
74+
const subscription = Rx.Observable.fromArray([1,2,3])
75+
.filter(x => x % 2 === 0)
76+
.map(x => x + 2)
77+
.subscribe(x => console.log(`The answer is ${x}`));
78+
// => The answer is 4
79+
```
80+
81+
How much you include is up to you. For example, want only a few operators?, then simply require what you need and leave the rest behind.
82+
83+
```js
84+
const fromArray = require('@rx/rx/observable/fromarray');
85+
const filter = require('@rxjs/rx/observable/filter');
86+
const map = require('@rxjs/rx/observable/map');
87+
88+
const source = fromArray([1,2,3]);
89+
90+
const filtered = filter(source, x => x % 2 === 0);
91+
92+
const mapped = map(filtered, x => x + 2);
93+
94+
const subscription = mapped.subscribe( x => console.log(`The answer is ${x}`) );
95+
// => The answer is 4
96+
```
97+
98+
Optionally you can add right to the Observable itself such as:
99+
100+
```js
101+
const Observable = require('@rxjs/rx/observable');
102+
103+
// Add class methods
104+
Observable.addToObject({
105+
fromArray: require('@rxjs/rx/observable/fromarray')
106+
});
107+
108+
// Add instance methods
109+
Observable.addToPrototype({
110+
filter: require('@rxjs/rx/observable/filter'),
111+
map: require('@rxjs/rx/observable/map')
112+
});
113+
114+
const subscription = Observable.fromArray([1,2,3])
115+
.filter(x => x % 2 === 0)
116+
.map(x => x + 2)
117+
.subscribe(x => console.log(`The answer is ${x}`));
118+
```
119+
120+
## Why RxJS? ##
121+
122+
One question you may ask yourself is why RxJS? What about Promises? Promises are good for solving asynchronous operations such as querying a service with an XMLHttpRequest, where the expected behavior is one value and then completion. Reactive Extensions for JavaScript unify both the world of Promises, callbacks as well as evented data such as DOM Input, Web Workers, and Web Sockets. Unifying these concepts enables rich composition.
123+
124+
To give you an idea about rich composition, we can create an autocompletion service which takes user input from a text input and then throttles queries a service (to avoid flooding the service with calls for every key stroke).
125+
126+
First, we'll reference the JavaScript files, including jQuery, although RxJS has no dependencies on jQuery...
127+
```html
128+
<script src="https://code.jquery.com/jquery.js"></script>
129+
<script src="rx.lite.js"></script>
130+
```
131+
Next, we'll get the user input from an input, listening to the keyup event by using the `Rx.Observable.fromEvent` method. This will either use the event binding from [jQuery](http://jquery.com), [Zepto](http://zeptojs.com/), [AngularJS](https://angularjs.org/), [Backbone.js](http://backbonejs.org/) and [Ember.js](http://emberjs.com/) if available, and if not, falls back to the native event binding. This gives you consistent ways of thinking of events depending on your framework, so there are no surprises.
132+
133+
```js
134+
const $input = $('#input');
135+
const $results = $('#results');
136+
137+
/* Only get the value from each key up */
138+
var keyups = Rx.Observable.fromEvent($input, 'keyup')
139+
.pluck('target', 'value')
140+
.filter(text => text.length > 2 );
141+
142+
/* Now debounce the input for 500ms */
143+
var debounced = keyups
144+
.debounce(500 /* ms */);
145+
146+
/* Now get only distinct values, so we eliminate the arrows and other control characters */
147+
var distinct = debounced
148+
.distinctUntilChanged();
149+
```
150+
151+
Now, let's query Wikipedia! In RxJS, we can instantly bind to any [Promises A+](https://github.com/promises-aplus/promises-spec) implementation through the `Rx.Observable.fromPromise` method. Or, directly return it and RxJS will wrap it for you.
152+
153+
```js
154+
function searchWikipedia (term) {
155+
return $.ajax({
156+
url: 'https://en.wikipedia.org/w/api.php',
157+
dataType: 'jsonp',
158+
data: {
159+
action: 'opensearch',
160+
format: 'json',
161+
search: term
162+
}
163+
}).promise();
164+
}
165+
```
166+
167+
Once that is created, we can tie together the distinct throttled input and query the service. In this case, we'll call `flatMapLatest` to get the value and ensure we're not introducing any out of order sequence calls.
168+
169+
```js
170+
const suggestions = distinct
171+
.flatMapLatest(searchWikipedia);
172+
```
173+
174+
Finally, we call the `subscribe` method on our observable sequence to start pulling data.
175+
176+
```js
177+
suggestions.subscribe(
178+
data => {
179+
$results
180+
.empty()
181+
.append($.map(data[1], value => $('<li>').text(value)))
182+
},
183+
error=> {
184+
$results
185+
.empty()
186+
.append($('<li>'))
187+
.text('Error:' + error);
188+
});
189+
```
190+
191+
And there you have it!
192+
193+
## Dive In! ##
194+
195+
Please check out:
196+
197+
- [Our Code of Conduct](https://github.com/Reactive-Extensions/RxJS/tree/master/code-of-conduct.md)
198+
- [The full documentation](https://github.com/Reactive-Extensions/RxJS/tree/master/src/modular/doc)
199+
- [Our design guidelines](https://github.com/Reactive-Extensions/RxJS/tree/master/doc/designguidelines)
200+
- [Our contribution guidelines](https://github.com/Reactive-Extensions/RxJS/tree/master/contributing.md)
201+
- [Our complete Unit Tests](https://github.com/Reactive-Extensions/RxJS/tree/master/src/modular/test)
202+
203+
## Resources
204+
205+
- Contact us
206+
- [Twitter @ReactiveX](https://twitter.com/ReactiveX)
207+
- [Gitter.im](https://gitter.im/Reactive-Extensions/RxJS)
208+
- [StackOverflow rxjs](http://stackoverflow.com/questions/tagged/rxjs)
209+
210+
## Getting Started
211+
212+
There are a number of ways to get started with RxJS.
213+
214+
### Download the Source
215+
216+
```bash
217+
git clone https://github.com/Reactive-Extensions/rxjs.git
218+
cd ./rxjs/src/modular
219+
```
220+
221+
### Installing with [NPM](https://www.npmjs.com/)
222+
223+
```bash`
224+
$ npm install @rxjs/rx
225+
$ npm install -g @rxjs/rx
226+
```
227+
228+
### Using with Node.js/JXcore
229+
230+
```js
231+
var Rx = require('@rxjs/rx');
232+
```
233+
234+
### In a Browser:
235+
236+
```html
237+
<!-- Or all of RxJS minus testing -->
238+
<script src="rx.all.js"></script>
239+
240+
<!-- Or keeping it lite -->
241+
<script src="rx.lite.js"></script>
242+
```
243+
244+
### Custom Builds
245+
246+
You can create custom builds using WebPack, Browserify, Rollup or other tools since RxJS is written in the style of CommonJS modules. If you are looking for inspiration, see our `webpack.config.js` and `webpack.config.production.js` files on how we use WebPack.
5247

6248
## Contributing ##
7249

0 commit comments

Comments
 (0)