原文: https://codingthesmartway.com/getting-started-with-rxjs-part-1-setting-up-the-development-environment-creating-observables/

----------------------------------------------------------------

Getting Started With RxJS – Part 1: Setting Up The Development Environment & Creating Observables


Subscribe On YouTube

Code

Part 1: Setting Up The Development Environment & Creating Observables
Part 2: Subscriptions
Part 3: Hot And Cold Observables

RxJS (Reactive Extensions for JavaScript) is a library for transforming, composing, and querying streams of data. It brings the concept of reactive programming to the web. The library allows you to work with asynchronous data streams with ease. Asynchronous data streams can be described in the following way:

  • Asynchronous: Callback functions are registered to be invoked when results are available. We’re able to wait for data to become available without blocking the application.
  • Data Streams: Sequences of data made available over time. You don’t need all the information to be present in order to start using them.

In this Getting Started With RxJS tutorial series you’ll be able to get started with the RxJS library, get insights and a profound understanding of the most important concepts and building blocks.

In this first part of this series we’re going to set up the development environment and get started with the concept of Observables.

Observables are just a representation of any set of values over any amount of time. This is the most basic building block of RxJS.

RxJS is part of the ReactiveX project. The project’s website can be found at http://reactivex.io/:

Let’s get started by building a sample project and learn how Observables can be used in practice.


If you like CodingTheSmartWay, then consider supporting us via Patreon. With your help we’re able to release developer tutorial more often. Thanks a lot!


Installing Dependencies

To get started with our demo project we first need to create a new project folder:

$ mkdir rxjs-test

Next, change into that newly created folder by executing:

$ cd rxjs-test

Now we’re using NPM (Node.js Package Manager) to create a new package.json file inside of our project folder:

$ npm init -y

If you haven’t installed Node.js (and NPM) already on your system you first need to go to https://nodejs.org/first and follow the steps which are needed to install Node.js and NPM for your specific platform.

Next we need to add and install a few dependencies by using NPM again in the following way:

$ npm install rxjs webpack webpack-dev-server typescript ts-loader

Here we’re installing Webpack, TypeScript, the corresponding TypeScript loader for Webpack, and the Webpack development web server.

Webpack is a module bundler for modern JavaScript applications. When Webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language.

We also need to make sure that the Webpack CLI (Command Line Interface) is being installed as a development dependencies:

$ npm install webpack-cli --save-dev

Adding Script To Package.JSON

Let’s add a script with name start to the scripts section in package.json:

  "scripts": {
"start": "webpack-dev-server --mode development"
},

This script is executing the webpack-dev-server command in development mode to start up the Webpack development web server. Later on we’re able to execute the script by using the NPM command in the following way:

$ npm run start

Setting Up Webpack

Next, let’s add the Webpack configuration to our project. Therefore create a new file webpack.config.js in the root project folder and insert the following configuration code:

const path = require('path');

module.exports = {
entry: './src/index.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

Configuring TypeScript

Furthermore we need to include the TypeScript compiler configuration in the project as well. To do so create a new file tsconfig.json and insert the following JSON code which contains configuration properties for the TypeScript compiler:

{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"target": "es6",
"allowJs": true,
"lib": [
"es2017",
"dom"
]
}
}

Creating An Index.html File

Next, let’s create the index.html file inside of our project folder:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RxJS Demo</title> <style>
body { font-family: 'Arial'; background: lightgray }
ul { list-style-type: none; padding: 20px; }
li { padding: 15px; background: lightcoral; margin-bottom: 10px; }
</style>
</head>
<body>
<h1>RxJS Demo</h1>
<div>
<ul id="list"></ul>
</div>
<script src="/bundle.js"></script>
</body>
</html>

A few things to note here:

  • The body section of this HTML documents contains a <ul> element with ID list. This element will be used to output information about the Observable to the user.
  • The file bundle.js (which is the output of the Webpack build process) is included via <script> tag at the end of the body section.

Add The TypeScript Code

Now that the project setup is ready, the TypeScript and Webpack configuration is in place, and the HTML document has been created, we’re able to focus on the TypeScript code next.

Insider the project folder create a new subfolder src. Insert that newly created folder create a new file index.ts and insert the following code:

import { Observable } from 'rxjs';

var observable = Observable.create((observer:any) => {
observer.next('Hello World!');
observer.next('Hello Again!');
observer.complete();
observer.next('Bye');
}) observable.subscribe(
(x:any) => logItem(x),
(error: any) => logItem ('Error: ' + error),
() => logItem('Completed')
); function logItem(val:any) {
var node = document.createElement("li");
var textnode = document.createTextNode(val);
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
}

First of all we’re importing Observable from the rxjs library. By using method Observable.create we’re creating an instance of Observable and storing it in observable.

As an argument we’re passing in a callback method which gives us access to an Observer object. Now we’re able to use the Observer methods nextcomplete and error to create notifications of the corresponding types. In this example we’re calling the next method two times to send out notifications with string values. Then the complete method is called to send out the complete notification. After having send out the complete notification we’re calling the next method once again. The expectation here is that no new notification will be raised because the Observable is already completed.

The register callback methods which are invoked if a notification of a certain type is raised are registered by calling the subscribe method of the Observable. We’re able to register up to three callback methods for notification types next, error and complete.

Inside the callback methods we’re making use of a custom helper method logItem. This methods is updating the output by adding new list items to the list element.

Now we’re ready to start of the development web server by using the following command:

$ npm run start

