GRADS: The Tech Stack of Sigmetic
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:
Now that we got that settled, let’s dig into the details.
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!
The entire UI of Sigmetic is built with React.
Currently, Sigmetic’s front-ends can be subdivided into 4 areas:
Build with Gatsby - the core of Gatsby is React.
The platform is built with React using create-react-app.
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.
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
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.
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.
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.
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, Creator