If you’ve made it this far, you probably already know that Giant Machines partners with clients in a variety of industries to design & develop one-of-a-kind, breakthrough software—anything from multi-user type, multi-device eCommerce platforms to real-time trading systems for the financial industry, and so much in between. These are highly customized, completely bespoke platforms built from the ground up.
As of today, we also build smaller, snackable products, like our first-ever widget for displaying stock quotes for US listed equities, embeddable on public websites.
Here’s the story of how this widget came to be.
IEX Cloud is a financial data delivery platform that offers a flexible, accessible model for connecting developers with curated financial data and provides a high-performance API and custom-built services. In 2019, Giant Machines and IEX Cloud met to discuss distribution strategies for IEX Cloud data—specifically, how a user-friendly “widget” could help get their high quality data into more people’s hands.
“At the time, we were less than a year into IEX Cloud and had already seen uptake in more than 100 countries,” said Jessica Murray, Operations and Strategic Partnerships at IEX Cloud. “We wanted to explore ways to make it even easier for users to deploy our data, and we thought working with a group such as Giant Machines to build a widget would provide a great tool to help accomplish this goal.”
With a fair bit of experience working with their data under our belt already, and access to IEX Cloud’s expertise concerning user preferences and needs, Giant Machines geared up to explore potential expressions of this idea.
Our product & design team conducted market and competitive research, and alongside our engineers, explored the data available. We also referenced IEX Cloud’s thoroughly documented API. We prepared a few different design options and collaborated with the IEX Cloud team to decide the best path forward. Since this would be the first widget for IEX Cloud, we identified a fairly straightforward first candidate widget: Streaming US equity prices.
Then our engineers got to work.
Here’s the widget in action! If you’re reading this during market hours, you can see it tick live—but the data is slightly modified as this is a test endpoint.
At Giant Machines, we constantly have an eye on roadmap risks and actively seek to address them head on, as quickly and efficiently as possible. “We kept identifying potential roadblocks, but nothing materialized into real problems,” reflected Dillon McRoberts, Senior Software Engineer at Giant Machines. “It wasn’t just that the APIs are so well documented and high functioning. Our contacts at IEX Cloud were there to answer our questions and provide support as we needed it, and we’re all really pleased with the result.”
Do you use IEX Cloud data already in your organization? Are you an Investor Relations professional looking for a clean, modern way to display pricing on your site? Or perhaps you’re a finance blogger and need a way to bring your stories to life? Sign up for IEX Cloud and fire up a widget today!
And if you want to learn about some of the approaches we used to build the widget, read on!
Building a universally embeddable widget posed a handful of interesting technical challenges. A few of the issues Giant Machines anticipated were obviated by the logical and well-considered design of the IEX Cloud API. For example, we had early conversations around API polling and the difficulties that might arise from this approach. At IEX Cloud’s suggestion, we explored using one of their server-sent event (SSE) endpoints. This SSE endpoint broadcasts new messages each time a given stock’s price updates, and ensures widget data will stay up to date without any need for messy polling mechanisms.
Cross-origin resource sharing (CORS) is a security mechanism that requires client-side code (in this case, our widget) and server-side code (IEX Cloud API) to work together. In short, a server at one origin has to give special access to a client making a request from a different origin. Since our intention was to embed the widget anywhere, it would be extremely difficult for IEX Cloud’s API to safely give access to each origin where a widget might be embedded. Initially, Giant Machines worried that we might run into CORS errors when embedding the widget.
Fortunately, this is another issue where the IEX Cloud API design was a step ahead. By using a response format called JSONP, the API ensures that any client making requests from anywhere would be able to skirt CORS restrictions. The one catch to this approach is that JSONP responses only work with HTTP GET methods, which are used to read information from APIs. Other HTTP methods, which are generally used to add or update data on an API, are not able to use JSONP. But for our read-only widget use case, this was perfect.
Another concern was that we expected CSS styles from the parent page to override widget styles and potentially cause issues with the widget display. A few approaches were discussed to minimize the effect of parent styles on the widget, and ultimately Styled Components was chosen. Under the hood, Styled Components generates a unique class name for each DOM element, which makes it highly unlikely that parent style selectors would influence widget content classes.
By including a simple configuration form and a copy-paste script snippet, we were able to ensure that embedding the widget would be simple and easy for users with any level of tech knowledge. We also built in a live preview widget so users won’t have to repeatedly embed the widget in order to see their most configuration updates.
Sign up for IEX Cloud and fire up a widget of your own. And if you’ve got an idea for your own great piece of software, contact Giant Machines today!
