{"id":52334,"date":"2017-05-23T09:57:14","date_gmt":"2017-05-23T14:57:14","guid":{"rendered":""},"modified":"2019-05-08T14:48:25","modified_gmt":"2019-05-08T19:48:25","slug":"tt-breaking-the-browser-tab","status":"publish","type":"post","link":"https:\/\/tradingtechnologies.com\/blog\/2017\/05\/23\/tt-breaking-the-browser-tab\/","title":{"rendered":"TT\u00ae: Breaking the Browser Tab"},"content":{"rendered":"<p style=\"font-size: 28px;line-height: 36px\">How Trading Technologies leveraged OpenFin and the web platform to build the most performant front end in the industry.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-52336 alignright\" src=\"https:\/\/tradingtechnologies.com\/wp-content\/uploads\/2017\/05\/NickKolba-186x300.jpg\" alt=\"Nick Kolba OpenFin\" width=\"150\" height=\"242\" srcset=\"https:\/\/tradingtechnologies.com\/wp-content\/uploads\/2017\/05\/NickKolba-186x300.jpg 186w, https:\/\/tradingtechnologies.com\/wp-content\/uploads\/2017\/05\/NickKolba.jpg 600w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><em>The following is a guest post authored by Nicholas Kolba, CTO at OpenFin. With 19+ years in software development, Nick has focused on bringing web and open source technologies into finance for a majority of his career\u2014much of it at Thomson Reuters working on the Eikon platform.<\/em><\/p>\n<p>OpenFin is the financial industry&#8217;s first common operating layer, enabling rapid and secure deployment, native experience and desktop interoperability. The world\u2019s largest banks and <a href=\"https:\/\/tradingtechnologies.com\/trading\/tt-platform\/\">trading platforms<\/a> use OpenFin to deploy desktop applications both in-house, and to their buy-side and sell-side customers. With Trading Technologies\u2019 new <a href=\"https:\/\/tradingtechnologies.com\/blog\/2017\/04\/24\/tt-desktop-a-powerful-new-reason-to-want-the-tt-platform\/\">TT Desktop<\/a>, TT adopted the OpenFin platform to deliver an HTML5-based trading application on par with the performance of their legacy C++ application.<\/p>\n<p>At OpenFin, we were blown away when we saw what TT has achieved with their new TT Desktop. The application, which scales to <a href=\"https:\/\/youtu.be\/WuYY8x8bCxk\" target=\"_blank\" rel=\"noopener noreferrer\">16 monitors of low-latency data presentation<\/a>, dispels all previously held industry conceptions about HTML5 performance.<\/p>\n<p><!--more-->There are many lessons to be gleaned from how TT engineered their application, but the key ones are:<\/p>\n<ul>\n<li>Use Canvas for low-latency updating and to leverage GPU processing.<\/li>\n<li>Use \u201cservice workers\u201d and \u201cshared web workers\u201d for multi-threading in JavaScript.<\/li>\n<li>Use OpenFin to bring this into a stable, multi-process web application capable of workspace persistence\u2014even across multiple monitors.<\/li>\n<\/ul>\n<p>Let\u2019s take a closer look at each of these.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"canvas\"><\/span>Canvas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Canvas brings two major advantages for scaling high performance, multi-screen applications:<\/p>\n<ol>\n<li><strong>Hardware acceleratio<\/strong>n: Canvas leverages GPU rendering\u2014whereas typical HTML and CSS are rendered using CPU.<\/li>\n<li><strong>Memory efficiency<\/strong>: Canvas uses significantly less memory than HTML since it doesn\u2019t use DOM (i.e., XML) to manage rendering and state.<\/li>\n<\/ol>\n<p>Both of these benefits are magnified as you scale up the number of screens you have in use.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"service-workers-web-workers-and-shared-workers\"><\/span>Service Workers, Web Workers and Shared Workers<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>These are powerful features of modern browsers. Service workers act as local proxies and can enable offline support, sharing of resources between multiple processes, pre-fetching, etc. Web workers allow the creation of additional JavaScript threads, allowing for heavy processing to not block rendering\u2014and vice versa. Shared workers allow a web worker to be shared across multiple renderer process.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"multi-process-apps-with-openfin\"><\/span>Multi-process Apps with OpenFin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you try to build a high-performance, multi-window application directly in a browser, you\u2019ll quickly find that you lack the <a href=\"https:\/\/tradingtechnologies.com\/trading\/apis\/\">APIs<\/a> to properly handle the control, positioning and persistence of windows. But even more critical than this, you will find that you lack the control over processes that is necessary for fine-tuning performance. In a commercial browser, multiple pop-up windows will share the same renderer process, ultimately bottlenecking UI events for the browser. With OpenFin\u2019s APIs, developers can control when new renderer processes are spawned, as well as where windows are positioned\u2014or even if windows are visible. The OpenFin runtime will also persist the window state and positioning of all the windows for an app, even on multi-screen displays.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"breaking-the-browser-tab\"><\/span>Breaking the Browser Tab<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>HTML5 and modern web technologies provide an incredible platform for developing apps that are great looking, highly performant and fast to build. When combined with OpenFin, developers now have the ultimate platform for high-performance financial applications.<\/p>\n<p>TT has broken the browser tab and created an application that can seamlessly scale across large numbers of screens without slowing down. We at OpenFin are all looking forward to more innovative work from TT as well as our continued collaboration.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How Trading Technologies leveraged OpenFin and the web platform to build the most performant front end in the industry. The following is a guest post authored by Nicholas Kolba, CTO at OpenFin. With 19+ years in software development, Nick has focused on bringing web and open source technologies into finance for a majority of his [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":52339,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[16],"class_list":["post-52334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-trade-execution"],"acf":[],"_links":{"self":[{"href":"https:\/\/tradingtechnologies.com\/wp-json\/wp\/v2\/posts\/52334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tradingtechnologies.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tradingtechnologies.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tradingtechnologies.com\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/tradingtechnologies.com\/wp-json\/wp\/v2\/comments?post=52334"}],"version-history":[{"count":0,"href":"https:\/\/tradingtechnologies.com\/wp-json\/wp\/v2\/posts\/52334\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tradingtechnologies.com\/wp-json\/wp\/v2\/media\/52339"}],"wp:attachment":[{"href":"https:\/\/tradingtechnologies.com\/wp-json\/wp\/v2\/media?parent=52334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tradingtechnologies.com\/wp-json\/wp\/v2\/categories?post=52334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tradingtechnologies.com\/wp-json\/wp\/v2\/tags?post=52334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}