Building Admin Interface is no more boring

Author: Aman Varshney

The bitter truth is that, if you ever had to build an admin panel at work, you weren’t excited about it. But every application needs CMS to manage their work.

I will tell you the story about how we made things exciting while developing the admin panel.

At Shiksha, we are in a phase of technology movement. We have already migrated most of our Frontend pages from PHP to React. So, we thought, why should CMS applications be left behind? Therefore, we needed a framework that will allow fast development and maintains full customizability. We can either use third-party software or build our own. So, we opted for a third-party solution.

On our Journey, we explored different CMS frameworks and came upon one that could easily fit with our architecture and enhance the speed of CMS development. It’s React-Admin.

Source: https://marmelab.com/react-admin/

Before adopting the react-admin in our stack, we needed to check whether it suits our requirements and matches our performance standards. Therefore, to gain that trust, we made a prototype to explore its features and vulnerabilities. The prototype was helpful for us to gain insights into how react-admin works and suits our current needs. But the other difficult task at our hands was to convince our team to adopt it because everyone has a different mindset. With the aid of the prototype and a POC, we were successful in convincing the team about the advantages of React-Admin.

What’s react-admin?

React-Admin is a frontend application based on React Components over material-UI. It uses the ES6 syntax and REST/Graph APIs for rendering the components. The integration of Redux with React-Admin provides additional control for the management of data on the frontend. It provides components to render List View and Add/Edit forms.

How does react-admin communicate with backend?

React admin built on top of the following frontend components

• React
• Material UI
• React Router
• Redux
• Redux Saga
• React final form

React-Admin has tons of features

• Optimistic rendering
• Data validation
• Authentication
• Relationship support
• Conditional formatting
• Full-featured data grids
• Streamlined UI

I will cover a few one by one

Optimistic rendering

This is an approach of displaying information to the user. In optimistic rendering, we don’t keep the user waiting for a response. Instead, we make the assumption that the response will succeed, and provide them with the appropriate response right away.

For example, if you pressed on the deleted post button, react-admin will render the post as deleted before the request actually goes through and responds. In reality, react-admin puts an approximately 5-second delay on requests to resources initiated by the user. This allows for this kind of fast rendering and also the ability to undo actions.

Data validation

React-admin uses a react-final-form library for validation. We can add two types of validation i.e global validation or field wise validation.

Global Validation

We wrapped all the validation logic in a single function that required form field value and returns an object with error messages by field.

const validateRegistrationForm = (values) => {
    const errors = {};
    if (!values.firstName) {
        errors.firstName = ['The firstName is required'];
    }
    if (!values.lastName) {
        errors.lastName = ['The lastName is required'];
    }
    if (!values.age) {
        errors.age = ['The age is required'];
    } else if (values.age < 18) {
        errors.age = ['Must be over 18'];
    }    if (!values.location) {
        errors.location = ['The Location is required'];
    }
    return errors
};export const RegistrationForm = (props) => (
    <Create {...props}>
        <SimpleForm validate={validateRegistrationForm}>
            <TextInput label="First Name" source="firstName" />
            <TextInput label="Last Name" source="lastName" />
            <TextInput label="Age" source="age" />
            <TextInput label="Location" source="location" />
        </SimpleForm>
    </Create>
);

Field Validator

It works only on <Input> components

const validateName = [required(), minLength(2), maxLength(15)];
const validateLocation = [required(), minLength(2)];
const validateAge = [number(), minValue(18)];
export const RegistrationForm = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput label="First Name" source="firstName" validate={validateName} />
            <TextInput label="Last Name" source="lastName" validate={validateName} />
            <TextInput label="Age" source="age" validate={validateAge} />
            <TextInput label="Location" source="location"  validate={validateLocation} />
        </SimpleForm>
    </Create>
);

Authentication

Source: freepik (https://www.freepik.com/free-photos-vectors/background)

Authentication is a very necessary and critical part of every CMS application. Nobody wants their application interfaces to be publically accessible. To restrict the user, we need to build certain layers like login form, and access control list.

By default, react-admin comes with a login page and skeleton authentication layer so that you can write your authentication logic.

React-admin expects five methods from our authentication provider: login, logout, checkError, checkAuth, and getPermissions.

export default {
    login:({username}) => {}logout:() => {
        
    },checkError: (params) => {
    
    },checkAuth:()=>{
        
    }getPermissions: () => {
    }

To restricting access to a custom page

useAuthenticated()

Conclusion

React-admin is a powerful framework. You can customize any functionality and UI provided by the framework. It will save lots of your efforts.

Don’t reinvent the wheel, optimize and add new features into wheel