Internal Back End with React Admin

Trying React Admin framework for an internal product proved to be a shot in the arm, let me explain why.

In many back-end projects, results or intermediate data processing steps are not visible directly to the client. Using tools that give oversight, access to raw data, processing results and statuses is essential. This article explores the cost, along with the pros and cons of maintaining internal services with front end written using React Admin and Material UI.

In our case, data are collected continuously from various sources, then transformed in multiple ways, combined or aggregated with other data. At the very end, some of the data are exposed to a separate database and Business Intelligence software or APIs, while others, primarily raw and intermediate, are patiently waiting for their subsequent use or debugging purposes. Additionally, monitoring and notifications have been attached to the data for our internal goals, as well as those of the client. While BI & notifications contain results of calculations, it is essential to understand how they have been produced for the back-end team and data scientists working with them on the product side.

One of the detailed resource views in our React Admin dashboard.

Some time ago, we were again faced with the decision to select the best option for our project. Trying a new framework — React Admin — proved to be a shot in the arm. According to the team, the degree of insight we now have is incomparably better than when we used to use other solutions, and the maintenance cost is virtually identical.

The Classical Approach

The easiest way to provide insight into back-end projects is through scripts and direct database access. However, this approach has a set of limitations, such as the need for manual execution of scripts and limited visualization capabilities. Scripts require a properly configured environment to run locally or in the cloud, depending on the project. There is a risk of confusing environments, it is challenging to share results, and ad-hoc queries can take a long time to process. Ensuring flexibility and general maintenance requires a lot of work in most cases. Additionally, scripts are some of the less eye-catching ways to present back-end team progress during presentations to business people.

There are several analytics & dashboard tools on the market that promise insight into data at a glance. These solutions often need more flexibility, are designed for larger-scale projects, and may not be well-suited for internal use. One of the challenges is justifying the cost of these tools to businesses, as the visibility and impact of internal projects are limited. Additionally, they still require some configuration, and there is a risk that they will not answer all the questions.

The Internal Front End

The internal front end is widely seen in many teams, and its maintenance cost depends on its complexity. Often, it is maintained by individuals not directly involved in front-end development in the company, namely back-end developers. It typically involves the presentation of data in tables and the display of individual records and their relationships. Less frequently, they require additional components, such as maps or charts.

Overall, we should agree that the internal front end has several characteristics:

• It provides up-to-date information from internal sources and some useful aggregates that may be calculated on the fly. The level of insight depends on the project’s needs, and it should be as complete as possible to make life easier without fancy, rarely used elements. The cost of maintaining the front end should be recouped for the benefits it brings.
• It is meant to be used by product developers to check the state of the data and quickly discuss it with other personas. An internal back end is often used for presentations during meetings and demos, as it is more convenient when talking about the back end. It should be fast and efficient, use minimal resources, and be suitable for a small number of users.
• It may replace actions regularly performed by team members, either directly on data or via APIs. Still, it should leave the product in a consistent state, preferably by passing commands to the ““”real” product. This kind of capability might require access protection or extended logging.

When discussing an internal product, making it visually stunning, fully responsive, or cross-browser tested might be a low priority. However, the way the user interface looks can still have a significant impact on the user experience. It is always a plus if a newly developed internal tool does not feel stuck in the 2000s. In general, making the UI look modern is a challenge for developers who are not experts in front-end development, especially when dealing with dynamic components like tables. That is why you often see many internal back-end systems that could use a little facelift, to put it mildly.

Simulation tool written using React Admin — custom input form and organized output

React Admin

React Admin is a framework that provides a user interface and data management layer for building front ends in general. It is based on the concept of data providers which can connect the site to any back-end system. React Admin allows you to customize the front end based on your data requirements.

With React Admin, you can shape the front end according to your needs. It provides out-of-the-box support for presenting data in tables, including features like pagination, sorting, and filtering. Each record can be displayed individually, and you can easily connect forms for creating or editing records and buttons for triggering custom back-end actions. It is worth mentioning that the URLs of resources have an apparent scheme, making it easy to use the site and send links to each other.

