Introduction to Reactive programming RxJs

 
Reactive programming is a general concept that you can find in any language, it is often associated with event driven UI, asynchronous programming with observable, where you can subscribe to events. Reactive Extensions (abbreviated Rx*) provides libraries for a wide variety of programming languages, including JavaScript (RxJS). RxJS it precisely that, an extension/library for JavaScript.
 
Reactive programming RxJs

  • What is Reactive programming RxJS?
  • But wait, what is an observable?
  • Anything can be a stream
  • Where can I use RxJs?
  • Try yourself
  • RxJS Observables vs Promises
  • RxJS integration with AngularJS.
  • Differences between RxJs and Knockout
  • Conclutions

What is Reactive programming RxJS?

Reactive programming RxJS or Reactive Extensions for JavaScript is a reactive streams library that can be used in the client-side in the browser or server-side with Node.js. to work with asynchronous data streams. From the perspective of JavaScript let’s analyze the last three words of the previous sentence: asynchronous – data – streams.
Asynchronous – Is the fact of calling a function and then register a callback when results are available, this way we are notified about the returning of that function and been able to continue with execution avoiding non responsive behavior in our page.
Data – Raw information represented by any data type: Number, String, Objects.
Stream – Data made available over time meaning that you don’t need the presence of all the information to start using it for example mouse clicks, user inputs, database queries or just the call to an API.

But wait, what is an observable?

Observable is a JavaScript implementation of the observer pattern (also known as ‘publish/subscribe’).
The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
It is mainly used to implement distributed event handling systems.

Anything can be a stream.

Taken from this great article of Gerard Sans.
Asynchronous data streams are a pretty old concept, it exists since Unix and take different names and behavior depending on the environment for example in Node.js they are called ‘streams’, ‘pipes’ on Unix and ‘async pipes’ on Angular 2.
reactive programming: programming is called reactive when you are working with Asynchronous data streams.
Using RxJS asynchronous data streams can be represented through Observables and manipulate those streams with different operators as if they were simple collections of data. Next section has some examples.

Where can I use RxJs?

Creating and subscribing to simple Observable sequences

First include rx.js file in your code, you can use a CDN https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.3/Rx.js:

<script src="rx.js"></script>

If using Node.js:

var Rx = require('rx');

Lets create a very simple example so you get the idea of how it works.
For this we are going to create a textarea (the stream acting as event generator) we are going to show to the user what we are writing in the textarea plus a fixed text (this is the reaction). This is going to looks like a data-binding between the textarea and the label.

<textarea></textarea>
  <p>
    <strong>Text:</strong>
    <code id="text"></code>
  </p>

 
const text = document.getElementById('text');
const area = document.querySelector('textarea')

const content$ = Rx.Observable
  .fromEvent(area, 'keyup') // each `keyup` throws an event on the stream
  // shows the content of the text area concatenated with the string ‘Fixed text’
  .map(e => e.target.value.trim() + ' Fixed text');

The suffix $ on the variable named ‘content’ it used to indicate that the variable is a data stream.
So, the data stream ‘content$’ will launch a new event each time the user inputs a new letter. The correct way to react to this constant stream of data is through the function “subscribe()” like this:

 
content$
  .subscribe(text => {
    console.log(`The textarea content is: ${text}`)
    text.innerText = text;//print the text.
  });

Now that we got the idea lets implement something more practical like a “word counter”, in order to obtain the amount of words, we need to update the stream and update the user interface to show how many words are written. To do this we need the function ‘map()’ which is one of the many operators provided by RxJS (a full list of RxJS operators can be found here):

 
content$
  .map(content => content.trim().split(' '))// make the string into an array of words
  .map(wordList => wordList.length)// count the array elements
  .subscribe(totalWords => {
     text.innerText = totalWords
  })

Each step is transformed into stream and return a modified object to the next step. Finally we are going to use the function ‘subscribe()’ where we indicate what is going to be the reaction, in this case, the reaction is to update the user interface to show the amount of counted words.

Try yourself (full code):

I recommend you to read this tutorial for better understanding of the subject:

The introduction to Reactive Programming RxJs you’ve been missing

What operator to use

 

RxJS Observables vs Promises

Promises is a concept from javascript async programming. Basically the Promises give an abstracted help to work with asynchronous matter’s inside the apps. The promise is the eventual result of an asynchronous data stream task. For better understanding read this and analyze the example code text taken from here:

