Rx javascript: Difference between revisions
| Line 162: | Line 162: | ||
<syntaxhighlight lang="ts"> | <syntaxhighlight lang="ts"> | ||
import {Observable} from "rxjs/Observable" | import {Observable} from "rxjs/Observable" | ||
import | import { map,filter } from "rxjs/operators"; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=More Examples= | =More Examples= | ||
==Mouse Events (or Any== | ==Mouse Events (or Any== | ||
Revision as of 04:41, 2 September 2020
Introduction
Packages
The course used the following tools
"dependencies": {
"rxjs": "^6.6.2"
},
"devDependencies": {
"source-map-loader": "^1.1.0",
"ts-loader": "^8.0.3",
"typescript": "^4.0.2",
"typings": "^2.1.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
Typescript Configuration
I used the following tsconfig.json.
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
Webpack Configuration
Specify
- the entry point
- the output file
- add script tag to index.html
- Provide module loaders, which consists of a test and which loader to use
- Provide how Webpack should resolve modules
module.exports = {
entry: "./main",
output: {filename: "app.js"},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
use: ['source-map-loader'],
},
{
test: /\.ts$/,
use: "ts-loader",
exclude: "/node_modules",
}
]
},
resolve: {
extensions: [
".ts",
".js"
],
}
}
And the main.ts
alert("ok")
And in the Index.html
<html>
<head>
<title>RxJs</title>
</head>
<body>
<div>hello</div>
<script src="app.js"></script>
</body>
</html>
Scripts Configuration
In the package.json we can not set our scripts for npm
"scripts": {
"start": "webpack-dev-server --watch --inline",
"postinstall": "typings install"
}
Basic Example
From with Arrow Approach
import { from as ObservableFrom } from 'rxjs';
let numbers = [1,2,3,40]
let values = ObservableFrom(numbers)
source.subscribe(
value => console.log(`"Value received was ${value}`),
e => console.error(`We had an error ${e}`),
() => console.log("Complete")
);
From with Class Approach
Quite liked the explanation Anyway your responsibility is to provide a class which implements next, error and complete. You do not need to implement all but it is shown here
import { from as ObservableFrom } from 'rxjs';
let numbers = [1,2,3,40]
let source = ObservableFrom(numbers)
class MyObserverable
{
next(value) {
console.log(`"Value received was ${value}`)
}
error(e) {
console.error(`We had an error ${e}`)
}
complete() {
console.log("Complete")
}
}
source.subscribe(new MyObserverable)
Create
This is much the same thing but we provide the function which takes an observer.
import { from as ObservableFrom } from 'rxjs';
let numbers = [1,2,3,40]
let source = Observable.create(observer => {
for(let n of numbers) {
observer.next(n)
}
});
source.subscribe(
value => console.log(`"Value received was ${value}`),
e => console.error(`We had an error ${e}`),
() => console.log("Complete")
);
Operators
RxJs provides many operators which can be chained together to manipulate the data the observer will see. Below is a simple example of this using map and filter.
let source = Observable.create(observer => {
for(let n of numbers) {
observer.next(n)
}
})
.map(n => n * 2)
.filter(n => n > 4);
Importing
Size of the downloads can be considerable if left to the default. Although there are now tree shaking tools at build time we can help. Here is the recommended way for the example above using map and filter.
import {Observable} from "rxjs/Observable"
import { map,filter } from "rxjs/operators";
More Examples
Mouse Events (or Any
You can capture events using the same technics as above. For the mouse use the fromEvent on the Observer. In this example I have filtered the event to just have the x,y co-ordinates sent to the source.