Welcome to Motor JS. The React Framework for Qlik Sense Mashups.
We’ve built this library to provide an easy solution for building Qlik Sense Mashups in React. More than a series of components and charts, Motor JS is a complete framework for building mashups with ease.
The library enables easy connection to a Qlik engine, a theming framework which propagates throughout your dashboard, interactive charts, components such as a Filter and Search and re-usable React hooks for the easy creation of data sets off the engine.
In this post, I will write a bit about the architecture and technology choices we’ve made whilst building this library.
React
The library is built in React and supports Typescript out of the box. There is currently no support for other frameworks such as Angular or Vue. React was an obvious choice for us given its popularity and our team’s skillset.
It has also enabled us to make us of some great React features, which are fundamental to how the library works.
React Hooks
Building your own Hooks lets you extract component logic into reusable functions.
React hooks are great for sharing logic between Java Script functions, which is perfect for our use cases where a lot of our components require the same logic for loading data from the Qlik engine. We’ve created re-usable hooks for this, which you can also load directly from the library.
For example, you can check out how to use our useHyperCube hook here.
Context API
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
We heavily leverage React’s Context API for data which is needed across your entire dashboard. We use this for both connection to the Qlik engine and theming.
Our components use the context from our top level Motor component so will access your Qlik site regardless of where they are in your component hierarchy.
Similarly with our theming framework. Set your brand colors and component customisations in our Motor component and this will impact all of your components This is architected using CSS in JS, which I’ll cover next.
CSS in JS with Styled Components
Motor js uses a CSS in JS approach to styling and theming using Styled Components. CSS can be quite a polarising topic for front end developers, so I’ll outline the reasons for this choice below:
- Theming. Styled Components’ ThemeContext enables us to maintain a single theme object, accessible by any of our components. This creates a complete reusable design system which can be easily customised by merging changes with our base theme.
In the below example we are editing our base theme by changing the brand color to blue. This new property will be merged with our base theme, resulting in a smooth user experience for customisations. As a result of the below change, all components using the brand color will be updated to blue.
import { Motor } from '@motor-js/core';const myTheme = {
global: {
colors: {
brand: 'blue',
},
},
};<Motor theme={myTheme}>
//...
</Motor>
- Consistency & Customisation. Tightly integrating our CSS with JS enables our components to be both consistent and customisable. We can be sure our components always look & behave as it did locally due to zero chance of clashing selectors. They are also easily customisable through props or by extending styles.
Enigma JS
In order to build a Qlik Sense Mashup library, you need to connect to a Qlik Engine. The obvious choice for this is Enigma JS.
enigma.js is a library that helps you communicate with Qlik QIX Engine. Examples of use may be building your own browser-based analytics tools, back-end services, or command-line scripts.
The Enigma JS library helps you to communicate with the Qlik Associative Engine and is used by Motor JS across all of our components which access the Qlik engine.
Note, that currently the library does not load the Capability APIs. This is being considered via a new Context component but not available in the beta release.
I hope you learnt a bit more about Motor JS, it’s use cases and architecture.
Feel free to ask any questions in the comments!