“The primary way of interacting with a promise is through its then method, which registers callbacks to receive either a promise’s eventual value or the reason why the promise cannot be fulfilled. You can create them very easily where the constructor has two functions, resolve and reject which resolves the value or rejects it for a given reason “

  • Observables are cancellable. Observable also has the advantage over Promise to be cancellable. If the result of an HTTP request to a server or some other expensive async operation isn’t needed anymore, the Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don’t need the notification or the result it provides anymore.
  • The main difference here is that Promises in order to be able of retry the call, the caller must have access to the original function that return the Promise. In the other hand Observables are cancellable and the API provides operators to retrieve them (‘retry’ function).
  • A Promise handles a single event when an async operation completes or fails.
    Note: There are Promise libraries out there that support cancellation, but ES6 Promise doesn’t so far.

RxJS integration with AngularJS.

You may write a custom helper function to integrate this two but as you also may expect this task is already done. A library called rx.angular.js is in charge of this interoperability. Let’s analyze an example of using DOM-events:
To be able of use DOM-events we are going to use Rx.DOM, an HTML DOM bindings for RxJS provided by rx.angular.js. The next code is a feature to detect the time of inactivity of the user.

 
mergedStreams = rx.Observable.merge(  // mergin all the events coming from the user
rx.DOM.keydown(document), // keystrokes
rx.DOM.click(document), // mouse click
rx.DOM.mousemove(document), //mouse move
rx.DOM.scroll(document), //scroll
rx.DOM.touchstart(document) // taps
);

var idleStream = mergedStreams
.bufferWithTime(5000) //operator bufferWithTimes to catch all the event in buffer
.filter(function(arr){ //to check when the sequence is empty to notice that user is gone.
return arr.length===0;
})
.subscribe();

For more examples of how to integrate AngularJs with RXJs visit here:

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/howdoi/angular.md

Differences between RxJs and Knockout

The main main difference is:
 
Reactive programming RxJs allows composing operations against asynchronous streams , like http web requests or events, and includes advanced scenarios like combining streams for example when both event A and event B occur, execute X code, but stop it if B occur again.
 
KnockoutJs is an MVVM (not MVC) framework, with it you can manage the state of yourUI with a model that maps it’s functionality. This allows your to separate the logic from the view and the UI state.

 

Steve Sanderson, creator of Knockout, explained the difference on his blog:

I’m very familiar with Rx for JavaScript, having recently used it heavily on a big project, and in fact aspects of the design of Knockout are made with my Rx experiences in mind.

The key difference between Knockout’s implementation of the observer pattern and Rx’s is that Knockout automatically infers the associations and dependencies between observable from regular procedural code without you having to specify them up front though a special functional API. I wanted Knockout to use regular procedural/imperative-style code as it’s more familiar and approachable for most developers.

Another difference is that Rx is optimized for composing streams of events without state. At first I was enthusiastic about this and its functional purity, but after some time it felt increasingly like I was jumping through awkward hoops and had to invent extra ways to simulate state to manage UI commands efficiently. That’s why, in Knockout, all observables can be treated as stateful – for example you can always read their latest value (which is cached, by the way – it doesn’t recompute until the underlying data changes).

Rx goes further than Knockout into advanced ways of composing event streams, whereas Knockout goes further than Rx into UI development, letting you bind its observable to HTML DOM elements and templates and manipulate them any way you want. Rx is great at what it does but turned out not be be exactly how I wanted to build rich UIs – hence the design of Knockout.

Conclutions

I hope this article can be used as a starting point to dive into reactive programming for javascript RxJs, I encourage you to keep researching and learning about it since the intend of this post is to introduce the concept and make a comparison with other libraries like KnockoutJs, etc.

ASP.NET Core 1.0

In this opportunity I will be writing about one of the most used (and newest) and functional server-side web application framework: ASP.NET Core. Before entering into the ecosystem of this tool allow me to give you some feedback that may be needed in order to have a better understanding of topics related with versions, features and releases (this one is quite new).

Asp.net core

What is ASP.NET Core 1.0?

