GRADS: The Tech Stack of Sigmetic

Simon LHFollow
Founder & CEO, Sigmetic
May 29, 2020

What is the GRADS stack?

Sigmetic is built on the GRADS stack.
Never heard of it? I’m not surprised 😉

The GRADS stack was partially discovered and partially invented during the development of Sigmetic.
In this article, I will break down the GRADS stack, what it is, and how it’s used in Sigmetic.

Let’s start with the definition.
The GRADS stack is:

🔸 GraphQL
🔸 React
🔸 Amplify
🔸 Direflow
🔸 Serverless

Now that we got that settled, let’s dig into the details.

GraphQL

graphql banner

Sigmetic is using GraphQL for almost all client-server interactions. We do have a few REST endpoints in use, but it occupies less than 2% of all HTTP requests, counting both the platform and the widgets themselves.

Currently, GraphQL is used in the following two areas.

Interacting with the backend of Sigmetic

The backend of Sigmetic is built on a serverless architecture. That means, that it consists of a large set of small Lambda Functions that run on AWS.
The point of interaction is a GraphQL endpoint facilitated by AWS AppSync.

Interacting with GitHub

When requesting data from GitHub, we’re using GitHub API v4 which is based on GraphQL.
Sigmetic is using a custom made GitHub V4 Client that is fine-tuned to fetch all necessary GitHub data with as few requests as possible ⚡
In order to deliver real-time metrics without unnecessary network costs and rate-limit exhaustion, our GitHub V4 Client uses sophisticated query-generation and caching strategies to get the job done!

React

react banner

The entire UI of Sigmetic is built with React.

Currently, Sigmetic’s front-ends can be subdivided into 4 areas:

  • The webpage:
    Build with Gatsby - the core of Gatsby is React.
  • The platform:
    The platform is built with React using create-react-app.
  • The widgets:
    The widgets are built with Direflow (more on that below).
    Just as with Gatsby, the core of Direflow is driven by React.
  • UI Library: The UI Library is built with React and Direflow, and is used on both the webpage, the platform, and in the widgets.

Amplify

amplify banner

As mentioned earlier, the backend of Sigmetic is built on a serverless architecture and hosted on AWS.
The setup is orchestrated by Amplify.

The Amplify framework allows you to host a serverless infrastructure using the IaC principle.
That means, you configure the serverless backend using a combination of Amplify’s CLI tool and configuration files in .yml format.

Amplify takes care of provisioning all necessary cloud modules needed for your backend to function.
For instance, it takes care of persisting data using DynamoDB and handling user authentication using AWS Cognito.
Finally, it facilitates the client-server communication with a GraphQL endpoint using AppSync.

Sigmetic uses a combination of AppSync and custom GraphQL resolvers and endpoints.
However, Sigmetic is heavily relying on AppSync as the main communication layer between the platform and the backend.

Direflow

direflow banner

One of the key features of Sigmetic is the ability to embed our KPI Widgets directly on your own webpage.
Typically, embedding Micro Front-Ends involves tedious configuration and reliance on iframes.
It typically comes with a lot of issues regarding styling, CORS, and messy code snippets that just don’t “fit in” with the rest of your webpage / application.

At Sigmetic, we’re obsessed with making this process smooth as never before.
That is why we use the power of Direflow and Web Components.

Direflow allows us to write rich, complex and highly performant Micro Front-Ends using React while utilizing the standard of native Web Components.

Web Components is a browser standard, just like iframes, but with way more flexibility and way less trouble.

Sigmetic heavily relies on Direflow as one of our key elements.

Serverless

serverless banner

Last, but not least, Sigmetic is using The Serverless Application.
As mentioned, Sigmetic is built on a serverless architecture, which includes a large set of small Lambda Functions.

Using The Serverless Application, we can manage, develop, and deploy the entire infrastructure of cloud functions easily and continuously.
The Serverless Application is also based on the IaC principle, which makes it perfectly compliant with the rest of the backend pipeline.

For Sigmetic, The Serverless Application has made a world of difference, especially when it comes to maintaining GraphQL resolvers and handling Stripe integration.

See our blog post on how we integrated with Stripe.

One of the key benefits of The Serverless Application has been serverless-offline which allows you to emulate AWS Lamda and the API Gateway layer in a local environment while developing.


That’s it! 🤘
A short walk-through of how the GRADS stack works, and how we used it while building Sigmetic.

Simon LH, Founder & CEO

Sigmetic © 2020
Follow Sigmetic on