# Research best technologies for React
## Overall framework
From different sources, **next.js** seems to be the best choice still for enterprise level businesses.
**remix.js** is shining in the React community (there are talks in the React summit about it as well), but I don't feel confident enough on it.
This is a good article on the comparison: https://blog.bitsrc.io/remix-vs-next-js-a-detailed-comparison-6ff557f7b41f

## Frontend framework
There are a lot of frontend frameworks for React. I will be listing them here with sources and pros and cons for each of them.
Some articles with more details:
* https://aglowiditsolutions.com/blog/best-react-ui-framework/
* https://dev.to/diogocapela/5-best-react-ui-frameworks-to-build-web-applications-faster-in-2022-48eh
* https://maxrozen.com/guide-to-component-ui-libraries-react
### [Chakra UI](https://chakra-ui.com/)
**Sources:**
- https://chakra-ui.com/guides/comparison

**Pros:**
1. Easy to modify components and make them customizable without massive css files
2. Easy integration with Framer Motion without any extra steps
3. Wonderful handling of media queries
4. React-style (and React Native-style) props handling for components (meaning we don't need to use classes or style prop to style them, just props directly)
5. Easy to handle themes changes / components / fonts changes trough their integrated api
7. Easy for someone with emotion or styled components experience to jump into ChakraUI, meaning React Native people can understand Chakra way better then tailwind
9. Works perfectly with Next.js and SSR in general
11. Follows WAI-ARIA standards for accessibility
12. Handles hover, focus, etc directly in the component

**Cons:**
1. Lesser known then other UI frameworks (such as tailwind), meaning most likely will not be known to someone who worked on next.js or react before
2. Can create confusing components if not handled properly (due to be able to pass a lot of props to components)
4. Has a pro version with a lot more components which is not forkable https://pro.chakra-ui.com/
5. Due to using css in js performance might take a hit (not sure about this, I don't see clear reports like for Ant design)

### [Material UI](https://mui.com/)
**Sources:**
* https://www.toptal.com/designers/ui/why-use-material-design
* https://www.reddit.com/r/reactjs/comments/mpkea6/comment/hrue7h8/?utm_source=share&utm_medium=web2x&context=3

**Pros:**
1. Standardized style by material design
2. One of if not the most famous open source library for UI components in React

**Cons:**
1. The brand identity is strictly connected to the Android/Google standards
2. In my experience Material UI is harder to implement then other alternatives and lacks behind some core features that are easily implemented with AntDesign or ChakraUI
3. Performance might take a hit due to rendering eccessive DOM nodes
4. Requires extra steps and some css cuts to work with SSR, see https://itnext.io/next-js-with-material-ui-7a7f6485f671
5. (From sources) Accessibility is lacking

**I like the conclusion of my first cited source:**
"If an app is being built primarily for the Android platform, then using Material Design is an easy choice. Because of Google’s widespread adoption, any app based on Material Design principles is going to feel like a native app.

That said, there are plenty of other use cases outside of the Android platform where Material Design is a solid choice. As the design system matures even further, those situations are bound to increase. Designers should, at the very least, familiarize themselves with the guidelines so that they can determine for themselves when it’s appropriate to use Material Design, and when other systems might be better suited."

### [Ant Design](https://ant.design/)
**Pros**
1. Larger support then other libraries but not as confusing as Material UI
2. Huge amount of documentation

**Cons**
1. Massive amount of files, sizable performances hit are expected
3. Pro version is locked behind paywall and not open source (we can't fork it)

### [Tailwind CSS](https://tailwindcss.com/)
**Sources**
* https://betterprogramming.pub/tailwind-css-first-impressions-pros-and-cons-f36d6ff38ae0

**Pros**
1. Huge amount of users
2. Easy to use for someone coming from normal css or bootstrap
3. It almost always has talks during react summits
4. Almost entierly removes the need for "Standard" CSS by using classes for everything
5. Easier to develop for different screen sizes
6. Handles hover, focus, etc directly in the component
7. Tailwind UI seems to be a good component library using tailwind https://tailwindui.com/

**Cons**
1. Payment is needed for Tailwind pro and is locked, meaning we can't fork it
2. No standard components to start with, we need to find a library that builds on it or build them manually from html tags
3. Hard to pick up (need to remember different class names), I will have to study a bit before starting to get the hang of it
4. Long class names for highly styled components