Когда дело доходит до создания внутренних инструментов, платформы с низким кодом — это то, что нужно. С помощью Refine, платформы Low-Code на базе React, вы можете быстро создавать приложения с интенсивным использованием данных, не беспокоясь о масштабируемости или простоте использования. Другие платформы low-code могут позволить вам разрабатывать свои приложения, но они часто ограничены в плане гибкости и настраиваемости. С Refine вы получаете полный контроль над своим приложением и можете добавить любую бизнес-логику, которая вам необходима. Поэтому если вы ищете платформу, которая позволит вам быстро и легко создавать внутренние инструменты, Refine — это правильный выбор!
Что такое Refine?
Refine — это безголовый фреймворк на основе React, который позволяет быстро и легко создавать приложения, использующие большие объемы данных. Быстрая разработка и безголовый фреймворк одновременно — как это? Ну, Refine поддерживает Ant Design для быстрых и простых решений. Кроме того, он позволяет использовать вашу систему проектирования или интегрироваться с другими популярными фреймворками проектирования.
Более подробную информацию о Refine см. в разделе «Refine».
Почему вы должны использовать Refine?
- Он имеет открытый исходный код по лицензии MIT.
- Прост в использовании и его легко изучить. Есть много примеров, которые помогут вам начать работу, а также документация.
- Это фреймворк, который не требует от вас использования каких-либо библиотек или фреймворков пользовательского интерфейса.
- Поддерживает Ant Design для быстрых и простых решений.
- Не зависит от бэкенда, поэтому вы можете подключиться к любому бэкенду, который вам нужен.
- Настраиваемый, что означает, что вы можете изменить его в соответствии с вашими потребностями.
- Refine полностью совместим с рендерингом на стороне сервера с помощью Next.js.
Особенности Refine
Некоторые из основных возможностей Refine следующие:
- Выборка данных и управление состоянием
- Маршруты
- Аутентификация
- Авторизация
- Интернационализация
- В реальном времени
- Режимы мутации с оптимистичным, пессимистичным и недогружаемым режимами
Как работает Refine?
Refine полностью агностичен; просто оберните ваше приложение компонентом Refine и передайте ему нужное свойство. Например, он принимает такие свойства, как dataProvider для связи с API и authProvider для аутентификации. Затем у вас есть хуки, которые вы можете использовать во всем приложении. Эти хуки совместимы с React Query.
Чтобы понять, как работает Refine, давайте рассмотрим следующие пункты:
Общение с API
dataProvider позволяет общаться с API. Все операции по получению и изменению данных выполняются через это свойство.
Провайдер данных должен обладать следующими свойствами:
const dataProvider = {
create: ({ resource, variables, metaData }) => Promise,
createMany: ({ resource, variables, metaData }) => Promise,
deleteOne: ({ resource, id, metaData }) => Promise,
deleteMany: ({ resource, ids, metaData }) => Promise,
getList: ({ resource, pagination, sort, filters, metaData }) => Promise,
getMany: ({ resource, ids, metaData }) => Promise,
getOne: ({ resource, id, metaData }) => Promise,
update: ({ resource, id, variables, metaData }) => Promise,
updateMany: ({ resource, ids, variables, metaData }) => Promise,
};
Refine предлагает крючки, которые помогут вам в получении данных и мутациях с использованием свойств поставщика данных. Например, когда вы используете хук useTable или useList, он вызовет метод getList под капотом.
Для получения дополнительной информации обратитесь к хукам useTable и data.
Например, давайте посмотрим, что происходит при вызове useTable.
import { List, Table, TextField, useTable } from "@pankod/refine-antd";
interface IPost {
id: string;
title: string;
content: string;
status: "published" | "draft" | "rejected";
}
export const PostList: React.FC = () => {
const { tableProps } = useTable({
resource: "posts",
initialSorter: [
{
field: "title",
order: "asc",
},
],
initialFilter: [
{
field: "status",
operator: "eq",
value: "draft",
},
],
});
return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
<Table.Column dataIndex="content" title="Content" />
</Table>
</List>
);
};
В примере useTable вызывается метод getList поставщика данных со следующими свойствами:
getList({
resource: "posts",
pagination: {
page: 1,
perPage: 10,
},
sort: [
{
field: "title",
order: "asc",
},
],
filters: [
{
field: "status",
operator: "eq",
value: "draft",
},
],
});
С помощью metaData вы можете передать провайдеру данных любые необходимые вам параметры. Вы можете обрабатывать их в провайдере данных.
Все хуки, использующие методы поставщика данных, такие как useTable, работают с React Query. Поэтому вы можете использовать все возможности React Query.
Для получения дополнительной информации обратитесь к dataProvider.
Провайдеры данных из коробки
Refine включает в себя множество готовых поставщиков данных, которые вы можете использовать в своих проектах, например:
- Простой REST API
- GraphQL
- NestJS CRUD
- Airtable
- Strapi — Strapi v4
- Strapi GraphQL
- Supabase
- Hasura
- Appwrite
- Altogic
Добавьте маршрутизацию в приложение
Refine нужны некоторые функции маршрутизатора для создания страниц ресурсов, навигации и так далее. Для передачи функций маршрутизации в Refine используется свойство routerProvider. Таким образом, это позволяет вам использовать любую библиотеку маршрутизаторов, которую вы хотите.
Если вам не нужна какая-либо настройка маршрутизатора, мы не рекомендуем использовать этот провайдер. Вместо этого попробуйте использовать nextjs-router для вашего проекта Next.js и react-router или react-location для вашего проекта React.
Для получения дополнительной информации обратитесь к routerProvider.
Провайдеры маршрутизаторов из коробки
Refine включает множество готовых провайдеров данных для использования в ваших проектах, например:
- React Router
- React Location
- Next.js Router
Создание страниц с помощью resources
Основными строительными блоками приложения Refine являются resources. Ресурс — это объект в конечной точке API (например, https://api.fake-rest.refine.dev/posts). Он соединяет данные из API с компонентами страницы, позволяя страницам получать доступ к данным из API.
import { Refine } from "@pankod/refine-core";
import dataProvider from "@pankod/refine-json-server";
import "@pankod/refine-antd/dist/styles.min.css";
import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";
const App: React.FC = () => {
return (
<Refine
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
resources={[
{
name: "posts",
list: PostList,
create: PostCreate,
edit: PostEdit,
show: PostShow,
},
]}
/>
);
};
export default App;
Каждому компоненту ресурса Refine присваивает маршрут. Например, маршрут /posts отображает страницу списка ресурса posts, который реализован с помощью компонента PostList. Компонент PostCreate является страницей создания ресурса posts и отображается маршрутом /posts/create. Компонент PostEdit является страницей редактирования ресурса posts и отображается маршрутом /posts/edit/:id. Компонент PostShow является страницей показа ресурса posts и отображается маршрутом /posts/show/:id.
Хуки Refine, используемые на этих страницах, по умолчанию считывают некоторые значения из маршрута. Например, хук useForm по умолчанию берет resource, action и id из маршрута.
Аутентификация
authProvider позволяет добавить аутентификацию в ваше приложение. Вы можете использовать любую библиотеку аутентификации, которую вы хотите. Вся логика аутентификации управляется этим authProvider.
Провайдер аутентификации должен обладать следующими свойствами:
const authProvider = {
login: () => Promise,
logout: () => Promise,
checkAuth: () => Promise,
checkError: () => Promise,
getPermissions: () => Promise,
getUserIdentity: () => Promise,
};
Refine использует эти методы через крючки авторизации. Процедуры аутентификации и авторизации, такие как вход в систему, выход из системы, проверка учетных данных пользователя и отслеживание ошибок HTTP, обрабатываются с помощью крючков авторизации. Например, checkAuth вызывается, когда пользователь пытается получить доступ к странице, требующей аутентификации.
Для получения дополнительной информации обратитесь к authProvider.
Готовые провайдеры маршрутизатора
- Auth0 — исходный код — демонстрация
- Google — Исходный код — Демонстрация
- OTP Login — Исходный код — Демо
Авторизация
Refine предоставляет accessControlProvider, который вы можете использовать для контроля того, кто имеет доступ к чему в вашем приложении. Вы можете использовать любую библиотеку контроля доступа, которую вы хотите. Кроме того, вы можете выбрать модели управления доступом, которые лучше всего подходят для вас (RBAC, ABAC, ACL и т.д.).
У accessControlProvider должен быть один асинхронный метод can для проверки того, разрешен ли доступ тому, кто его запрашивает.
type CanParams = {
resource: string;
action: string;
params?: any;
};
type CanReturnType = {
can: boolean;
reason?: string;
}
const accessControlProvider = {
can: ({ resource, action, params }: CanParams) => Promise<CanReturnType>;
}
Компонент useCan и <CanAccess> используют этот метод для проверки, разрешен ли пользователю доступ.
Например, мы можем запретить неадминистративным пользователям редактировать ресурс поста.
const App: React.FC = () => {
<Refine
accessControlProvider={{
can: async ({ resource, action, params }) => {
if (resource === "posts" && action === "edit") {
const userRole = getUserRole();
if (userRole === "admin") {
return { can: true };
}
return Promise.resolve({
can: false,
reason: "Unauthorized",
});
}
return Promise.resolve({ can: true });
},
}}
/>;
};
Для получения дополнительной информации обратитесь к accessControlProvider.
Готовые провайдеры контроля доступа
- Casbin — исходный код — демонстрация
- Cerbos — исходный код — демонстрация
Интернационализация
Провайдер i18nProvider используется для придания локализации вашему приложению. Это позволит вам изменять текст в вашем приложении на разные языки.
Провайдер i18n должен обладать следующими свойствами:
const i18nProvider = {
translate: (key: string, params: object) => string,
changeLocale: (lang: string) => Promise,
getLocale: () => string,
};
Refine использует эти методы через крючки перевода.
Подробнее о том, как использовать пакет react-i18next, читайте в Refine i18nProvider.
Поддержка реального времени
liveProvider используется для добавления поддержки реального времени в ваше приложение. Вы можете использовать любую библиотеку или инструмент реального времени, который вы хотите.
Провайдер реального времени должен обладать следующими свойствами:
const liveProvider = {
subscribe: ({ channel, params: { ids }, types, callback }) => any,
unsubscribe: (subscription) => void,
publish?: (event) => void,
};
Подписка на крючки данных Refine осуществляется с помощью метода subscribe, предоставляемого провайдером реального времени. Метод subscribe возвращает объект подписки, который можно использовать для отписки. Метод unsubscribe используется для отмены подписки. Метод publish используется для публикации события в канал на стороне клиента.
Если вы отправите событие после выполнения соответствующих операций на сервере, Refine аннулирует связанные запросы. Если liveMode имеет значение manual, запросы связанных ресурсов не аннулируются в реальном времени; вместо этого onLiveEvent запускается вместе с событием по мере поступления новых событий из подписки.
Готовые провайдеры контроля доступа
- Ably — исходный код — демонстрация
- Supabase — исходный код
- Appwrite — исходный код
Другие возможности Refine
notificationProvider
notificationProvider используется для отображения уведомлений пользователю при выполнении мутаций. Вы можете использовать любую библиотеку уведомлений.
mutationMode
mutationMode используется для определения того, как обрабатывать мутации. Вы можете использовать режим pessimistic optimistic или undoable. При использовании пессимистичного режима обновление пользовательского интерфейса задерживается до тех пор, пока мутация не будет подтверждена сервером. При использовании оптимистичного режима обновления пользовательского интерфейса происходят немедленно. При использовании отменяемого режима обновления пользовательского интерфейса обновляются немедленно, но мутацию можно отменить.
syncWithLocation
Если syncWithLocation включен, список параметров запроса может быть изменен вручную путем редактирования непосредственно в URL.
/posts?current=1&pageSize=8&sort[]=createdAt&order[]=desc
Ознакомьтесь со всеми функциями Refine для получения дополнительной информации.
Заключение
Если вы ищете способ быстро и легко создать внутренний инструмент, не жертвуя настройкой, Refine стоит обратить внимание. Он позволяет вам выбрать любую библиотеку, соответствующую вашим требованиям. Кроме того, если вам нужна помощь или у вас есть замечания, команда Refine отзывчива и рада помочь. Поставьте Refine звезду на GitHub, если он вам понравился — ваша поддержка поможет нам и дальше делать этот инструмент замечательным!