Build custom internal tools with JavaScript and Superblocks

Superblocks is a programmable IDE for developers to build any internal App, Workflow, or Scheduled Job at a fraction of the time and cost. In our last post, we looked at Superblocks’ Python support. In this post we look at how JavaScript can be used in both backend APIs, as well as in frontend application code. While many JavaScript libraries are included by default, the Superblocks Agent allows developers to extend functionality by importing any packages that are required.

Backend and Frontend JavaScript

Superblocks supports writing code to query and transform your data on the backend, as well as conditionally format data and components displayed on the frontend. 

‍

For backend Application APIs, Workflows, and Scheduled Jobs, you can incorporate custom business logic with programming languages like Python and JavaScript (Node.js), or SQL for interacting with relational databases.

‍

JavaScript (Node.js) can be used on the backend to write business logic within API steps, Workflows, and Scheduled Jobs:

• Transform the output of previous REST, GraphQL, or SQL steps
• Write business logic referencing the User Interface Components
• Make HTTP calls via axios

For frontend Application UIs, write browser based JavaScript functions to change the state of components based on any condition.

‍

Browser based JavaScript can be written on the frontend directly inside Application UI components:

• Disable/enable a button based on data entered into a form
• Customize a grid's layout with a switch statement
• Conditionally format color of table cells

Building Backend APIs

Superblocks APIs are the business logic layer of your application, built on top of your data sources. These backend APIs run server side (on Superblocks servers if you're using the cloud version or on your own infrastructure if you're using the On-Premise Agent), and send a response back to your components in the frontend user interface. This separation of the application into a frontend and backend is a core concept when working with APIs. For example, a backend API cannot update a frontend component's state directly. Instead, the component reacts to the response from the API.

‍

For example, backend JavaScript (Node.js) can be written in Application APIs, Workflows, or Scheduled Jobs to transform the output of previous steps. Here we have a user_orders API that terminates in a mergeData JavaScript step that appends shipping status to each order. It returns the list of orders as well as the email of the associated user.

We can then visualize the transformed data in UI components by setting the relevant component property to the API response. For example, within a Table.

Frontend code with RunJS

Frontend Javascript provides direct access to component level state and allows for insertion of dynamic data into your components and control of the UI via code. This is enhanced with State Variables, which allow users to create Temporary and Local Storage variables for Superblocks Applications. The Local Storage variant makes use of the browser’s Storage interface to write data to and read data from the client.

‍

Variables can be used by developers to store local state in their applications for use-cases such as caching and re-use of intermediate state across different APIs/Components.

‍

A simple example is to add some color to applications by customizing the color of text based on its content.

Importing JavaScript Libraries

Superblocks supports common JavaScript and Python libraries in backend APIs. The most popular JavaScript libraries include aws-sdk, Base64url, Lodash, and Moment, while the popular Python libraries are Numpy, Pandas, Boto3, and Matplotlib. By running the Agent, you can also install your own custom libraries from public and private package registries or by using an install script. These are easily added and updated by creating a custom Docker image for the Superblocks agent. The Agent can be run locally for rapid development and via a number of supported deployment methods for running in production. 

‍

The Danfo.js library is heavily inspired by the Pandas library and provides a similar interface and API. This means users familiar with the Pandas API can easily use Danfo.js. Importing this library into Superblocks is a great way to manipulate data exposed via database integrations to present back to an application.

Sharing Applications and Workflows with RBAC and SSO

Applications and Workflows can be shared quickly and easily with individuals or groups via the Share modal for granular role-based access control. Superblocks will take care of all of the headaches of authentication and authorization for you. Combined with native integration into your SSO provider, this will ensure that all data and applications are available to only those who need it.

Audit logging and Observability

Search the logs of every user action in your internal Applications, Workflows, and Scheduled Jobs execution history. Use Audit Logs to quickly identify errors as well as who is running queries against your data. It's a great tool for troubleshooting any API errors, especially for scheduled jobs/workflows that run during off-hours. Backend JavaScript logs can also be shipped to observability providers such as Datadog and AWS OpenSearch, providing the ability for further monitoring and alerting.

Try out the extensibility of Superblocks with JavaScript

Superblocks has helped thousands of developers save 1000s of hours of time both in building and in using internal applications.

‍

To learn more about how to create internal applications, jobs, and workflows with Superblocks view our documentation. Try creating your first application today with a free 14-day trial​​.