rebass VS react-admin

If you are a fan of Styled System, you are sure to love this library, as it was built on top of Styled System. I consider Rebass to be the most unopinionated library on the list, as unlike Material Ui, Semantic UI, and Bootstrap, its components do not come with a default theme, giving you the freedom to add your preferred theme to your application. Its styles are also much easier to override. Rebass is minimalist and was designed with style extension in mind.

Rebass is a simple React UI component library that allows you to create primitive UI components using the Styled System library. With Rebass, you can get started with your design system without having to write a lot of boilerplate code. Emotion, Styled Components, and Styled System are used to create Rebass, a themeable primitive UI component library for React. Because it is designed with Styled System, any Styled System theme object should work with Rebass. Rebass components include a standardized style props API to create larger component libraries.

Nowadays, web development has evolved from the complex work of customizing CSS and HTML to dynamic components where styling is mostly auto-generated with the use of libraries. Rebass is one of the best grid libraries that provides UI components, leaving the developer to focus only on page development. It has more than 7.3k stars and 580 forks on GitHub.

Previously, we used Rebass to implement the design of the admin portal. For the new admin, we started using Tailwind CSS. Tailwind CSS is a CSS framework that lets you focus on creating reusable and beautiful components. In addition, we used RadixUI to use prebuilt components like Modals.

- If you like tailwind/windicss and just need some helpers for interactive elements: \@headlessui/react - If you're dealing with a fuckload of different data types and need to display them all a bit differently with a dashboard: primereact - If you like having a metric ton of utility with your ui library: mantine - You're building extremely data heavy applications and want a compact plug-and-play component library: blueprint - If you like emotion styling and more of a 'lego pieces' approach than full components, and are okay with a very opinionated design system: chakra - You like the 'lego pieces' approach and want to build your own design system from the ground up without much external influence: rebass

There's absolutely nothing wrong with using CSS mixed with your components, but I would suggest (if you haven't already) looking into some alternatives, such as styled-components or Rebass. Not because one is "better" than the other, but it's something to add to your arsenal

More info

> "Are there examples of companies adopting this model?"

Many examples across the industry:

- Autodesk AutoCAD (closed) + Plugins/Addons (many open)

- MS Windows (closed) + Many 3rd party programs (open)

- Github (closed) + Github Actions (open)

- Npm (closed) + Npm modules (mostly open)

> "What are the potential benefits or pitfalls?"

Benefits:

- Harder to replicate, the company gets to keep the "secret sauce" a secret

- Opening up a way to "extend" the platform means 3rd party developers add value to your system

- The core isn't open, so less effort is required to maintain compare to OpenSource

Pitfalls:

- Closed-source is hard to verify, company is essentially saying "trust me bro"

- Less innovation, as user's can't contribute to the core

> "How does it impact community engagement and software adoption?"

There's hardcore FOSS advocates that will hate anything not fully open. But a business has to make money and protect it's IP, having a "closed core" is one way to do that and ensure a sustainable business model.

Another approach is the opposite, open-core + closed-premium-addons. An example of this is "React Admin"

- Open Core -> https://github.com/marmelab/react-admin

- Premium Modules Offering -> https://react-admin-ee.marmelab.com/

Official Website: https://marmelab.com/react-admin/

React-Admin is a React-based frontend framework for building admin applications that talk to a backend data API. It offers a pluggable mechanism for easily adapting to the specific API style of your backend.

With these features, data fetching and forms become significantly easier to implement in React. However, creating a great user experience involves integrating all these hooks, which can be complex. Alternatively, you can use a framework like react-admin where user-friendly forms with optimistic updates are built-in.

31.react-admin

For the admin panel, or basically anything with basic crud operations, take a look at https://marmelab.com/react-admin/. Most frontend devs don't like it, since it limits you somewhat in customization, but at the same time, it is very easy to grasp for someone coming from a backend dev profile, who just wants a crud UI. It even has a guesser template that proposes an initial screen layout based on the response of your api, which you can then copy-paste and finetune. It is really made to make quick admin crud ui's.

We’ve developed a business based on an open-source platform called react-admin. Embracing the open-source spirit, we’re sharing the key performance indicators of this business. We hope it will help other open-source developers build their own business.

React-Admin: As the name suggests, this component library is targeted at building administrator interfaces for B2B (business-to-business), for example, managing users in your system. It is based on Material design and has a neat feature where you can let it “guess” your list views by providing a sample API endpoint for your data.

- We want a solution that creates CRUD (create, read, update, delete) quickly and requires minimal effort. - We want to be able to create some sort of complex interface if the task requires it. - We make cool, beautiful projects, so we want a visually pleasing solution. - We want the solution to be independent of the language on the back-end, because, for example, we started with PHP, Laravel, but over time node.js, Go appeared in the stack. In short, we want fast, beautiful and custom. We've had time to poke at various off-the-shelf solutions that we've been advised. They're good, but: - they are created specifically for some frameworks / languages like laravel, node.js - they can only generate CRUDs with a rigidly defined structure, where you can't implement or customize anything of your own. - they can't be styled Here's what we've been looking at Control Panels for Laravel: https://demo.backpackforlaravel.com/admin/dashboard Not a very pretty solution in our opinion. And the promo page has nice screenshots, not the demo "well such". https://orchid.software/en/ Not particularly functional, but neatly done https://nova.laravel.com They have a beautiful, but rigidly set strutkrua, you can not create castmon interfaces, stylize them. Just do CRUD and that's it. And it's paid https://filamentphp.com/ Analog to Nova, with essentially the same problems. For node.js: https://adminjs.co Nice promo, and the demo is way behind As standalone dashboards: https://strapi.io/ Very cool, but for other purposes. It's more of an entity builder with an interface and API https://pocketbase.io/ Similarly, it's an entity builder with an interface and API https://directus.io/ This is a backend builder. https://filamentphp.com/It is purely for php, you can't customize styles, you can't create your own interfaces. It is possible to create only tables and forms by template, and we remember that we want flexibility, independence from the language and the ability to create their own interfaces and customize them https://flatlogic.com This is also more of a backend builder. Direct competitors: https://github.com/refinedev/refine https://marmelab.com/react-admin/is probably the best solution that is currently on the market, they have been developing for a long time, they are our favorite. To the disadvantages we considered the following points: quite an old project, and somewhere the technology is already outdated, unsympathetic interface, old UI libraries. Huge documentation, it’s simply to create CRUD but hard to work without immersion. After all this there is only one conclusion: you need to do it yourself....