Live data from Hacker News

Show HN: Antd – A set of high-quality React components

ant.design

41–50 of 107 posts

Re: Show HN: Antd – A set of high-quality React components

#41
I don't want to be that guy, and probably will be downvoted for being negative, but why does everything load so slow?

People on this thread are saying it's the network speed thing, coming from china and all, but isn't this supposed to have downloaded all the js modules initially?

I just keep thinking "it would have been much faster and I wouldn't have to wait for these progress bars to finish if it were just a static page".

Why does a documentation need a progress bar anyway?

Re: Show HN: Antd – A set of high-quality React components

#42
post #11

These components look and work great, but unfortunately are a real headache to retheme unless you want to pull in a sass/less toolchain in addition to what you're currently using. This is a pain in the ass if you already have your theme variables set up in one compiles-to-CSS language. There is a standard for CSS variables and a very functional subset of their functionality can be compiled for older browsers at build…

I agreed that it's been an unsolved problem, but I've been looking at 'styled-components' and I think it may be the answer.

At least on paper, it solved the issues you raise. Time will tell I suppose.

Re: Show HN: Antd – A set of high-quality React components

#43
post #11

These components look and work great, but unfortunately are a real headache to retheme unless you want to pull in a sass/less toolchain in addition to what you're currently using. This is a pain in the ass if you already have your theme variables set up in one compiles-to-CSS language. There is a standard for CSS variables and a very functional subset of their functionality can be compiled for older browsers at build…

Theming is a difficult problem. Each component has a couple of visual properties which may depend on the state (hover, focus, error, internal variable). Having a separate variable for each visual property would be a nightmare.

I'm currently working on themes for a similar framework. It's still in early stage but you can see it here: http://cx.codaxy.com/v/master/themes/

Re: Show HN: Antd – A set of high-quality React components

#44

This is the nicest collection of web UX components I've ever seen (better than bootstrap). All of the look and feel (responsiveness and delays) are just right. Animations are not too heavy-handed and add to the experience. Is this by Stripe? The components look just like their dashboard.

See floatrock's comment :).

Re: Show HN: Antd – A set of high-quality React components

#45
post #43
post #11

These components look and work great, but unfortunately are a real headache to retheme unless you want to pull in a sass/less toolchain in addition to what you're currently using. This is a pain in the ass if you already have your theme variables set up in one compiles-to-CSS language. There is a standard for CSS variables and a very functional subset of their functionality can be compiled for older browsers at build…

Theming is a difficult problem. Each component has a couple of visual properties which may depend on the state (hover, focus, error, internal variable). Having a separate variable for each visual property would be a nightmare. I'm currently working on themes for a similar framework. It's still in early stage but you can see it here: http://cx.codaxy.com/v/master/themes/

Today, I was thinking about this problem.

You can separate component Style into - BASE + States classes.

classnames[0] can used to use multiple classes, the classes can be activated using component state. This provides a viable solution for Structure & Style.

[0] https://github.com/JedWatson/classnames

Re: Show HN: Antd – A set of high-quality React components

#46
post #40

I tried using these components in Buttercup (our open source password vault https://github.com/buttercup-pw/buttercup ), but immediately regretted it. It's impossible to theme, the less/css files are dirty and not extensible, defaults mess with your current style, etc. At first look, it looks promising and great but not when you actually try to use it.

Antd is an official implementation of the ant design language. If you read their introduction (https://ant.design/docs/spec/introduce) you'll see they target "middleware" products (or 中台应用, which actually should be translated to internal applications) which don't require customized UI and theming.

Re: Show HN: Antd – A set of high-quality React components

#47
post #45
post #43

Earlier quoted context omitted.

Theming is a difficult problem. Each component has a couple of visual properties which may depend on the state (hover, focus, error, internal variable). Having a separate variable for each visual property would be a nightmare. I'm currently working on themes for a similar framework. It's still in early stage but you can see it here: http://cx.codaxy.com/v/master/themes/

Today, I was thinking about this problem. You can separate component Style into - BASE + States classes. classnames[0] can used to use multiple classes, the classes can be activated using component state. This provides a viable solution for Structure & Style. [0] https://github.com/JedWatson/classnames

This is useful for structuring components internally, but sadly doesn't help solve the theming issue at all :-(

What you want from theming is a global skin. You want users of your component library to be able to say "I want all of my buttons to be red" without having to wrap the component or pass a prop to every component. (simplified example)

Doing so just with class names is very very hard. It's what we've done for ElementalUI (together with Less), but it just doesn't work – it's a pita for users!

Re: Show HN: Antd – A set of high-quality React components

#48
post #37
post #11

These components look and work great, but unfortunately are a real headache to retheme unless you want to pull in a sass/less toolchain in addition to what you're currently using. This is a pain in the ass if you already have your theme variables set up in one compiles-to-CSS language. There is a standard for CSS variables and a very functional subset of their functionality can be compiled for older browsers at build…

Theming is on of the big reasons we saw the need to make styled-components[0] (new lib to style React apps and component libraries) I'm one of the maintainers of ElementalUI, and Glen Maddern, the styled-components co-creator, one of the creators of CSS Modules. One of the biggest downsides of CSS Modules (and, by extension, every other styles in JavaScript library right now) is that theming is simply impossible. Bui…

A big issue I see with CSS-in-JS at this moment is server-side-rendering and caching. You started working on a babel-transform for extracting static styles but seem to have changed your mind about actually extracting that to a css-file[1]. Requiring a JS-parser to apply the styles is the wrong approach but might be a stepping stone as it's probably an easier problem to solve. Separating JS and CSS should improve performance somewhat as the browsers can run the scripting and styling engine separately. In the end I'd like a transformation that creates one CSS-file per JS-file so that common chunks can be combined by webpack, gaining high cache hit percentage on sites that uses reloads. Transformations should also be applied to the JS so that SSR doesn't have to calculate styles each time.

[1]: https://github.com/styled-components/styled-components/issue...

Re: Show HN: Antd – A set of high-quality React components

#49
post #45
post #43

Earlier quoted context omitted.

Theming is a difficult problem. Each component has a couple of visual properties which may depend on the state (hover, focus, error, internal variable). Having a separate variable for each visual property would be a nightmare. I'm currently working on themes for a similar framework. It's still in early stage but you can see it here: http://cx.codaxy.com/v/master/themes/

Today, I was thinking about this problem. You can separate component Style into - BASE + States classes. classnames[0] can used to use multiple classes, the classes can be activated using component state. This provides a viable solution for Structure & Style. [0] https://github.com/JedWatson/classnames

This exact approach is used for Cx components.
Post reply on HN