Latest Ext JS 7.8 is now available. Learn more

Ext Speeder Case Study: Portfolio IQ

January 17, 2017 150 Views
Show

Guest Blog Post

Professional traders can manage portfolios with thousands (or tens of thousands) of individual financial instruments. As time goes by, the underlying databases of portfolio holdings, order history, and pricing data can easily accumulate millions of rows.

Using this data, traders and investment professionals need to make fast, well-educated decisions across a large number of dimensions. Managing a complex portfolio or fund requires real-time analysis to spot trends, assess market exposure, and discover opportunities for profit.

Ext Speeder is a tool that helps make Sencha Ext JS data grid queries blazingly fast. The tool can pull in huge amounts of data in-memory and then make that data available for fast access and analysis. This solution works for all web applications. Today, we’ll demonstrate the efficiency with a trading application.

By leveraging in-memory technology, the execution speed can be increased by a factor of 10 or more compared to conventional database solutions. Ext Speeder works out of the box with client Ext JS applications, and it was developed with input from Sencha, the provider of Ext JS.

Ext Speeder automatically generates a REST API by analyzing the metadata in the relational database, drastically reducing the time to develop a back end. With Ext Speeder, you can add interactive basic Business Intelligence (BI) to web applications with little effort. Ext Speeder easily aggregates millions of rows in sub-seconds on the server side and then sends the resulting reduced aggregated data in a standard format to the browser.

Upcoming Webinar

Turbocharge Data-Intensive Ext JS App Performance
January 25, 2017
10:00am San Francisco PST | 1:00pm New York EST | 6:00pm London GMT

Register Now

Key Features

The key features of Ext Speeder include:

  • Automatic API and code generation from an existing database
  • Seamless integration with Ext JS components such as grids and tree maps
  • In-memory technology with execution speed increases of 10x
  • Integration with charts via Ext JS Charts or D3 for data visualization
  • Standalone deployment or deployment in standard enterprise application servers, including Oracle WebLogic, JBoss, and Tomcat
  • Support for Ext JS 4, 5, and 6

Portfolio IQ by Extremely Heavy Industries

Extremely Heavy Industries develops Ext JS applications for financial clients. ExHI has worked with Sencha frameworks since Ext JS 3, and its specialty is building data-dense dashboards, customized trading and research systems, and advanced data visualizations for both desktop and mobile web browsers.

ExHI developed Portfolio IQ in collaboration with the Speedment team to showcase the performance and capabilities of Ext Speeder when combined with a rich dataset, development best practices, and the latest Sencha frameworks and components. The resulting demo offers fast access to millions of rows of performance and pricing data for a set of simulated trading strategies, with options to segment and drill into data across multiple dimensions.

Portfolio IQ Demo Dashboard

Portfolio IQ demo dashboard with portfolio performance, order book, and instrument pricing

Ext Speeder + the Ext JS Tree, D3, and Charting Packages

By generating a well-structured and fast API that’s built to be compatible with Ext JS data stores, Ext Speeder can power not only buffered “infinite” grids, but also store-based components built with the Ext JS charting and new D3 visualization packages.

Portfolio IQ’s main dashboard features an Ext.tree.Panel linked to Ext.d3.HeatMap components to display and visualize multi-level positions across trading units, offices, sectors, and instruments. Extensions to the Ext Speeder API allow on-the-fly aggregations to populate an Ext.data.TreeStore that backs both the Grid and D3 heatmap.

The top tree grid/map components publish their selection to a bottom detail panel showing the performance and order history of the selected “slice” of the overall portfolio, as well as OHLC pricing data for any selected instrument. All components are backed by Ext.data.Stores loading data from Ext Speeder endpoints. They update immediately when an aggregate position is selected – whether it represents a handful of orders in a single stock, or a huge number of trades in an entire industry across multiple years.

Portfolio IQ with Interactive Charts

Portfolio IQ with Interactive Charts

PIQ plots several years of performance history and pricing with interactive charts

Portfolio IQ’s “playback” view demonstrates the server’s ability to handle rapid requests for data with an animated view of performance over time. Here the client application calls the same aggregation-enabled Ext Speeder API on a timer to stream in month-by-month snapshots of portfolio exposure, performance, and trading activity. The results are plotted by a multi-dimensional bubble chart, a combination area / line chart showing cumulative P&L and order count, and a D3 sunburst visualization of order execution statistics.

Portfolio IQ’s “Playback” View

Portfolio IQ’s “Playback” view animates portfolio performance and execution statistics over time

Mobile Client with Ext JS Modern Toolkit

For phone and mobile users, Portfolio IQ loads an optimized mobile version of its client written with the Ext JS Modern toolkit. The mobile client integrates the same Ext Speeder API and Ext JS unified data package with Modern Grids (extended in PIQ with the paging plugin and customized mobile grid view options).

While the data views and the level of interactivity are constrained relative to the full desktop client, a properly designed mobile client can still provide access to both high-level aggregate data and highly-detailed individual records.

Portfolio IQ Mobile Version

Portfolio IQ Mobile Version

Portfolio IQ Mobile Version

Custom Features and Project Support

Ext Speeder can be extended, and Speedment can provide custom features and functionality that are built on top of Ext Speeder. Examples of custom code include:

  • Additional database connectors
  • Handling data from several different databases
  • Support for CRUD operations
  • Scale-out over multiple nodes
  • Reactive Web Sockets
  • Aggregating operators

Learn More

Here are some additional resources to help you learn about Ext Speeder: