Live demo
EN | 中文

Open Source CRUD Development Tools: NocoBase vs Refine

This article provides an in-depth comparison of the two open-source CRUD tools, NocoBase and Refine, in terms of functionality, extensibility, and applicable scenarios.

Deng lijia |

Introduction

Today, we’re focusing on two outstanding open-source CRUD development tools: NocoBase and Refine. These tools are excellent representatives of no-code/low-code development platforms and low-code frontend development frameworks, respectively.

NocoBasevsRefine.JPEG

It’s worth mentioning that NocoBase has already gained 12k stars on GitHub, while Refine, known as an open-source alternative to Retool, has amassed an impressive 27k stars on GitHub.

As a no-code/low-code development platform, NocoBase is characterized by its intuitive interface and ease of use. With NocoBase, users can quickly build complex business applications. For developers with a technical background, NocoBase offers extensive customization capabilities. Its plugin architecture and flexible data model design allow developers to quickly tailor and deploy applications, significantly improving development efficiency.

On the other hand, Refine is a low-code frontend development framework that focuses on providing developers with high flexibility and customization options. Built on a React-based architecture, Refine enables developers to freely design complex user interfaces while achieving functionality with minimal code.

From a user’s perspective, we will compare these two platforms to help you understand their respective strengths and suitable use cases.

This article is divided into three main sections:

  1. Feature Comparison
  2. Integration and Extensibility Comparison
  3. Use Case Summary

Feel free to jump to the section that interests you most. We hope this article helps you choose the right CRUD development tool for your needs. 😁

Feature Comparison

When it comes to features, NocoBase and Refine each offer unique advantages that cater to different user needs. We’ll break down the comparison into four key areas: CRUD functionality, data models and access control, frontend development with custom components, and workflow automation.

CRUD

Both NocoBase and Refine are excellent CRUD (Create, Read, Update, Delete) tools designed for managing data, handling database operations, and building business applications.

💡 Dig deeper: Top 8 Open-Source CRUD Projects with the Most GitHub Stars

NocoBase provides a complete set of CRUD functionalities, allowing users to easily create, read, update, and delete data without writing any code.

CRUD.PNG

Here are some core strengths of NocoBase in CRUD operations:

  1. Intuitive Graphical Interface: NocoBase offers a visual interface that allows users to design and manage database tables through drag-and-drop operations. Users can effortlessly configure table structures, field types, and relationships, while managing data in real-time, simplifying the database management process significantly.
  2. Modular Data Management: NocoBase supports modular CRUD operations, enabling users to create complex business data models through tables, data sources, and field modules. Its flexible data model design allows users to customize forms, list views, and more, making it suitable for diverse data management needs.
  3. Role-Based Access Control: When performing CRUD operations, NocoBase allows role-based permission management, ensuring that different users have appropriate access and control over data. This feature is particularly crucial in enterprise applications, as it helps protect data security and maintain compliance.
  4. Dynamic Data Display and Operations: NocoBase provides a dynamic interface for CRUD interactions, enabling users to quickly manage data through forms or views. It also supports batch processing and management of large-scale data, making it ideal for teams looking to rapidly build internal business management systems.

Similarly, Refine is highly capable in CRUD operations.

CRUD.PNG

Key features of Refine in CRUD development:

  1. High Flexibility with React: Refine enables developers to implement CRUD functionality with minimal code. Using useData hooks and built-in data management features, developers can easily integrate with REST APIs, GraphQL, or other data sources to dynamically fetch and manipulate data.
  2. Custom Forms and Data Display: Developers can leverage Refine’s UI components, such as Ant Design or Material UI, to quickly create and manage data input forms and display pages. This highly customizable frontend operation allows developers to adjust CRUD interface layouts and functionalities based on business requirements.
  3. State Management and Data Interaction: Refine offers a smooth data handling experience through React’s state management mechanisms. Developers can easily manage CRUD operations and seamlessly connect them with user interactions. This low-code approach reduces the developer’s workload while providing powerful control over frontend features.
  4. Modular Design: Refine’s modular structure allows developers to create independent CRUD functionalities for different pages or components, which is suitable for projects requiring multiple modular data management pages. Developers can reuse components and logic to quickly develop different parts of complex applications.

Data Models and Access Control

