May 9, 2024

Building A Dynamic Dashboard with gluestack-ui and esm.sh

In this tutorial, we take a look into how gluestack-ui and esm.sh help simplify the process of creating dynamic and functional dashboards.

Dashboard

Technology

App Development

Gluestack-ui

Author

Deepak AgarwalTech Lead - II

Building A Dynamic Dashboard with gluestack-ui and esm.sh

Book a call

Table of Contents

Creating dynamic dashboards that are both functional and visually appealing is a common challenge. Leveraging tools like gluestack-ui and esm.sh can significantly streamline this process, offering a powerful combination of UI components and efficient module loading.

Throughout this tutorial, we cover essential steps, from project setup to widget rendering, demonstrating how these tools can work in tandem to enhance the development process.

What is gluestack-ui?

gluestack-ui is a universal UI library that provides optionally styled and accessible components. It is designed to be easy to use and integrate into existing projects, and it provides a consistent design language across different platforms. gluestack-ui is not a direct replacement for React Native Web, but it builds upon its components to provide additional features and performance improvements.

What is esm.sh?

esm.sh is a fast, smart, and global CDN for modern (ES2015+) web development. It supports bare import specifiers, trailing slashes in import URLs, and a special format for import URLs that allows the use of query parameters with trailing slashes. It also provides a CLI script for managing imports with import maps in Deno and Node/Bun.

The application will have a widget list from where you can drag and drop widgets in the canvas and it will use esm.sh to build on the browser and render the widget.

In this tutorial, we will cover the following:

Setting up the project
Creating the UI
Adding esm.sh
Dynamic import of modules
Rendering the module

Setting Up the Project

To create a new project, run the following command:

The app with gluestack-ui is created.

Creating the UI

We create a basic UI with the widget list consisting of the list of widget and a drop area where the widgets are dropped. We will create a widget render component that will render the widget once it is dropped.

The ESM Code

Create a widget.js file on the public folder and include the following code:

The following code is used to render the widget once it is dropped:

Summing Up

Building a dynamic dashboard using gluestack-ui and esm.sh represents a modern approach to web development, emphasizing efficiency and flexibility. By harnessing the capabilities of gluestack-ui's intuitive UI components and esm.sh's dynamic module loading, developers can create interactive dashboards that adapt to evolving requirements.

SHARE ON