Material UI VS antd

GitHub: https://github.com/mui/material-ui

Material UI GitHub Repository

The most popular CSS-in-JS libraries are styled-components and Emotion. MUI, a React component library, recently released a promising, zero-runtime CSS-in-JS library called Pigment CSS. This article will explore the features and benefits of Pigment CSS, offering a comparison to styled-components and Emotion based on performance, features, developer experience, and community support.

> [0, 1, 2, -1, 10, 11, 12, 13, 14, -1, 26, 27, 28]

What is that supposed to represent in terms of pagination? Are they cursors...?

> I didn't think the code that generated the HTML from that was really worth testing because it was so superficial.

For what it's worth (as a frontend person), pagination is traditionally one of the trickier things for us to make sure is working correctly. Off-by-one mistakes can happen for example (especially with zero-indexed items). Or sometimes the prev/next buttons don't correctly use the same math as the page 1, 2, 3, etc. buttons. It gets even harder if you don't know the total length in the beginning, or if you allow multiple page sizes or sorts/filters, or use lazy loading, etc.

For those reasons I try to use a ready-built lib like MUI where all that is already tested internally (like https://github.com/mui/material-ui/blob/next/packages/mui-ma... or https://github.com/mui/material-ui/blob/next/packages/mui-ba...), but we still add our own automated and manual tests in our own usages.

But then again I'm bad at math and division, lol, so maybe it's just my own weakness.

The first tool we’ll look at is Pigment CSS, a zero-runtime CSS-in-JS library built to extract the co-located styles into separate CSS files during the build phase and eliminate the need for runtime style processing.

🔍 Site ⭐ GitHub

You'll be glad to hear that MUI is zeroing in (pun intended) on a zero runtime solution right now as an alternative to Emotion [0], although that GitHub issue doesn't capture just how far it has come. Expect more soon!

[0] https://github.com/mui/material-ui/issues/38137

GitHub stars: 89.3k GitHub link: https://github.com/mui/material-ui Documentation: https://mui.com/material-ui/getting-started/

6. Ant Design

GitHub: https://github.com/ant-design/ant-design

10. Ant Design A comprehensive design system with a wide variety of ready-to-use components, patterns, and themes optimized for enterprise-level applications. Ant Design:

I also decided to choose a component library antd, so I won't have to reinvent the wheel and can prototype at a faster phase.

Ant Design Ant Design is a comprehensive design system and React UI library for enterprise applications. It provides a wide range of high-quality components and an extensive design language.

Let's start by setting up our Next.js project with all the necessary dependencies. We'll use TypeScript for type safety, Tailwind CSS for styling, Ant Design for UI components, Zod for form validation, and Resend for email functionality.

Ant Design is a comprehensive React UI library that offers a wealth of well-designed, high-quality components. It stands out for its consistency, flexibility, and ease of use, making it an ideal choice for modern web applications. By adopting Ant Design, we aimed to:

Ant Design

What's particularly wrong with it? Looks like pretty standard React, with some custom hooks imported, and clearly defined props.

If you start at the bottom, with the actual component (https://github.com/ant-design/ant-design/blob/master/compone...), the logic is much clearer. Most of the other consts are just definitions that you pass to the component (see documentation at https://ant.design/components/table#table).

And for the long list of imports and such, any modern IDE can parse those for you and easily jump to the source or the type defs.

If you're complaining about how this looks vs traditional OOP code, etc., that's just a stylistic choice Meta made for React codebases a few years back. It actually does make components pretty easy to maintain over the long term because all the core logic is just in one long, flat file. Lots of vertical scrolling, but predictable outcomes and easily refactored chunks. But third parties typically just have to mimic that style. That's not on Ant, that's just how JS code is currently in fashion...

I was using a Chinese website recently based on the “ant design” [^1] library / philosophy. It’s a really UI dense way of doing things and I really enjoyed having everything there without having to go hunting into menus.

[1]: https://ant.design/