The Crypto Ticker

Developed by: Ryan Rouleau

Overview

After developing a few python applications to track my trades, market conditions, and performance of various small trading algorithms for the cryptocurrency exchanges Poloniex and GDAX, I became interested in creating a project that utilizes one of their websocket APIs.

I decided to utilize Poloniex’s API for this project. Poloniex lists dozens of cryptocurrencies on their exchange while GDAX lists only ~3. In considering both options, I decided Poloniex will offer a more challenging and interesting project due to hvaing the ability to play with many more currencies.

Development

I first determined the features I wanted to implement in The Crypto Ticker such as being able to see live updates of market conditions and having them update with animations to engage the user, and the ability to add any currency currently listed on the exchange.

From there I developed an overall design of the code which had three distinct parts: engine.js containing the websocket and UI interaction code, msjRouter.js to route the incoming websckcet messages and to keep track of all the currencies being shown to the user, and currencyPairObj.js corresponding to each card on the page with methods for updating the respective DOM elements for a currency statistic update.

After I felt comfortable with the structure and how things worked on a higher level, I dove in and started writing the code from outward in (engine.js to currencyPair.js).

This project does use jQuery but only for non-performance essential tasks. For example, it's used for a couple AJAX requests to grab initial market conditions and handling UI interactions.

One unexpected technical challenge I faced in this project was the restarting and starting CSS animations on command with javascript. I thought I would be able to simply remove and add back the animation class, but upon further thought and experimentation, I realized this method would not force a reflow and as such, the browser would not ‘realize’ there is CSS to be updated.

A simple solution to this would be to use javascript animations, but let’s be honest, we’re living in 2016 where CSS is higher performance and is often superior for DOM style manipulation. The best (fastest and most bug free solution) was to clone the respective node to be animated, deleting the ‘old’ node, deleting all possible animation classes of the clone, then adding the animation we want triggered, and adding the clone back to the DOM. This has a performance hit versus other solutions (such as creating a small timeout between removing and adding the classes or requesting .offsetHeight), but it works 100% of the time where other solutions would trigger the animation correctly only about 75% of the time.

Design

While I am a computer science student and I do love code and algorithms, I am also very passionate about beautiful, unique, and appropriate user experiences. As a result of this passion, I enjoy spending a good amount of time in my projects developing a design that follows modern guidelines, is responsive, and works well with the respective functionality.

The Crypto Ticker gets its main inspiration from Google’s Material Design (I shamelessly took Google’s box shadow from their Material Design Lite CSS framework. It's just so good.) while making it unique by implementing aspects such as rounded corners, white borders, and fun animations.

Contribute

I love learning how to improve my code and skills!

Please take a look at the source code to this project at github.com/ryanrouleau/Cryptocurrency-Websocket-Trade-Ticker and add issues or ideas for features, modify it, make some pull requests, etc.

Feel free to take a look at some of my other projects at github.com/ryanrouleau or on my website RyanRouleau.com!