Data models are the backbone of CRUD operations, defining how information is structured, stored, and related within a system. Efficient data model management ensures users can seamlessly create, read, update, and delete data, allowing applications to function as expected. Equally important is access control, which determines who can access and modify specific data. For any enterprise-level application, ensuring different user groups have appropriate access levels is crucial for maintaining data security and system integrity.

One of NocoBase’s core strengths is its flexible data model and robust access control system.

flexible data model.png

NocoBase is based on a relational database design, allowing users to create complex data structures and flexibly configure relationships between tables through its graphical interface. For developers, NocoBase offers customizable data management options, enabling users to expand and adjust data models based on business requirements without writing complex code.

customizable data management.png

Additionally, NocoBase provides comprehensive access control and user authentication features. Users can set granular permissions for data based on roles and specific operations, ensuring strict separation of access rights between different user groups.

access control.png

This powerful access control system is especially critical for enterprise applications, ensuring both data security and regulatory compliance. NocoBase offers multiple user authentication methods via plugins, including SMS verification, SAML SSO, OIDC SSO, and CAS SSO. Users can leverage platforms like Google Workspace or Microsoft Azure for identity login systems or integrate with tools like Auth0, Logto, and Keycloak. Moreover, developers can easily extend authentication options via NocoBase’s foundational interfaces to suit their specific needs.

In comparison, Refine handles data models primarily through backend service integration, combining flexibility in data retrieval and access control.

backend service integration.png

With Refine’s data retrieval capabilities, developers can easily interact with various backend APIs such as REST API, GraphQL, or integrate with services like Strapi, Supabase, and Airtable.

backend APIs.png

Refine offers a seamless data retrieval model, automatically managing request states (e.g., loading, error, success), allowing developers to focus on business logic rather than the intricacies of data fetching.

seamless data retrieval model.png

Regarding access control, Refine offers a flexible authentication and authorization mechanism. Refine supports multiple common authentication methods such as OAuth, JWT, or custom authentication schemes. This allows developers to manage user authentication easily by integrating with backend services and configuring different authentication flows based on project needs.

Frontend Development and Custom Components

When it comes to frontend development and custom components, NocoBase and Refine have different areas of focus.

WYSIWYG.png

NocoBase offers an intuitive WYSIWYG (What You See Is What You Get) user interface editor, allowing users to quickly build and configure frontend interfaces through simple drag-and-drop actions without writing code. This editor provides users with the flexibility to customize page layouts, block displays, and data views, greatly simplifying frontend development tasks—especially for users without frontend development experience.

The key advantages of NocoBase’s UI editor include:

UI editor.png

  1. Modular Design: Users can quickly build application interfaces using predefined blocks such as forms, tables, cards, and lists. These components can be flexibly combined through drag-and-drop, helping users customize page layouts based on their specific needs.
  2. Real-Time Preview and Fast Debugging: NocoBase offers a real-time preview feature that allows users to view interface effects during the design process and make adjustments as needed. This fast feedback mechanism significantly improves development efficiency, especially in fast-paced, iterative business environments.
  3. Customization and Extensibility: While NocoBase’s interface editor is ideal for no-code users, it also supports custom integrations and development through plugins for users with coding experience.

visual interface design.gif

This highly visual interface design approach helps users quickly achieve page layout and functionality, while also supporting complex interaction logic and dynamic data displays.

In contrast, Refine is more suited for developers with frontend development experience, allowing them to build frontend interfaces with minimal code. Refine provides a highly modular component system, enabling developers to use popular UI libraries such as Ant Design and Material UI.

modular component system.png

Refine’s componentized design, along with its seamless integration with the React ecosystem, gives developers great flexibility in building pages. Developers can customize components, define complex page logic, and reuse and combine components efficiently. Additionally, Refine’s layout and state management system simplifies the development process, allowing developers to focus on business logic without worrying about underlying state management details.

Reactecosystem.png

In complex frontend development scenarios, Refine offers greater freedom and flexibility, while NocoBase focuses on providing a graphical interface and predefined components to help users build frontend interfaces more efficiently.

Workflows and Automation

When it comes to workflows and automation, NocoBase provides powerful business process configuration and automation capabilities. Unlike low-code platforms that require custom code to implement complex business logic, NocoBase’s graphical workflow editor allows users to design, configure, and automate entire business processes with just a few clicks.

