Building IEX Cloud’s First Widget

Carmine Lengua, Jr. (Cj) and Dillon Mcroberts Dillon Mcroberts

March 31, 2022

Build

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.

Symbol

Company Name

0.00USD

+0.00%
+0.00

03/29/23, 05:03 PM GMT+8

Data from

IEX Cloud

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!

The widget configuration tool inside the IEX Cloud Console.
We’ve built a WYSIWYG widget configuration experience directly into the IEX Cloud Console. Users can input just a handful of configurations, and pull down code to embed directly on their website.

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!

About the author

Carmine Lengua, Jr. (Cj) and Dillon Mcroberts Dillon Mcroberts

Giant Machines Team

SHARE VIA

Stay in the loop

Keep up to date with our newest products and all the latest
in technology and design.
Keep up to date with our newest products
and all the latest
in technology and design.

Other blog posts

Building With ChatGPT & LLMs: Two Common Pitfalls & One Way To Win

What does it mean for your organization? Should AI materially change your headcount projections? Could AI help your team work more effectively and efficiently? Most importantly, is the AI good enough? Should you trust it?

That’s what Giant Machines aimed to figure out when we launched our own AI/ML project in early 2023.

The Opportunity Gap and its $160 Billion Impact

At Giant Machines, we believe making tech that matters includes creating opportunities, cultivating talent, and making spaces for everyone.

Improve Your Debugging Approach for Better Software Applications (& Sounder Sleep 😴)

In the process of developing applications, bugs will inevitably be introduced (“I code, therefore I create bugs” ~ Descartes, probably). Bugs can be introduced for a variety of reasons, such as logical errors, misunderstanding of requirements, lack of tests, tight deadlines, or something as simple as having an off day as a fallible human. However, knowing that bugs are inevitable, we can arm ourselves with tools to quickly identify and address software bugs before they are released in the wild.

Company

Learn more about us here at Giant Machines and how you can work with us.

What we do

We leverage best-in-class talent to create leading edge digital solutions.
services

Innovate

Know your next move

Build

Develop beautiful products

Learn

Enrich your tech knowledge

Our work

Learn more about our partnerships and collaborations.

Our perspective

Stay up to date with the latest in technology and design.

SUBSCRIBE