refine 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
refine 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
refine 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT License
开发语言 Java
操作系统 跨平台
软件类型 开源软件
所属分类 大数据数据查询
开源组织
地区 不详
投 递 者 首席测试
适用人群 未知
收录时间 2021-11-23

软件简介

refine is a React-based framework for building data-intensive applications in no time It ships with Ant Design System, an enterprise-level UI toolkit.

Tweet

Meercode CI Score Meercode CI Success Rate Maintainability Test Coverage npm version npm Contributor Covenant Discord

Created by Pankod

About

refine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to admin panels, B2B applications and dashboards.

Documentation

For more detailed information and usage, refer to the refine documentation.

Key features

⚙️ Zero-configuration: One-line setup with superplate. It takes less than a minute to start a project.

📦 Out-of-the-box : Routing, networking, authentication, state management, i18n and UI.

🔌 Backend Agnostic : Connects to any custom backend. Built-in support for REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi GraphQL, Supabase and Altogic.

📝 Native Typescript Core : You can always opt out for plain Javascript.

🔘 Decoupled UI : UI components are exposed directly without encapsulation. You have full control on UI elements.

🐜 Powerful Default UI : Works seamlessly with integrated Ant Design System. (Support for multiple UI frameworks is on the Roadmap)

📝 Boilerplate-free Code : Keeps your codebase clean and readable.

Motivation

Higher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.

After many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how refine is born.

refine is a collection of helper hooks, components and providers. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.

As refine is totally unopinionated about UI and logic, it's strongly opinionated about three parts of your application:

  1. API Networking
  2. State Management
  3. Authentication & Authorization

We believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.

refine guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.

Architecture

refine makes extensive use of hooks as a default way for interacting with your components. Under the hood, refine relies heavily to React Query for data handling, caching and state management. Access to external sources and API's happen via providers which are basically plug-in type components for extendibility.


Benchmark

After releasing the first internal versions, we had the chance to migrate some of our React projects to refine. In addition to shorter development times and overall performance gains, we've measured significant reduction in project size.

refine makes your codebase significantly smaller, by eliminating redundant code such as reducers, actions and unit tests. Below is a size comparison for an example project:


Quick Start

Run the superplate tool with the following command:

npx superplate-cli tutorial

Follow the CLI wizard to select options and start creating your project.

After setup is complete, navigate to the project folder and start your project with:

npm run dev

Your refine application will be accessible at http://localhost:3000.

Replace the contents of App.tsx with the following code:

import React from "react";
import {
    Refine,
    Resource,
    useTable,
    List,
    Table,
    useMany,
    DateField,
} from "@pankod/refine";
import dataProvider from "@pankod/refine-simple-rest";

import "@pankod/refine/dist/styles.min.css";

const App: React.FC = () => {
    return (
        <Refine dataProvider={dataProvider("https://api.fake-rest.refine.dev")}>
            <Resource name="posts" list={PostList} />
        </Refine>
    );
};

export const PostList: React.FC = () => {
    const { tableProps } = useTable<IPost>();

    const categoryIds =
        tableProps?.dataSource?.map((item) => item.category.id) ?? [];

    const { data, isLoading } = useMany<ICategory>({
        resource: "categories",
        ids: categoryIds,
        queryOptions: {
            enabled: categoryIds.length > 0,
        },
    });

    return (
        <List>
            <Table<IPost> {...tableProps} rowKey="id">
                <Table.Column dataIndex="title" title="title" />
                <Table.Column
                    dataIndex={["category", "id"]}
                    title="category"
                    render={(value: string) => {
                        if (isLoading) {
                            return "loading...";
                        }

                        return data?.data.find(
                            (item: ICategory) => item.id === value,
                        )?.title;
                    }}
                />
                <Table.Column
                    dataIndex="createdAt"
                    title="createdAt"
                    render={(value) => <DateField format="LLL" value={value} />}
                />
            </Table>
        </List>
    );
};

export default App;
interface IPost {
    title: string;
    createdAt: string;
    category: ICategory;
}

interface ICategory {
    id: string;
    title: string;
}

Roadmap

☑️ NextJS & SSR support

☑️ Support for more data & auth providers

☑️ Support for more UI frameworks (MaterialUI, Chakra, Spectrum etc.)

Stargazers

Stargazers repo roster for pankod/refine

Contribution

If you have a bug to report, do not hesitate to file an issue.

If you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.

License

Licensed under the MIT License, Copyright © 2021-present Pankod

Special Thanks

React Admin has been a great source of ideas and inspiration for refine. Big thanks to friends at Marmelab for the amazing work they are doing.

展开阅读全文

代码

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部