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.
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.
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.
2,775 total views, 2 views today