Philosophy

When you first see this library, one of the first questions you might ask yourself is why another component library; don't we have enough? It's true, there are a LOT of component libraries out there such as MUI, AntD, and the list continues. These libraries are very mature and can help you build a great looking application without too much work, but they come with a number of drawbacks. Let's dive into why we created this now.

Design Style Opinions

Libraries such as MUI look great out of the box, but they are extremely opinionated about their design philosophy and that's OK. Those design philosophies can help you build a nice looking application very quickly without the need for a designer.

The problem is if you want a more customized design than say just changing some colors, it becomes more of a challenge and the benefits begin to dwindle. Most all offer customization ability but those customizations like disabling the ripple of a material button come at a cost:

• Download bloat (ripples/animations are hard)
• Internal breaking changes (once you start customizing internal styles which almost always happens)
• Increased complexity with overrides

By engineering reablocks to use TailwindCSS it lets you avoid all the nasty overrides and focus on building the product your team needs.

CSS-IN-JS

When CSS-IN-JS first came out, it was a game changer. It allowed developers the ability to write runtime CSS which allowed us to break away from the build time variables we had in LESS/SASS. The ability to do calculations on sizes, dynamically change colors for dark themes and provide a nice type-safe API.

CSS has matured so much since then, literally almost everything I listed above and more can be done with native CSS now. By using the native CSS you also get some other advantages:

• Better performance
• Standard language for styling no matter the project
• Separation of concerns (styles and code belong in different places)

To this day, almost every React-based component library still uses CSS-IN-JS. There are many die-hard CSS-IN-JS fans out there that could debate this all day long, it's almost like debating React vs Angular vs Vue though.

Reablocks is designed to use Tailwind CSS for its styling solution. Tailwind is a utility-first CSS framework that provides a standard way to style components and is very easy to learn. It's also very easy to customize and has a great community behind it. We believe this is the best solution for styling components.

Documentation

Almost all of the libraries I mentioned have great documentation and examples. The challenge begins once you start customizing the components. Some of them let you change the colors inline but if you start adding custom CSS styles and such all that goes out the window. Outside of that, maintaining legacy documentation for open-source developers is difficult at each version point.

Often times developers will take the examples from the libraries' website and build out Storybook stories for them so you can have the examples customized to your usage.

Reablocks' documentation is all built inside Storybook. By doing this, all the documentation is in an easy to consume and standard format that any consumer can import into their Storybook. We've even built Storybook story helpers and specific documentation on how to set it up in your application.

Reablocks is the first component library to take a Storybook-first approach. This is a core principle of ours so we are dedicated to making this as smooth as possible.

Agnostic Framework Pitfalls

A recent trend in the UI component libraries is to make vanilla JavaScript components and then create wrappers for them. As an open-source developer, I understand the reasoning, however, it comes with sacrifices.

• Developers are not able to take advantage of native capabilities and instead monkey patch to support the various frameworks. This can result in oddities due to multiple scripts accessing the DOM not in sync with each other.
• The APIs have to make sacrifices, for example, it becomes more difficult to design APIs that take advantage of some of the awesome React features like JSX inputs.
• The documentation and examples suffer because it's so much to maintain.
• Download bloat is increased because you have to handle things that React just does manually resulting in a larger download size.

Reablocks is dedicated to React and we are going to be focusing on it exclusively.

Animations

Most of the libraries have their own animation frameworks they use internally (or don't even do animations natively). Animations are not just important for user experience but can provide valuable experiences to see how data changes over time.

The challenge begins when you need to synchronize animations between all the various components. For example, you have a drawer component and when it opens you want to animate in the child components. Usually developers handle this by doing `setTimeout`` for the duration the drawer takes to open which is bad for a few reasons.

It's brittle since the timing is based on the ideal system that can animate at that speed This assumes the animations are all linear, good animations are spring-based since they feel more natural

Reablocks (and all the Reaviz projects for that matter) are all built on framer-motion (opens in a new tab). Framer Motion is amazing, it performs spring (and linear if you want) based animations that happen at 60 FPS and can synchronize between desperate components. It's a big bet, but Framer-Motion has been out for a while (previously named React-Pose and based on Popmotion) and is supported by Framer, so as far as bets are concerned in technology, it's about as good one as you can make.

Enterprise-focused

One unique attribute of this library is that we aren't trying to make a library that is everything to everyone. We are focusing on only on enterprise web applications and more specifically data-intensive applications. You won't find any hero banners or similar components, instead components like displaying large numbers, formatting data sizes, and so on.

Wrap up

We hope you enjoy our hard work, please share with others and let's make the web a better place.