Reactive Trader Cloud is a real-time FX trading platform demo showcasing reactive programming principles applied across the full application stack.

Building on the success of our first version of Reactive Trader, we decided to make improvements across the board. The UI has been revamped with a modern Javascript framework (React) and an event sourcing approach is used by the backend services for data resiliency.

 

HTML5 applications are generally run in a browser.  However, it is possible for such applications to run in containers other than traditional web browsers.

In this post, we’ll look into OpenFin, a secure HTML5 container providing native application look and feel, along with desktop integration. OpenFin allows operations usually restricted in a browser, having access to sandboxed system level features, and offers cross application communication thanks to its inter-application bus.

 

By running without a browser frame, OpenFin lets you customise the application shell to make it look like a native application, launchable directly from the user’s desktop.
With Reactive Trader Cloud, we have been looking at integrating some of its features, that we are presenting below. Links to the source code, and executables can be found at the end of this article.

general

 

  • Deployment

    OpenFin lets you deploy your application using a traditional Windows installer. Note the installation doesn’t require admin rights. The future version 6 of OpenFin, currently in alpha, is built on Electron and will let you run your application on any operation system (Windows, Mac and Linux).

  • Native look and feel

    Once you have installed your OpenFin application, you will find a shortcut on your desktop. Your application can run either in a native OS frame or frameless, which lets you create your own frame in html/css, enabling a custom look and feel.

    Below are different implementations.

    Example of window with custom frame

    tile

The main application window has a custom frame with controls to manipulate the window, while the spot tile has no frame.

If you look at the shell component of Reactive Trader Cloud, you can see it is wrapped into a frame element (or chrome). The actual implementation is provided at runtime, once we detect if the application is running in a browser or in OpenFin. The browser frame is a simple wrapper, while the OpenFin version provides an implementation of the header, with controls to manipulate the window.

  • Window management

OpenFin offers windows management capabilities. In Reactive Trader Cloud, various parts of the application can be torn out, by clicking on the tearout icon (cf. gif below).

 

tearout

When tearing out a spot tile, the blotter or the analytics panel, the content is moved to a new window. When closing a tearout window, the content is moved back to the main application. Windows can be reopened in their last position when restarting the app.

The code handling tear out can be found here.

  • Snap and dock

OpenFin lets you dock windows to each other. You can try this feature by opening multiple spot tiles, and dragging a tile close enough to another one.

 

snap

Please check the following code to see how it is implemented.

  • Desktop notifications

OpenFin offers desktop based notifications, which pop up at the bottom right corner of the user screen even when the application is minimised. In a normal browser, if the window is behind another one, or in a minimised state, a user wouldn’t see when background operations are complete, like an order match for example. With OpenFin, we can catch the user’s attention even when the app is not at the forefront. Notifications can display any content and let you interact with the main application. When clicking on a notification, we can decide to bring the main app to the forefront, or highlight the trade in the blotter etc.

notifications

The code to create a notification can be found here.

The code to render the notification is available here.

  • Cross application communication

OpenFin provides an inter-application bus, letting multiple applications to talk to each other, either in a request/response fashion, or in a broadcast way.

For demonstration purposes, we have built a simple WPF Trade Limit checker application (available here), which checks if a trade can be executed based on its notional. When making a trade, Reactive Trader Cloud first validates the request via the Trade Limit checker, and if successful, proceeds with the request. The Trade Limit checker provides a simple GUI, which lets you configure the maximum notional allowed per currency pair.

 

limit-checker

Both Reactive Trader Cloud and the Credit Limit application run on the user’s desktop. They interoperate in an asynchronous fashion using OpenFin’s inter-application bus, also running locally on the user’s machine.

Here is a diagram of the communication flow between Reactive Trader Cloud and the Credit Limit application.
Credit Limit flow diagram

The code to integrate with the Trade Limit checker can be found here.

OpenFin also lets you launch external applications, which you can interoperate with.

In Reactive Trader Cloud, clicking on the chart icon of a spot tile launches a demo version of a ChartIQ application, which shows a chart for that currency pair. Clicking the chart icon of a different spot tile will update the currency pair displayed on the chart, using the application bus to communicate with the external chart application (cf code here).

chartiq

  • Excel integration

OpenFin provides an Excel add-on which lets you integrate with Excel.

The spreadsheet we are using for this demo is available here.

It contains two tabs. The first tab lets you see your blotter directly from Excel, which updates in real time.

The second tab lets you interact with Reactive Trader Cloud from Excel, by letting you close a position for a currency, or currency pair, something which is not possible through the UI.

In the gif below, Reactive Trader Cloud pushes currency pair prices to the spreadsheet. When you close a position from Excel, your portfolio is updated back in Reactive Trader Cloud.

excel-integration

If you want to have a play with the OpenFin version, you can download an installer of Reactive Trader Cloud here (windows only).

 

Resources

OpenFin website: https://openfin.co

Reactive Trader Cloud & OpenFin interop applications

Reactive Trader Cloud OpenFin Windows Installer

Trade Limit Checker

OpenFin Excel Blotter and Positions

Reactive Trader Cloud

Website: https://web-demo.adaptivecluster.com

Github: https://github.com/AdaptiveConsulting/ReactiveTraderCloud

 

To run the front end using OpenFin, please check the documentation here.