ASP.NET Core 1.0 is, in short terms, the evolution of ASP.NET 4.6. If you are thinking that it is just a superior version of ASP.NET 4.6 take away that myth of your head because ASP.NET Core 1.0 is an entire new based-cloud applications framework written from scratch, with a new focus different from its predecessor.
Two of the most appreciated characteristics of this new framework are:
First it is open source (supported by Microsoft) meaning that you can find and download the code on GitHub , also contribute to the development of it, and second, it is cross-platform, so you can run it either in Windows, Linux or Mac OS.

Advantages and Disadvantages. Looking back to ASP.NET 5.

Good:

– Open source: as I mentioned before, this is a huge advantage and everybody loves it.
– Cross-platform: this is an obvious point, run it everywhere!.
– Modular design: the main stuff here is NuGet packages. Developers can use NuGet Package Manager to install libraries to extend the features of apps so now is easier to maintain the code due to the benefits of package-based software.
– MVC and WEB.API are together in one: Back in ASP.NET, MVC and WEB.API were based on different versions of the framework and because of this some differences related to namespace and classes were present and tend to confuse sometimes. Now arrives MVC 6, a unique collection of objects with a unique namespace (Microsoft.AspNet.Mvc), this standard simplifies the development process.
– Dependency injection: Before this was available as an ad-on but now it is built-in the framework, but still third party’s solutions like Autofac should be functional.
– Productivity: The keyword here is Kestrel, a lightweight web server incorporated by Microsoft as an alternative to developer’s who does not want to use heavy options to host development. With Kestrel you can run the site in OSX.
– Easier integration with client-side frameworks like AngularJS, KnockoutJS and Bootstrap.

Bad:

– Issues with documentation in certain way: When in May of 2016 the RC2 of ASP.NET Core 1.0 was released the documentation was ‘incompleted’ because a lot of topics were without text. Today this situation was patched but sometimes you can find some cases, take in count that ASP.NET Core 1.1 is out too. God bless StackOverflow! 😉
– Sometimes when you are searching for information maybe a little bit hard, because this framework had many names in the past, first vNext, next ASP.NET 5 and today ASP.NET Core, this is not helpful.
– Compatibles solutions between versions not always is the best. You can find a solution to a specific trouble but it may not work because maybe it was written to a previous version. Thanks to GitHub and open source this can be fixed eventually because there is always an alternative.

What about ASP.NET Core 1.1?

The .NET Core 1.0 was updated with some changes, you can see them all here in the release notes.

Some of them are:
– Improved middleware in all sense through the user interface.
– Improved deployment of ASP.NET core apps on Microsoft Azure, increased the cloud support.
– Now other hosting options are available, beside IIS.

Let’s see an example of code, in this case it going to be an URL Rewriting Middle ware: (this was taken from here, check it if you want to see more examples.)

“URL Rewriting allows mapping a public URL space, designed for consumption of your clients, to whatever representation the downstream components of your middleware pipeline require as well as redirecting clients to different URLs based on a pattern.”

 
using System.IO;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Rewrite;
namespace MyApplication {

public class Startup {

public void Configure(IApplicationBuilder app, IHostingEnvironment env) 
{

var options = new RewriteOptions()
.AddRedirect("(.*)/$", "$1") // Redirect using a regular expression
.AddRewrite(@"app/(\d+)", "app?id=$1", skipRemainingRules: false) // Rewrite based on a Regular expression
.AddRedirectToHttps(302, 5001) // Redirect to a different port and use HTTPS
.AddIISUrlRewrite(env.ContentRootFileProvider, "UrlRewrite.xml") // Use IIS UrlRewriter rules to configure
.AddApacheModRewrite(env.ContentRootFileProvider, "Rewrite.txt"); // Use Apache mod_rewrite rules to configure
app.UseRewriter(options);
}

// More Code

}

}

From .Net Framework 4.6 to .Net Core 1.0 :

asp.net core chart

This images illustrates the main changes with its predecessor. I recommend you to read this post to understand some considerations before migrating from .NET 4.6 to .NET Core 1.0 as well as strategies and advices from the author to achieve it. In case you are not sure about what solution suits you, and need to pick, this post can give you a clear understanding.

Other resources to learn more about ASP.NET Core

Tutorials

Microsoft Virtual Academy – Introduction to ASP.NET Core

Building your first ASP.NET Core MVC application

Building Your First Web API with ASP.NET Core MVC and Visual Studio