In this section, we will get started with RXJS. So, if I start with official definition of RxJs, it says “An API for asynchronous programming with observable streams“. Here is the official site for this http://reactivex.io/. RXJS is just one part of its implementation. You can check its entire supported language at http://reactivex.io/languages.html. It supports wide variety of languages.
But, our focus will be JavaScript here. Now, let’s try to simplify there definition. RxJs is all about asynchronous programming, which means you write some code say any service which will wait for something to happen and then react accordingly. Service calls in JavaScript is classic example of it. In a nutshell, we are going to observe the data-source and react when new data arrives. So, let’s get started with demo.
As you can see, I have started fresh. There is nothing in it. Let me first create an HTML page here. I will also recommend to go through the documentation of RxJs at http://reactivex.io/rxjs/. This is needless to say for JavaScript stuffs, now node is one of the dependencies. Hence, make sure that node is installed on your machine. So, now I am going to pull all the packages from npm. In order to do that, I should have package.json in our folder, where all our packages will be listed. Now, the best way to configure the same is via command line say npm init.
As I do so, it will ask series of questions. You can choose to enter answers or keep pressing Enter and then modify later in the editor.
At the end, this will ask “Is this ok? (yes)“. I will press enter. And, then I go back at editor, then it will look something like this.
So, this package.json file is a good starting point. Here, I can modify this file as well. At this point, I can go ahead start installing my required components. The very first thing which I will install is RxJs via npm command npm install rxjs –save. –save will save the dependencies in our package.json file.
Upon successful install, I should be able to see rxjs as my dependency in my package.json file.
At this moment, I will need webpack as well. WebPack will build and bundle our code together with RxJs into a single file, which can be sent to browser. Apart from this, I will also need webpack server. This is development web-server which will be used to send files to the browser over HTTP. 
-dev means, I am installing the same as development dependencies. Once this is installed, you will see tree kind of structure as confirmation like shown below. 
In order to use some ES-2015 features, I am going to need one transpiler. For that I will be installing TypeScript with the following command npm install typescript typings ts-loader –save -dev. typings you can think of schema for TypeScript and ts-loader is a webpack typscript plugin, which helps webpack work with TypeScript. One more thing which I need to install here is Type-Definition file to understand all the capabilities of RxJs as it is built targeting ES6 with the following command. node_modules\.bin\typings install dt~es6-shim –global –save Also, you can notice that, I have installed this Type-Definition globally. 
With these things installed, now my solution looks like this. 
At this stage, my package.json will look like
Now my all the components are installed. I just need to wire these things up. First thing, I need to create typescript config file. Hence, I have created new file with below snippet.
This means, I am going to target ES5, which any browsers understand, then I am going to use module as commsonjs which webpack understands and then I have also turned on SourceMap just to make debugging easy. Then, I can create webpack.config.js file. Now, this configuration file is not a json file rather its a js file. This is basically the code, which webpack will execute in node-js environment. Below is the snippet of of the same.
Now, let’s understand this configuration. Fisrt of all, in this configuration file, I have specified entry point for my app which means which file will bootstrap the app. Webpack will analyze this file and bring all the dependencies and produce the bundle for my application. Then, I have specified output file. Then, I have specified module loaders. Loaders in webpack are tools that can look at different file type and process those files. Then, it will give as output file to webpack. Here, I have specified .ts file only as a javascript regular expression. Lastly, I have specified extensions here. Apart from this configuration, I have also modified package.json file with script section. Here, I have added start and postinstall command.
This is pretty simple. Start will get launched by webpack dev server which we already installed with watch syntax, which means as soon as anything gets modified in my main file, it will automatically refresh in the browser. This post install is very significant. This will help restoring all the packages if you have downloaded any project from source control. In that case, you just need to say npm install and this will install all the stuffs for you. Apart from this, I have also created main.ts file, which is having only line as of now console.log(“Welcome to the world of RXJS!!!”); It means, when my project gets compiled and start running then ideally it should produce app.js file as output file, hence this needs to be referred in my home.html file. Below is the snippet for the same.
With these changes in place, my app looks like
Now, I can go ahead and say npm start in terminal.
As you can see, now the app is hosted on port 8081 and its running fine. Therefore, I can now navigate http://localhost:8081/. This will open below page.
Now, from here, I can click on home.html page and this will print
And, at the same time, when I see in the developer tools, I can see below message logged in browser.
I hope you would have liked today’s session. This is just the beginning of reactive components. Although, we have done nothing reactive in this post, but in coming posts we’ll certainly do. Thanks for joining me.
Thanks,
Rahul Sahay
Happy Coding