automation.png

NocoBase’s workflow features are based on a visual process designer, enabling users to implement complex business automation by defining triggers, actions, and workflow nodes. Its core strengths include:

  1. Graphical Workflow Design: NocoBase provides an intuitive graphical interface where the execution logic of each step is clearly visible. Whether it’s approval processes, automated task assignments, or cross-system data processing, users can configure these processes through simple settings, achieving advanced workflow control. Graphical Workflow Design.png
  2. Triggers and Conditional Branching: NocoBase supports a variety of event triggers, allowing workflows to start based on data changes, time-based conditions, or manual actions. Combined with conditional branching, users can set different conditions for each node, enabling dynamic selection of the next steps according to business logic.
  3. Automated Tasks: Users can automate a range of tasks. For example, when new data is added or updated, the system can automatically send notifications, update related records, or invoke external APIs to trigger actions in other systems.
  4. External Integration and API Calls: NocoBase workflows are not limited to internal operations but can also integrate with external systems. Users can configure external API calls within workflows, allowing the platform to automate interactions with third-party services. This capability gives NocoBase a significant advantage in handling cross-system business scenarios.

In contrast, Refine, being a frontend development framework, does not directly provide built-in workflow management features. However, Refine excels at seamlessly integrating with external workflow engines or backend automation tools. Developers can use Refine to build custom frontend interfaces and integrate them with backend workflow systems like n8n, Integromat, and others to complete complex automation tasks.

Integration Capabilities and Extensibility

When it comes to integration and extensibility, NocoBase and Refine offer different approaches to meet user needs. NocoBase can rapidly extend both frontend functionality and backend integration with third-party services, covering the entire business logic from front to back. On the other hand, Refine focuses mainly on frontend extensibility, allowing integration with external APIs and data sources, but lacks direct backend extensibility, relying on external services (e.g., Strapi, Supabase) to handle data and business logic.

NocoBase: Comprehensive Integration Capabilities

NocoBase’s plugin architecture provides robust extensibility, allowing users and developers to quickly integrate necessary features and third-party services by simply installing and enabling plugins. All of NocoBase’s core functionalities (such as data management, access control, and workflows) are provided through plugins. This modular design not only simplifies system maintenance but also allows users to freely select and configure features based on their specific needs.

Integration Capabilities.png

  • Plugin Development and Extensibility: NocoBase supports the development of custom plugins, enabling developers to write plugins to extend system functionality according to business requirements. For instance, they can integrate new data sources, external APIs, or custom business logic. This flexible approach minimizes the need for modifying core system code, reducing risks and maintaining system integrity.
  • Third-Party Service Integration: NocoBase enables seamless integration with third-party services such as external databases and authentication services through plugins. Users can directly invoke these services and embed them into their business processes. For example, integrating OAuth for user authentication or connecting to external user management systems can be achieved through plugins, greatly reducing the complexity of implementation without requiring development experience.

💡 Dig deeper: Deep Dive: Low Code/No Code Integration Capabilities

This plugin-based architecture enhances NocoBase’s extensibility, allowing it to expand features as business needs evolve without requiring large-scale changes to the underlying code, ensuring stability and flexibility.

Refine: Focused on Frontend Development and Customization

Refine excels in frontend development and customization, leveraging its React framework to offer high flexibility in building frontend functionalities. Refine allows developers to tap into the React ecosystem and existing component libraries to implement more customized frontend features, as shown in the example below of a real-time collaborative pixel art platform.

Frontend Development and Customization.png

  • Custom Frontend Components: Refine allows developers to customize and reuse React components according to project requirements, enabling the creation of highly complex frontend applications. By integrating UI libraries like Ant Design or Material UI, developers can rapidly create modern interfaces and adjust them flexibly to meet business needs. For example, they can customize page layouts based on user roles, dynamically render different data displays, or extend interactive capabilities using custom form components.
  • Modular Development: Refine provides a modular development approach, allowing developers to create independent modules for different parts of a project and extend functionality as needed. This makes collaboration more efficient in large projects, where teams can work on different modules simultaneously. Additionally, Refine’s code structure is clear and follows development standards, making future maintenance and iteration more straightforward.
  • Seamless Integration of External Libraries and Tools: Since Refine is entirely based on React, developers can easily integrate any external libraries and tools from the React ecosystem. Whether it’s data visualization tools, state management libraries, or complex routing and access control logic, developers can flexibly choose and integrate them into their Refine projects based on project requirements.

