SingleDealerPlatforms.Org

Last week a client asked for a quick demonstration of building deal entry tickets in web trading applications – they have just started building equities DMA into their Single Dealer Platform and had some specific requirements that warranted a bespoke trading workflow and a custom deal entry ticket.

As the client had a requirement to use only native web technology (no Flash, Silverlight or Java) I used Caplin Trader Presenter to build a prototype deal entry ticket. Presenter is a UI framework for rapidly developing web applications; it is particularly well-suited for building trading components as it binds to, and contains adaptors for, complex trading workflows. Doing the same in HTML/JavaScript can be slow and tough to achieve in a performant and low latency manner.

One of the most useful parts of Presenter is an MVVM framework which binds a view onto a view model, facilitating output value formatting and input parsing. Element binding is specified within the mark-up on a per-element basis, which ensures the view updates whenever the view model changes, and vice-versa. It’s similar to WPF binding where XAML binds onto C# object properties except Presenter uses native web technologies of HTML and JavaScript.

My prototype deal entry ticket consisted of three layers:

1. An HTML view; defining the ticket layout.
2. A view model; populating the view with values and defining the view logic.
3. A trade model; some business objects and a state-machine of trade events.

The ticket’s view was constructed from Caplin Trader UI library components and standard HTML. I also used some components from third party UI libraries (Sencha [Ext-JS] and JQuery) as these are easily incorporated. I added a few drop-down boxes for selecting order types and fill types, and input boxes for the user to type the order price and defining the trade quantity.

The ticket’s view model is a simple JavaScript class defining variables for each UI element. Once a variable was in place for each UI element, I went back to the view mark-up and bound each UI element to each view model property.

A business object representing the order was quickly drafted to define every property of the order, such as price, instrument name, expiry, fill type and quantity. This was implemented as a plain old JavaScript object.

Finally the ‘submit’ button was bound to a method in the view model to create and populate the order business object. The Caplin Trader trading library was used to translate the business object into a Trade Event, and stream it across the web awaiting push notifications.

The ticket took less an afternoon to build and within the day server integration was also completed, so that an order submitted from the web trading app was inserted into an order management system via an in-house API.

Filed under: Problem Solved, Single-Dealer Platforms |