7 ms·

Show HN: Refine v3.97 – Open-source React framework for building CRUD apps

102 points by salihozdemir 4y ago

omeraplak 4y ago
Hello HN , here is Omer. I'm the Co-founder & CTO of refine. Today we are celebrating the new features of refine with this launch event. Last year was a landmark year for us since we watched refine grow from zero and establish itself as a prominent React framework. It all started with a single question two years ago: "Is it possible for a low-code web framework to quickly generate CRUD applications while still allowing custom styling, logic and workflow?". None of the existing solutions could give us the amount of flexibility that we needed, so we started building one from scratch. Today refine evolved into a full-blown framework for building CRUD applications like admin panels, dashboards, internal tools, and storefronts. It eliminates the repetitive tasks demanded by CRUD operations and saves days of development time. With the new release, we add two new features to refine core 1- Inferencer @pankod/refine-inferencer is a package that provides a way to automatically generate views for resources based on the data structure. The aim is to reduce the amount of time spent on creating views for resources by generating the code automatically that can be customized easily. 2- Swizzle The swizzle is a command in refine-cli that allows you to customize the refine's supported components and data providers. It allows you to eject selected files from the refine packages and modify depending on your needs. Unique "Headless UI" approach enables developers to use any UI framework or custom design without constraints. For convenience, refine is shipped with ready-made integrations with three powerful UI frameworks: Ant Design, Material UI & Mantine. Being totally backend agnostic, refine can connect to 15+ backend services out-of-the-box, incl. custom REST & GraphQL API's. With refine, developers have 100% control over their projects as they may build, style and deploy the way they like. And of course, we want to know what you think about refine and any ideas or suggestions you may have for our solution. Please write them and we'll be happy to join the conversation.
- revskill 4y ago
  Thanks you very much. I love Refine ideas and the abstraction (Data Provider is cooool). Would love to improve the examples though: - Example code for backend Rest API to be used with Refine (i'm confused about specification on openapi request params/response) - Example code on only using data provider package (for example, we don't need to use refine routing provider, auth provider,...)
  - omeraplak 4y ago
    Yes, this is definitely an area where we want to improve. Thank you for your feedback. edit: By the way, what is your opinion on the "inferencer" package?
    - revskill 4y ago
      I've not used much the inference package. Let me check it first.
      - omeraplak 4y ago
        @pankod/refine-inferencer is an experimental package and it is now in the early stages of development. We are working on improving the package and adding new features. Document: https://refine.dev/docs/packages/documentation/inferencer/ https://refine.dev/docs/packages/documentation/inferencer/ If you have any suggestions or feedback, please let us know in the GitHub Discussions https://github.com/refinedev/refine/discussions/3046 https://github.com/refinedev/refine/discussions/3046
        revskill 4y ago
        I need one more crucial feature, it's row grouping with aggregation in table view.
        omeraplak 4y ago
        If your table component can do that, fine for Refine. Which UI framework are you using?
        revskill 4y ago
        If you can have example with this https://infinite-table.com/ https://infinite-table.com/ , the grouping feature, that would be helpful !
- rjzzleep 4y ago
  It looks good. I checked how long this has been around. Two years seems longer than most react apps. Couple of questions: 1. How complex was the upgrade path between major versions? 2. Are you guys cashflow positive? 3. What are your competitors? Thanks
  - omeraplak 4y ago
    Thank you so much. 1. We've released a codemod when releasing v3 and allowed users to upgrade easily from v2 to v3 and we're planning to do the same for v4 as well. https://refine.dev/docs/migration-guide/ https://refine.dev/docs/migration-guide/ 2. We got a similar question before. You can check it out here: https://github.com/refinedev/refine/discussions/3261 https://github.com/refinedev/refine/discussions/3261 3. We have detailed comparison table for similar tools: https://refine.dev/docs/comparison/ https://refine.dev/docs/comparison/ Have you ever tried similar tools for building a CRUD app before? Can you suggest any for us to take a look?
    - edgyquant 4y ago
      You should just answer the question instead of pointing users to GitHub. The answer is no, they are not and they plan on selling features in the future.
      - omeraplak 4y ago
        Thank you for your warning and comment. I shared the link because I thought people could contribute to the discussion on GitHub. To avoid any misunderstandings, I want to clarify that Refine will always remain open source and will continue to be developed with the community. So we are adopting the "open core" model which is very popular and widely accepted in the open source ecosystem. To reiterate, Refine will always remain open-source.