Example: How to Integrate External APIs or Services

In NocoBase, integrating external APIs and services is achieved flexibly through its plugin mechanism. Developers can create custom plugins to integrate external API data with NocoBase’s data models, interfaces, or business processes, independent of workflow operations.

Integrate External APIs or Services.png

The typical process includes:

  1. Developing Custom API Plugins: Developers create custom plugins that call external APIs and process the returned data according to business requirements.
  2. Integration with Data Models or Interfaces: The plugin can integrate external API data directly into NocoBase’s data models or user interfaces for manipulation and display, without relying on the workflow system.
  3. Combining with Workflows (Optional): For automation scenarios, developers can combine the workflow functionality, using triggers (e.g., data changes or user actions) to automatically call external APIs, further enhancing efficiency.

This plugin-based architecture offers flexibility, allowing users to decide whether to combine workflows based on different business needs. External API data can be used directly for interface display, data processing, or business process management, meeting diverse integration requirements.

In Refine, developers can directly call external APIs using React components to retrieve and manipulate data. By using custom hooks or the built-in useData feature, developers can easily fetch external API data and process it. For example, when building a CRM application, developers can:

  1. Use Refine’s data retrieval capabilities to fetch customer data from REST API or GraphQL.
  2. Display the data using custom table or chart components.
  3. Manage data operations (CRUD) with React state management tools and sync updates to external services.

Both platforms provide solid extensibility but with different strengths—NocoBase offers a comprehensive backend and frontend integration through its plugin architecture, while Refine emphasizes frontend customization and flexibility through its React-based modular design.

Use Case Summary

From the analysis above, we can see that NocoBase and Refine have distinct focuses and strengths, offering solutions tailored to different user needs. Whether it’s the development approach or extensibility, these two tools serve diverse users with fitting solutions.

NocoBase is Suitable for the Following Scenarios:

  1. Rapid Development of Internal Business Systems: NocoBase is ideal for quickly developing and iterating business systems like CRM, RMS (Records Management System), or MES (Manufacturing Execution System). These systems can be built swiftly through simple configuration or plugins, allowing non-technical users to participate in development, significantly reducing the development cycle and cost.
  2. Digital Transformation for Enterprises: For enterprises looking to achieve digital transformation and improve efficiency while reducing costs, NocoBase offers a flexible and scalable solution. Its plugin extension capabilities enable seamless integration with external systems, allowing businesses to quickly respond to new demands.
  3. Collaboration Between Technical and Non-Technical Users: NocoBase supports deep customization by technical teams through plugin development, while also allowing non-technical users to build basic features with no-code tools. This flexibility makes it an ideal platform for collaboration between business and technical teams.

Refine is More Suitable for the Following Scenarios:

  1. Custom Development of Complex Frontend Interfaces: For projects that require highly customized frontend interfaces and interaction logic, or even game-like interfaces, Refine offers powerful flexibility. It allows developers to leverage the React ecosystem and component libraries for high levels of customization, making it suitable for building complex, multi-page applications.
  2. Developer-Led Projects: Refine is more suited for teams with frontend development expertise. Developers can use custom code and data integration to build complex business logic, making it ideal for developing enterprise-grade complex applications.
  3. Long-Term, Large-Scale Projects: For projects that require long-term maintenance and frequent iterations, Refine provides excellent extensibility and maintainability. It is well-suited for technical teams that want to maintain tight control over the codebase.

Recommendations

  • If your project requires quickly building CRUD applications, such as internal business systems or data management platforms, NocoBase is an ideal choice. It offers a low development cost and technical barrier for building complex applications and provides extensibility through its plugin architecture.
  • Refine is a better fit for projects that require greater freedom in frontend development, especially for complex CRUD operations and interactions. If you have a technical team, Refine allows you to build complex frontend applications quickly, while maintaining high levels of customization and control.

❤️ Thank you for reading! If you found this article helpful, feel free to share it with your friends.

Related reading: