Integrating TradingView in a Forex web application
Hi, I’m Antoine Domergue, a Software Engineer at Swissquote. I’ve joined Swissquote 2 years ago as the main frontend developer on the Forex team in our Software Engineering Department.
In this article, I will tell you about the project we released last March : how we rewrote our forex trading app from scratch using React, Redux and TradingView charts.
It was an exciting project with many technical challenges in terms of integration and frontend. I will highlight the main ones in the next chapters and give you some tips we came up with. Ready?
Before getting to the heart of the matter, let’s give you a bit of context…
Forex… what?
Forex means Foreign Exchange, it’s the world largest financial market.
If you have traveled outside your country of birth, you probably already have Forex trading experience! When you buy the currency of your destination country while paying with your own currency, that is Forex trading.
You want to know more? Go to: https://en.swissquote.com/forex/education/learning-center
Forex at Swissquote
Swissquote is the Swiss leader in online banking, and we offer many ways to trade Forex: with applications for desktops, mobiles, and web. Further details here: https://en.swissquote.com/forex/platforms
For the rest of this article I will focus on the Advanced Trader (AT) web, which is the project I’m working on since I arrived. https://en.swissquote.com/forex/platforms/advanced-trader
OMG they killed my flash!
The previous web app was put in place in 2012 with Flash technology and it was working. Maybe the interface was a bit outdated, but still… it worked!
The only problem, this app was built with Flash, which had its heyday for animation in browsers before HTML5 existed. In 2017, Adobe Systems (owner of Flash) dropped a bomb! They announced that they would cease support for Flash after January 12, 2021, as it had become obsolete, mostly because of HTML5, WebGL, or WebAssembly technology.
And when they said cease support, it’s not just not update it anymore, it’s blocking Flash content from running! So our current AT web app, used by THOUSAND of clients, would stop working after January 12, 2021!
As you can guess, everyone at Swissquote was really motivated to get this web app updated! 😉
Now that you understand the scope of this project, let’s finally talk about the challenges.
When starting anew, go for the the best!
Swissquote is already using React for most of his frontend, which is one of the most used frontend JavaScript libraries.
And we already have a well defined React stack, with TypeScript, Redux, and some awesome SQ open source tools like Crafty.
Thus, we had everything we needed to start. Everything? Almost, just one (pretty important) thing was missing. A great charting library.
It was quickly obvious that the best charting library currently on the market is TradingView, which is used by the best trading platforms in the world: Forex.com, Investing.com, Oanda, Binance and the list goes on.
Trading View offers 3 different API to add charts:
- Lightweight Charts, the most basic one, free and open source.
- Technical Analysis Charts, the most used one, free and closed source.
- Charting & Trading Platform (CTP), not free but the most complete one.
As we wanted to give the best experience to our clients, with trading from chart as well as display of open orders and positions on charts, we decided to use the Charting & Trading Platform (CTP).
But this came with some challenges!
Being the most complete lib, CTP is also the most complex in terms of integration. So we had to be smart and choose a good methodological approach to get an overview of what we’d have to face and conquer when integrating this app.
We love MVP!
To be sure that Trading View was a good choice for us, we wanted to quickly put it in production with an MVP (Minimum Viable Product). CTP provides 2 ways to integrate data:
- REST plug & play : The exact REST API needs to be implemented, the lib does the rest.
- Custom broker API : The JavaScript interfaces needs to be implemented by us, with a custom API.
We went with the simplest of both implementation, the REST one.
Implementing the REST API could be done with just one file on frontend.
The body only need to be:
And the magic happens with the tvWidget
container: matches the id of the only div create on the html file.
datafeed: This is the data needed for CTP to draw the charts.
As we have already existing AT app (desktop, mobile etc.), we already have an existing Quotes Server (quotes = data), the only problem is that it wasn’t compatible with TV REST requirements. For this MVP we didn’t wanted to touch our existing working Server, so we decided to implement a custom datafeed adapter on frontend.
So datafeed was defined as:
But some work needed to be dome for this custom datafeed. For example, if there is no data for an expected period of time, TV expects to receive a field “nextTime” with the most previous (yeah tricky) data available.
So I implemented a function getNextTime() to find this last value available. Something like:
restConfig: restUrl is the url of the REST API. We had to build this from scratch following these specs: https://www.tradingview.com/rest-api-spec/.
With this MVP REST API implementation, we managed to get an app like this one: https://trading-terminal.tradingview.com/rest.html, where almost all our UI is handled by TradingView: Charts, account manager (with positions, orders, notifications), watchlist, etc.
It was nice, it was working, but we wanted more, we wanted to add a lot more features to our app.
When you want more, start from scratch
To go further in customization, we had to use the Broker API. Only problem was: it was not possible to migrate from the REST implementation to this Broker API.
Using both at the same time and replacing step by step the REST API with the new Broker API: hmmm… not gonna happen.
To have the broker API, well, you have to implement everything.
Only, good thing, the datafeed stays the same 😉
The widget object viewed before also have an optional broker_factory parameter, but when used the restConfig parameter is ignored.
So our widget object was now:
Trading View provides an example repo for broker API, but there are 10+ files with some up to 30 functions, and each of them needed to be implemented or adapted to our needs.
As you can guest it was a huge challenge 😁 But with time, we did it.
Customize everything
We wanted our clients to have a full customization of their layouts, being able to resize panels, drag and drop and save them. We added GoldenLayout, which is layout manager with a lot of awesome features.
We also re-implemented our components for positions, orders, watchlist, etc. and we kept CTP only for the charts.
With all those changes, clients can fully customize their interface, deciding where they want to have each component.
You can wonder why in that case use the Trading terminal implementation instead of the free chart lib. Well because it was really important to have the functionalities to trade from the charts and to display open positions and orders.
Multi windows for the win
One of the features we wanted to have in our app was the ability to have popup windows. Because you know when you trade, you need to be able to see everything, and lot of our clients have multi screen.
Multi window on the web is not used much. Most of the time, when a website tries to open a new window, it’s a spam, so it’s even the opposite, most of the browsers try to block this usage!
After months of using GoldenLayout, we realized that it was not the best solution for us as it wasn’t really meant to be used with React and needed jQuery to work.
So we looked for alternatives, and we found FlexLayout, which filled all our requirements: open source, MIT License, made for React, resize, drag&drop, popup, etc.
As the logic is quite different from GoldenLayout, we had to review the whole logic of how to implement it.
Fun Fact:
By default, FlexLayout’s popout windows name is ….. popout.html
but we noticed that most of the ad blockers, well, are blocking windows with the “popout” name. So a change as simple as renaming it to ‘floating-window.html’ did the trick.
With great power comes…. some limitations!
TradingView is awesome for charts, but it also has some limitations. Unfortunately it’s not currently working with the popup feature of FlexLayout. We are currently in discussion with TradingView to check how can this be done. This is one limitation of using external lib, you cannot control everything.
Conclusion
Working these past 2 years at Swissquote for this Forex project was (ans still is!) really enjoyable.
Working on a new project is really exciting, it provides the opportunity to choose the best technologies currently available. That also means sometimes you will have to redo things, but that’s just more fun 😁 Redoing things is not a waste of time, it’s another opportunity to improve both your knowledge and the application. Trials and error is the base of any improvement process.
I’m proud of what we achieved so far, but we still have a lot of challenges awaiting us.
The Advanced Trader web app doesn’t yet have as many features as the desktop app, and we plan to implement them, which means, many new exciting challenges and new technologies ahead!