venkatkms 4y ago
It would be good to know how this compares against React Admin Enterprise ( https://marmelab.com/ra-enterprise/ https://marmelab.com/ra-enterprise/ )
- omeraplak 4y ago
  refine is %100 open source. It provides all enterprise features of React Admin for free. Additionaly, refine has more features that React Admin enterprise doesn't have. You can take a look at the comparison table: https://refine.dev/docs/comparison/ https://refine.dev/docs/comparison/
  - dalmo3 4y ago
    It sounds too good to be true when your product is better than every competitor in every aspect. What are refine's weakest points?
    - omeraplak 4y ago
      In my opinion, trying to handle routing is the weakest point. However, we are working on this. With refine v4 , we'll remove the router dependecies and you will be able to easily integrate refine to your existing app.
    - venkatkms 4y ago
      Looked a bit more in detail it seems a few features like below are comparably deficient vs React Admin Enterprise: 1. Relationships management (particularly many to many) 2. Persistence of preferences like sort and filters 3. No builtin UI components to display audit logs PS: i am not associated with them in anyway. Just looking for versatility in tools in this space. Also XavaPro (java specific and server generated pages design) is much more feature rich
  - maxloh 4y ago
    How do you plan to make money with it?
tessela 4y ago
I would like to see examples of integrating refine in a existing app.
- omeraplak 4y ago
  Here is complete CRUD admin panel example built using refine: https://example.admin.refine.dev/ https://example.admin.refine.dev/ You can take a look at the other real world examples with the source codes from here: https://refine.dev/examples/ https://refine.dev/examples/ Additionally the full examples for refine feature implementations: https://refine.dev/docs/examples/ https://refine.dev/docs/examples/
  - POPOSYS 4y ago
    Where can I find docs for the map component?
    - omeraplak 4y ago
      Here's a great example, no need for a custom-made refine and Map component document because with refine's headless approach, you can use Map components as you please. https://github.com/refinedev/refine/blob/next/examples/finefoods-antd/src/components/dashboard/deliveryMap/index.tsx https://github.com/refinedev/refine/blob/next/examples/finef...
      - POPOSYS 4y ago
        Thank you very much for your quick answer! Will study this!
        omeraplak 4y ago
        You're welcome! I'm glad I could help. Let me know if you have any more questions.
fareesh 4y ago
For this use-case I've almost always relied on Rails + custom scaffold generators. There are a few projects like Bullet Train that offer some admin panel features out of the box as well. Is this a way of bringing that functionality to all these other frameworks as well? It seems compelling because the ability to build out crud resources with a single command is a huge accelerator in Rails projects. Are there any videos of someone building projects with this? It's useful to see what takes time an what doesn't before committing to a framework like this.
- omeraplak 4y ago
  The most important feature of refine is being headless by design. No limit on customization, refine works with any custom design or UI framework you favor. For convenience, it ships with ready-made integrations for Ant Design System, Material UI, Mantine, and Chakra UI. We have tutorial for building a fully-functioning CRUD app, from scratch to full launch using refine. Please take a look: https://refine.dev/docs/tutorial/introduction/index/ https://refine.dev/docs/tutorial/introduction/index/
- adrianthedev 4y ago
  Hey. I'm Adrian, author of Avo. Avo is similar to Refine but for Ruby on Rails. It helps developers create CRUD-like applications such as internal tools, admin panels, Content Management Systems and user-facing apps. I love seeing more and more movement in this space. https://avohq.io https://avohq.io
  - fareesh 4y ago
    Looks great - how easy is it to customize, and how flexible are the customizations?
    - adrianthedev 4y ago
      You probably heard the phrase "made by developers for developers", so I won't bore you to death with it, but that's the gist of it. I probably built 100 admin panels in the past and I know what I would need in one, so I built a lot of "escape hatches" into Avo so you can extend it and create your own thing.
batuhanw 4y ago
Does it support GraphQL APIs?
- omeraplak 4y ago
  Yes, we support it, you can find the documentation here https://refine.dev/docs/advanced-tutorials/data-provider/graphql/ https://refine.dev/docs/advanced-tutorials/data-provider/gra.... Are you experienced with GraphQL? If you can provide feedback, we would greatly appreciate it.
johnz 4y ago
Over the last two weeks, I've been evaluating and trying out different headless CMSes, databases, and libraries like Refine to power my simple personal site. I spent the most time with Refine and Supabase, and up until a few days ago, it seemed like Refine would be what I stayed with. I think what Refine offers out of the box is excellent. The ability to stand up a custom CRUD interface with low effort is really useful. I do appreciate what the Refine team is building. However, when it came time to add customization or additional features, I spent more time stumbling through the docs than building what I wanted/needed. A few days ago, I ripped refine out of my project for a custom-built interface using a component library called Mantine. Maybe it's because I've been building stuff like this for a long time, but I built exactly what I needed without Refine in less time than it took to get to the same spot with Refine. The new swizzle command could have solved some of my issues, but I'm too far gone to go back.
- omeraplak 4y ago
  Thank you very much for your time and feedback! Your experience with Refine is inspiring for us. Can you tell us exactly where we lost you? Was the learning curve too steep or were you unable to accomplish what you wanted to? To be honest, we are working very hard to not let the experience you had to be felt by developers and it is clear that we need to work more. Thank you for giving us the opportunity to improve ourselves.
- deleted 4y ago
  [deleted]
hobonumber1 4y ago
This looks great! I have been wishing for a headless CRUD framework for React. i have to dive deeper into this, but it looks promising.
- omeraplak 4y ago
  Being able to convince others is amazing! Have you used a similar framework before? Thank you
- reactspa 4y ago
  I've read the word "headless" used in different contexts. How would you define a "headless" CRUD framework please? Thanks in advance.
  - omeraplak 4y ago
    In a front-end project, being "headless" means that all functions can work without dependence on any user interface elements/components. With Refine, you can use features such as data management, authentication, real-time functionality, audit-logging, internationalization, and access control with any user interface element/component of your choice. This means that Refine does not restrict you in terms of styling and customization.
    - reactspa 4y ago
      Is there any difference between "server side" and "headless" in this context? https://www.google.com/search?q=server+side+react+framework https://www.google.com/search?q=server+side+react+framework
      - omeraplak 4y ago
        In this context, "server side" and "headless" refer to different things. "Server side rendering" (SSR) or "client side rendering" (CSR) refer to a method of rendering a website or application, while "headless" refers to the architecture of the application's business logic. For more details: https://refine.dev/docs/#what-do-you-mean-by-headless- https://refine.dev/docs/#what-do-you-mean-by-headless-
ngellner 4y ago
[dead]
jsmastery 4y ago
Congratulations to the entire refine team on the launch of the new features! It's impressive to see how much the framework has grown and evolved since its inception. At the JavaScript Mastery team, we are looking forward to utilizing all of the benefits of refine in an upcoming video. Keep up the great work!
- omeraplak 4y ago
  Thank you for your kind words and congratulations! We are thrilled to see the positive response to our new features and are proud of all the progress we've made since launching refine. We appreciate the interest from the JavaScript Mastery team and look forward to seeing how you utilize our framework in your upcoming video. We will continue to work hard to improve and enhance refine for our users.
dessireugarte 4y ago
Great work refine team!
- omeraplak 4y ago
  Thank you, we appreciate your kind words!
Strift 4y ago
I'm not too much into React but this seems like the kind of tools that can massively increase productivity. I can see open-source being a good source of both adoption and virtuousness as well. Very cool!
- omeraplak 4y ago
  Thank you, we appreciate your kind words!

102 points by salihozdemir 4y ago

Hello HN , here is Omer. I'm the Co-founder & CTO of refine. Today we are celebrating the new features of refine with this launch event. Last year was a landmark year for us since we watched refine grow from zero and establish itself as a prominent React framework. It all started with a single question two years ago: "Is it possible for a low-code web framework to quickly generate CRUD applications while still allowing custom styling, logic and workflow?". None of the existing solutions could give us the amount of flexibility that we needed, so we started building one from scratch. Today refine evolved into a full-blown framework for building CRUD applications like admin panels, dashboards, internal tools, and storefronts. It eliminates the repetitive tasks demanded by CRUD operations and saves days of development time. With the new release, we add two new features to refine core 1- Inferencer @pankod/refine-inferencer is a package that provides a way to automatically generate views for resources based on the data structure. The aim is to reduce the amount of time spent on creating views for resources by generating the code automatically that can be customized easily. 2- Swizzle The swizzle is a command in refine-cli that allows you to customize the refine's supported components and data providers. It allows you to eject selected files from the refine packages and modify depending on your needs. Unique "Headless UI" approach enables developers to use any UI framework or custom design without constraints. For convenience, refine is shipped with ready-made integrations with three powerful UI frameworks: Ant Design, Material UI & Mantine. Being totally backend agnostic, refine can connect to 15+ backend services out-of-the-box, incl. custom REST & GraphQL API's. With refine, developers have 100% control over their projects as they may build, style and deploy the way they like. And of course, we want to know what you think about refine and any ideas or suggestions you may have for our solution. Please write them and we'll be happy to join the conversation.

revskill 4y ago
Thanks you very much. I love Refine ideas and the abstraction (Data Provider is cooool). Would love to improve the examples though: - Example code for backend Rest API to be used with Refine (i'm confused about specification on openapi request params/response) - Example code on only using data provider package (for example, we don't need to use refine routing provider, auth provider,...)
- omeraplak 4y ago
  Yes, this is definitely an area where we want to improve. Thank you for your feedback. edit: By the way, what is your opinion on the "inferencer" package?
  - revskill 4y ago
    I've not used much the inference package. Let me check it first.
    - omeraplak 4y ago
      @pankod/refine-inferencer is an experimental package and it is now in the early stages of development. We are working on improving the package and adding new features. Document: https://refine.dev/docs/packages/documentation/inferencer/ https://refine.dev/docs/packages/documentation/inferencer/ If you have any suggestions or feedback, please let us know in the GitHub Discussions https://github.com/refinedev/refine/discussions/3046 https://github.com/refinedev/refine/discussions/3046
      - revskill 4y ago
        I need one more crucial feature, it's row grouping with aggregation in table view.
        omeraplak 4y ago
        If your table component can do that, fine for Refine. Which UI framework are you using?
        revskill 4y ago
        If you can have example with this https://infinite-table.com/ https://infinite-table.com/ , the grouping feature, that would be helpful !
rjzzleep 4y ago
It looks good. I checked how long this has been around. Two years seems longer than most react apps. Couple of questions: 1. How complex was the upgrade path between major versions? 2. Are you guys cashflow positive? 3. What are your competitors? Thanks
- omeraplak 4y ago
  Thank you so much. 1. We've released a codemod when releasing v3 and allowed users to upgrade easily from v2 to v3 and we're planning to do the same for v4 as well. https://refine.dev/docs/migration-guide/ https://refine.dev/docs/migration-guide/ 2. We got a similar question before. You can check it out here: https://github.com/refinedev/refine/discussions/3261 https://github.com/refinedev/refine/discussions/3261 3. We have detailed comparison table for similar tools: https://refine.dev/docs/comparison/ https://refine.dev/docs/comparison/ Have you ever tried similar tools for building a CRUD app before? Can you suggest any for us to take a look?
  - edgyquant 4y ago
    You should just answer the question instead of pointing users to GitHub. The answer is no, they are not and they plan on selling features in the future.
    - omeraplak 4y ago
      Thank you for your warning and comment. I shared the link because I thought people could contribute to the discussion on GitHub. To avoid any misunderstandings, I want to clarify that Refine will always remain open source and will continue to be developed with the community. So we are adopting the "open core" model which is very popular and widely accepted in the open source ecosystem. To reiterate, Refine will always remain open-source.

venkatkms 4y ago

It would be good to know how this compares against React Admin Enterprise ( https://marmelab.com/ra-enterprise/ https://marmelab.com/ra-enterprise/ )

omeraplak 4y ago
refine is %100 open source. It provides all enterprise features of React Admin for free. Additionaly, refine has more features that React Admin enterprise doesn't have. You can take a look at the comparison table: https://refine.dev/docs/comparison/ https://refine.dev/docs/comparison/
- dalmo3 4y ago
  It sounds too good to be true when your product is better than every competitor in every aspect. What are refine's weakest points?
  - omeraplak 4y ago
    In my opinion, trying to handle routing is the weakest point. However, we are working on this. With refine v4 , we'll remove the router dependecies and you will be able to easily integrate refine to your existing app.
  - venkatkms 4y ago
    Looked a bit more in detail it seems a few features like below are comparably deficient vs React Admin Enterprise: 1. Relationships management (particularly many to many) 2. Persistence of preferences like sort and filters 3. No builtin UI components to display audit logs PS: i am not associated with them in anyway. Just looking for versatility in tools in this space. Also XavaPro (java specific and server generated pages design) is much more feature rich
- maxloh 4y ago
  How do you plan to make money with it?

tessela 4y ago

I would like to see examples of integrating refine in a existing app.

omeraplak 4y ago
Here is complete CRUD admin panel example built using refine: https://example.admin.refine.dev/ https://example.admin.refine.dev/ You can take a look at the other real world examples with the source codes from here: https://refine.dev/examples/ https://refine.dev/examples/ Additionally the full examples for refine feature implementations: https://refine.dev/docs/examples/ https://refine.dev/docs/examples/
- POPOSYS 4y ago
  Where can I find docs for the map component?
  - omeraplak 4y ago
    Here's a great example, no need for a custom-made refine and Map component document because with refine's headless approach, you can use Map components as you please. https://github.com/refinedev/refine/blob/next/examples/finefoods-antd/src/components/dashboard/deliveryMap/index.tsx https://github.com/refinedev/refine/blob/next/examples/finef...
    - POPOSYS 4y ago
      Thank you very much for your quick answer! Will study this!
      - omeraplak 4y ago
        You're welcome! I'm glad I could help. Let me know if you have any more questions.

fareesh 4y ago

For this use-case I've almost always relied on Rails + custom scaffold generators. There are a few projects like Bullet Train that offer some admin panel features out of the box as well. Is this a way of bringing that functionality to all these other frameworks as well? It seems compelling because the ability to build out crud resources with a single command is a huge accelerator in Rails projects. Are there any videos of someone building projects with this? It's useful to see what takes time an what doesn't before committing to a framework like this.

omeraplak 4y ago
The most important feature of refine is being headless by design. No limit on customization, refine works with any custom design or UI framework you favor. For convenience, it ships with ready-made integrations for Ant Design System, Material UI, Mantine, and Chakra UI. We have tutorial for building a fully-functioning CRUD app, from scratch to full launch using refine. Please take a look: https://refine.dev/docs/tutorial/introduction/index/ https://refine.dev/docs/tutorial/introduction/index/
adrianthedev 4y ago
Hey. I'm Adrian, author of Avo. Avo is similar to Refine but for Ruby on Rails. It helps developers create CRUD-like applications such as internal tools, admin panels, Content Management Systems and user-facing apps. I love seeing more and more movement in this space. https://avohq.io https://avohq.io
- fareesh 4y ago
  Looks great - how easy is it to customize, and how flexible are the customizations?
  - adrianthedev 4y ago
    You probably heard the phrase "made by developers for developers", so I won't bore you to death with it, but that's the gist of it. I probably built 100 admin panels in the past and I know what I would need in one, so I built a lot of "escape hatches" into Avo so you can extend it and create your own thing.

batuhanw 4y ago

Does it support GraphQL APIs?

omeraplak 4y ago
Yes, we support it, you can find the documentation here https://refine.dev/docs/advanced-tutorials/data-provider/graphql/ https://refine.dev/docs/advanced-tutorials/data-provider/gra.... Are you experienced with GraphQL? If you can provide feedback, we would greatly appreciate it.

johnz 4y ago

Over the last two weeks, I've been evaluating and trying out different headless CMSes, databases, and libraries like Refine to power my simple personal site. I spent the most time with Refine and Supabase, and up until a few days ago, it seemed like Refine would be what I stayed with. I think what Refine offers out of the box is excellent. The ability to stand up a custom CRUD interface with low effort is really useful. I do appreciate what the Refine team is building. However, when it came time to add customization or additional features, I spent more time stumbling through the docs than building what I wanted/needed. A few days ago, I ripped refine out of my project for a custom-built interface using a component library called Mantine. Maybe it's because I've been building stuff like this for a long time, but I built exactly what I needed without Refine in less time than it took to get to the same spot with Refine. The new swizzle command could have solved some of my issues, but I'm too far gone to go back.

omeraplak 4y ago
Thank you very much for your time and feedback! Your experience with Refine is inspiring for us. Can you tell us exactly where we lost you? Was the learning curve too steep or were you unable to accomplish what you wanted to? To be honest, we are working very hard to not let the experience you had to be felt by developers and it is clear that we need to work more. Thank you for giving us the opportunity to improve ourselves.
deleted 4y ago
[deleted]

hobonumber1 4y ago

This looks great! I have been wishing for a headless CRUD framework for React. i have to dive deeper into this, but it looks promising.

omeraplak 4y ago
Being able to convince others is amazing! Have you used a similar framework before? Thank you
reactspa 4y ago
I've read the word "headless" used in different contexts. How would you define a "headless" CRUD framework please? Thanks in advance.
- omeraplak 4y ago
  In a front-end project, being "headless" means that all functions can work without dependence on any user interface elements/components. With Refine, you can use features such as data management, authentication, real-time functionality, audit-logging, internationalization, and access control with any user interface element/component of your choice. This means that Refine does not restrict you in terms of styling and customization.
  - reactspa 4y ago
    Is there any difference between "server side" and "headless" in this context? https://www.google.com/search?q=server+side+react+framework https://www.google.com/search?q=server+side+react+framework
    - omeraplak 4y ago
      In this context, "server side" and "headless" refer to different things. "Server side rendering" (SSR) or "client side rendering" (CSR) refer to a method of rendering a website or application, while "headless" refers to the architecture of the application's business logic. For more details: https://refine.dev/docs/#what-do-you-mean-by-headless- https://refine.dev/docs/#what-do-you-mean-by-headless-

ngellner 4y ago

[dead]

jsmastery 4y ago

Congratulations to the entire refine team on the launch of the new features! It's impressive to see how much the framework has grown and evolved since its inception. At the JavaScript Mastery team, we are looking forward to utilizing all of the benefits of refine in an upcoming video. Keep up the great work!

omeraplak 4y ago
Thank you for your kind words and congratulations! We are thrilled to see the positive response to our new features and are proud of all the progress we've made since launching refine. We appreciate the interest from the JavaScript Mastery team and look forward to seeing how you utilize our framework in your upcoming video. We will continue to work hard to improve and enhance refine for our users.

dessireugarte 4y ago

Great work refine team!

omeraplak 4y ago
Thank you, we appreciate your kind words!

Strift 4y ago

I'm not too much into React but this seems like the kind of tools that can massively increase productivity. I can see open-source being a good source of both adoption and virtuousness as well. Very cool!

omeraplak 4y ago
Thank you, we appreciate your kind words!