Tutorial

GoodData.UI in non-React environment

GoodData.UI in non-React environment
Userlevel 3

Introduction

Question: Is it possible to use GoodData.UI in an environment other than React?
Short answer: Yes!
Long answer: Keep reading 👇

React components

React is not your typical MVC (Model, View, Controller) framework. React is only concerned with state management and rendering that state to DOM, so it's basically just the V part (View) from the MVC family. That said, React shouldn't clash with any other frontend frameworks (Angular, Vue, Backbone, …).

To make the React components from GoodData.UI work in a non-React environment, some sort of wrapper is needed. For example, such wrapper for Angular is described in GoodData.UI documentation at https://sdk.gooddata.com/gooddata-ui/docs/ht_use_react_component_in_angular_2.x.html.

For more advanced use-cases that rely on React Hooks a developer needs to Access the state of the Dashboard component from outside the component.

Note: Applying custom styles using the <​​ThemeProvider /> component is currently not possible outside the React environment.

End-to-end execution

It is also possible to avoid React completely. There's a @gooddata/sdk-backend-spi package that specifies an interface and has several implementations, such as @gooddata/sdk-backend-bear for the hosted GoodData Platform, and @gooddata/sdk-backend-tiger for GoodData Cloud and GoodData.CN.  These packages do not import React at all — in fact, none of the packages that don’t have *-ui in their name import React — but they expose methods and helpers to communicate with GoodData’s API endpoints directly using Promises in JavaScript. With any of the sdk-backend-spi implementations you can authenticate a user, get the list of available insights, get the catalog of metrics and attributes, or even get the raw execution results of any insight.

The downside of this approach is that developers lose the added benefits of GoodData.UI React components such handling loading states, handling error states, pagination, etc. The biggest pro of this approach is that no other framework is needed.

You can read more about @gooddata/sdk-backend-spi in Building backend-agnostic applications and Architecture overview.

Summary

It is possible to use GoodData.UI React components outside the React environment using a wrapper as described here. It is also possible to avoid React completely by directly utilizing the @gooddata/sdk-backend-bear (or @gooddata/sdk-backend-tiger) package and hitting the API endpoints directly using JavaScript Promises.


0 replies

Be the first to reply!

Reply