Reactive Programming in UI5 Application

Hello All,

Reactive programming paradigm is mainly about processing data streams. Wikipedia definition for the same is “In computing, reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change…..”.

There is a popular JavaScript library Reactive JS(RxJS) available for this kind of programming.

Reactive JS(RxJS) is very useful when dealing with continuous stream of data. Stream of data can be anything like http responses from servers or news feeds, user input like button clicks, etc. Also RxJS library has lots of readily available operators to manipulate incoming data streams.

To use RxJS in UI5 application, we will start with simple UI5 application with button to generate random number stream and display latest generated number. We will use simple JSON model to store latest number and display it as shown below.

• UI5 Application 

Instead of directly updating model from button press event handler, we will use RxJS observable and subscriber to transfer generated number to model. There can be multiple subscribers to observable as shown in below data flow diagram.

• High level data flow in the application. 

Lets start with simple application with button and input field. Application structure will be as shown below with additional folder for library and source file for RxJS library v5.5.6.

Component init method initialize JSON model to hold latest number in random number stream.

// setup the model
var oData = {
	nLatestNo: 0
};
var oModel = new JSONModel(oData);
this.setModel(oModel);

On view controller import RxJS library – For simplicity of the application library is imported at view level, however it will be available across the application. In real application library should loaded and initialized at application level.

/* global Rx:true */
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"my/app/reactiveJS/libs/rx"   // Import RxJS Library, this will create global variable Rx
], function(Controller) {
	"use strict";
	return Controller.extend("my.app.reactiveJS.controller.View", {
	});
});

On view initialization create observable to emit number sequence and subscribe to view method . Subscribed method will be called when new number is generated. JSON model is updated with new number received.

onInit: function() {
	this.oObsservable = new Rx.Subject();
	this.oSub = this.oObsservable.subscribe(this.onNextNo.bind(this));
},

onNextNo: function(nNextNo) {
	this.getView().getModel().setProperty( "/nLatestNo", nNextNo );
}, 

Create view element for button and input text element and link button event with controller method.

<Input xmlns="sap.m" value="Latest Generated No: {/nLatestNo}" valueLiveUpdate="true" editable="false"/>
<Button xmlns="sap.m" text="Generate New Number" press="onGenerateNewNo" />

Event handler method will generate new 4 digit random integer number and add the same to observable sequence.

onGenerateNewNo: function() {
	var nNextNo = Math.floor(Math.random() * 10000);
	this.oObsservable.next(nNextNo);
},

Finally, unsubscribe the observable when exiting from view.

onExit: function(){
	this.oSub.unsubscribe();	
},

Here is the view controller code for reference.

/* global Rx: true */
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"my/app/reactiveJS/libs/rx"
], function(Controller) {
	"use strict";
	return Controller.extend("my.app.reactiveJS.controller.View", {
		
		onInit: function() {
			this.oObsservable = new Rx.Subject();
			this.oSub = this.oObsservable.subscribe(this.onNextNo.bind(this));
		},
		
		onExit: function(){
			this.oSub.unsubscribe();	
		},
		
		onGenerateNewNo: function() {
			var nNextNo = Math.floor(Math.random() * 10000);
			this.oObsservable.next(nNextNo);
		},
		
		onNextNo: function(nNextNo) {
			this.getView().getModel().setProperty( "/nLatestNo", nNextNo );
		} 
	});
});

Hope this will help to implement reactive programming paradigm in UI5 application.

Thanks and regards,

Ripal Patel