Gain insights into reactive programming with RxJS. Learn about observables, operators, and concurrent programming to create real-world applications like a real-time earthquake visualizer and spaceship game.

_ Reactive Programming with RxJS by The Pragmatic Programmer_ .png

data.tar.gz

test rx

rx live

rx live-copy

rx live-earth

cycle

test rx-copy

cycle-rx

rx-cycle

test rx-copy-copy

cycle-rx-copy

cycle-rx-copymaham

qunit-job

In this course, you will learn about reactive programming techniques and use them to create real-world applications. Throughout this course, you will learn important concepts of RxJS programming such as observables, operators, concurrent programming, and how to build a complete web application.

Additionally, you will have the opportunity to build out applications for different real-world scenarios so that you can put what you learn into practice. You will use RxJS operators in scenarios such as the real-time earthquake visualizer and the reactive spaceship game.

By the end, you will have a new skill that you can utilize to build reactive programs as well as a few new projects to add to your portfolio.

Reactive Programming with RxJS

Instead of using the `h` function, we could write our UI using **JSX**, which is an XML-like syntax extension invented by Facebook that makes writing virtual DOM structures easier and more readable. Our `vtreeElements` function will look like this:

Doesn’t it look nicer? JSX looks more familiar to developers because it resembles HTML, but we can write it alongside JavaScript code, with the added advantage that we can treat it as a JavaScript type. 

For example, notice how we iterate the results array and return a `<div>` element directly, using the value of `link` and `result.title` in the element itself. JavaScript values can be inlined by putting them inside curly brackets.

Since JSX is a syntax extension, we need a compiler that transforms it into the final JavaScript code, which looks a lot like our h-based code from the previous section. We’ll use Babel for this process. **Babel** is a compiler that transforms modern JavaScript into JavaScript that runs everywhere. It also transforms some JavaScript extensions, such as JSX, which is our particular use case.

If we want to use JSX, we need to install Babel and use it when compiling the project. Fortunately, Babel has an adapter for Browserify called Babelify:

```
npm install babelify
```
In every file that uses JSX, we need to add the following lines at the top of the file:

```   /** @jsx hJSX */
var hJSX = CycleDOM.hJSX;
```
This tells Babel to use Cycle.js’ `hJSX` adapter to process JSX, instead of using the default React adapter.

Now when we want to compile our project, we will use the following command:

```
browserify index.js -t babelify --outfile bundle.js
```



Learn how JSX is used to write the user interface.

Getting Started

Introduction to Reactive Programming with RxJS

Understanding the Reactiveness

Understanding the Observables

Understanding Sequencing and its Operators

Make a Real-time Earthquake Visualizer

Building Concurrent Programs Through Pipelines

RxJS Subject Class

Building a Reactive Spaceship to Keep the Application Pure

Building a Complete Web Application Using RxJS

Getting Real Time Updates from Twitter using Node.js

Schedulers

React Web Applications With Cycle.js and using Model View Intent

Closing Remarks

Using JSX to Write UI