The web application should now be accessible via URL http://localhost:8080 and you should be able to see the following result in the browser:

As expected the output contains three items:

  • Two items printing out the message from the first two next notification
  • One item outputting the complete notification

The last next notification (raised after the Observable was completed) is not emitted and therefore not contained in the output.

What’s Next

Now that you have a first understanding of RxJS Observables we’re going to dive deeper in the upcoming second part of this series and take a closer look at Observables and Subscriptions.

rxjs 入门--环境配置的更多相关文章

  1. Extjs入门——环境配置

    Extjs框架作为一个07年就上线的框架,虽然与现在的框架对比,显得十分臃肿.但是在针对企业内部引用系统上,它依旧能发挥出不错的效果.现在我接触到了Extjs,所以我准备写一个入门框架,简单的介绍Ex ...

  2. cocos2dx 入门 环境配置

    本人立志走游戏开发这条路,很早之前就准备学习cocos2dx,今天终于忙里偷闲入了一下门,把环境配置好了,创建了自己的第一个cocos项目! 一.环境配置 1.下载cocos https://coco ...

  3. go入门环境配置

    1.安装golang(64位).MinGW(64位).LiteIDE(32位) 下载golang安装包,双击安装,默认安装目录:C:\Go: MinGW安装包(x86_64-4.8.2-release ...

  4. Intel Edison学习笔记(二)—— 入门环境配置

    一.安装Screen sudo apt-get install screen 二.配置 1.连接USB,等待出现 2.测试串口是否存在: ls /dev/ttyUSB0 输出/dev/ttyUSB0, ...

  5. MongoDB学习笔记(二:入门环境配置及与关系型数据库区别总结)

    一.下载及安装MongoDB MongoDB下载官网链接:http://www.mongodb.org/downloads 具体安装步骤教程:http://www.shouce.ren/api/vie ...

  6. Spring Security Web应用入门环境搭建

    在使用Spring Security配置Web应用之前,首先要准备一个基于Maven的Spring框架创建的Web应用(Spring MVC不是必须的),本文的内容都是基于这个前提下的. pom.xm ...

  7. 2013 duilib入门简明教程 -- VS环境配置(2)

        既然是入门教程,那当然得基础点,因为搜索duilib相关资料时,发现有些小伙伴到处都是编译错误,以及路径配置错误等等,还有人不知道SVN,然后一个个文件手动下载的.     其实吧,duili ...

  8. 【OpenCV入门教程之一】 安装OpenCV:OpenCV 3.0 +VS 2013 开发环境配置

    图片太多,具体过程参照: [OpenCV入门教程之一] 安装OpenCV:OpenCV 3.0.OpenCV 2.4.8.OpenCV 2.4.9 +VS 开发环境配置 说下我这边的设置: 选择deb ...

  9. Kinect for Windows SDK开发入门(一):开发环境配置

    [译]Kinect for Windows SDK开发入门(一):开发环境配置 前几天无意中看到微软发布了Kinect for windows sensor,进去看了一下Kinect应用的例子,发现K ...

随机推荐

  1. Logstash+ Kafka基于AOP 实时同步日志到es

    Logstash是一个开源数据收集引擎,具有实时管道功能.Logstash可以动态地将来自不同数据源的数据统一起来,并将数据标准化到你所选择的目的地,logstash丰富的插件(logstash-in ...

  2. linux命令行模式与图形界面切换

    1.实时切换 1.1 命令行->图形 执行startx命令 1.2 图形->命令行 Ctrl+Alt+F1--F6 2.启动默认 2.1 启动进入命令行 修改/etc/inittab文件 ...

  3. CSP前的板子们

    见窝的luogu博客qwq noip前的板子们

  4. 不一样的go语言-athens源码概览

    前言   上一篇文章介绍了athens私服的安装以及vgo download protocol的简要介绍.本文着重介绍go proxy sever的实现原理以及athens是如何实现的. go get ...

  5. PHP CLI中,三个系统常量:STDIN、STDOUT、STDERR

    PHP CLI中,有三个系统常量,分别是STDIN.STDOUT.STDERR,代表文件句柄. /** *@ 标准输入 *@ php://stdin & STDIN *@ STDIN是一个文件 ...

  6. warning: LF will be replaced by CRLF in application.yml. The file will have its origina解决方法

    环境: windows提交时报错如图所示: 原因是存在符号转义问题 windows中的换行符为 CRLF, 而在linux下的换行符为LF,所以在执行add . 时出现提示,解决办法: git con ...

  7. 【转载】终于有人把“TCC分布式事务”的实现原理讲明白了

    之前网上看到很多写分布式事务的文章,不过大多都是将分布式事务各种技术方案简单介绍一下.很多朋友看了还是不知道分布式事务到底怎么回事,在项目里到底如何使用. 所以这篇文章,就用大白话+手工绘图,并结合一 ...

  8. wpf 把两个Bitmap 合并为一个

    水平合并 /// <summary> /// 将两个Bitmap水平合并为一个 /// </summary> /// <param name="first&qu ...

  9. Java调用Http/Https接口(1)--编写服务端

    Http接口输入的数据一般是键值对或json数据,返回的一般是json数据.本系列文章主要介绍Java调用Http接口的各种方法,本文主要介绍服务端的编写,方便后续文章里的客户端的调用.文中所使用到的 ...

  10. 微服务与SpringCloud简介

    A.官网 https://spring.io/projects/spring-cloud B.简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用 ...