Material UI, the default appearance base for the components, provides an attractive design. Its components are much more responsive than if we were to write them ourselves. One of the main benefits of Material UI is support for grids and item alignment without custom CSS and containers (although, especially as a back-end developer, you can never avoid CSS problems). This results in significant time and effort savings. In most cases, we focus on specifying the correct resource and its fields on the front-end side while the data are delivered from the back end, which we also control. The simplest UI code is not much more than mapping JSON responses to field types. Tables, labels, parsing, etc. — all bloat code is autogenerated and strictly connected to the data.

Table view generated by the code below.

Views like this can be generated from API responses with a few lines of code. Sorting, filtering, pagination — all these features are available in React Admin straightaway if supported by the back end. A wide range of built-in components comes with the flexibility to add any custom element needed. The construction of the first views is immediate. Adding more data tabs does not require many hours of work. Of course, appetite comes with eating. Once you know this solution’s potential, it’s hard to stop with just the essential functions.

Code needed to generate a table — filters and rows definitions. Data are filled in the background using a data provider method:

const reportsFilter = [
    <TextInput label="ID" source="id"/>,
    <TextInput label="IMO" source="imo"/>,
    <SelectInput
        source="type"
        choices={[
            { id: "type_s", name: "S" },
            { id: "type_p", name: "P" },
        ]}
    />,
    ...
];

export const ReportsList = () => (
    <List
        sort={{ field: 'updated_at', order: 'DESC' }}
        filters={reportsFilter}
    >
        <Datagrid rowClick="show" >
            <DateField showTime={true} source="updated_at" />
            <ReportsStateRow source="State"></ReportsStateRow>
            <TextField source="id" />
            <TextField source="imo" />
            <TextField source="type" />
            <DeletedField source="deleted" />
            <DateField showTime={true} source="from_utc_date" />
            <DateField showTime={true} source="to_utc_date" />
        </Datagrid>
    </List>
);

The framework is well-documented and easy to start with. It requires knowledge of JavaScript or TypeScript basics. However, you only need a little code to see the first results. You can learn to write more customised page elements on the fly, also using solutions like ChatGPT. The learning curve is relatively low and decreases as you get to know basic concepts. Based on our team’s experience, adding code by people who have not dealt with this solution before is quick.

Inconveniences? It is essential to point out that frameworks that make work easier and hide repetitive code require more trade-offs than what is written from scratch. It means that sometimes, especially when we want to save time spent on debugging and understanding React Admin internals, a final solution must be adjusted to framework capabilities. It is not a no-code solution. Despite being programmers-friendly, it requires programming knowledge.

Tips & tricks for internal UI

• In most cases, you do not need to define a strict contract between the back end and the internal front end. Instead, rely on the correctness of the data coming from the back end. For example, you do not have to declare all its fields when dealing with a nested object with a known structure. It is worth mentioning that React Admin handles empty or poorly defined values well.
• Limit the front-end logic. Strive to return precisely useful data as values. The better the back end is aligned with what you want to display, the less code and maintenance are required on the front-end side.
• If you are the only user, you can limit the front-end side validation.
• With React Admin, you can use REST, GraphQL, or any other type of back end, depending on your team’s skills.
• A dedicated back end for the front end may be recommended if the project provides a limited API. This approach ensures that the insight app remains transparent to the domain and its other services. It can be maintained independently and without changes to the existing codebase. This separation also allows you to expose data that should not be accessed in any other way.

In summary, React Admin offers significant benefits for internal UI development by providing insight into back-end projects. It allows for easy data customisation and presentation, saving back-end developers time and effort. Its out-of-the-box features make it an efficient way to create data-based interfaces. The integration with Material UI provides an attractive design and responsive components. Flexibility and a low learning curve make React Admin a worthwhile tool for creating high-quality internal front ends, offering comprehensive and up-to-date information. We recommend that you consider this solution when planning the development of your next product requiring data insight.