Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

ant.design

Post reply on HN
Print view View original

51–60 of 107 posts

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

#51

Post by mxstbr »

Zalastax wrote: post #48
mxstbr wrote: post #37

Earlier quoted context omitted.

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 perf…

Would you mind chiming into that issue with what you imagine? I hadn't thought about caching yet, that's a good use-case for a separate CSS file!

We also almost have a proper server-side rendering API[0], in case you haven't seen that PR before. Should be released very soon!

[0]: https://github.com/styled-components/styled-components/pull/...

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

#53

Post by sidi »

secoif wrote: 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 fail to understand this criticism. React Components expose a class hierarchy which can be namespaced well by their designers (if Antd isn't already doing this). Extending / theming with your specific CSS pre-processor is then pretty straightforward.

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

#54

Post by TomMarius »

dczot wrote: post #28
electic wrote: post #12

I was wondering if someone who is good at JS can compare this to BluePrint[1]? [1] https://github.com/palantir/blueprint

Blueprint is meant for desktop applications. For example, Electron apps. You'll notice Blueprint tries to give that desktop app feel, versus Antd, which does not.

It isn't, according to their own words[0], they've never used Blueprint in an Electron (or other desktop) app.

[0] https://github.com/palantir/blueprint/issues/202#issuecommen...

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

#55

Post by benjy_c »

sallar wrote: 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.

Try https://ant.design/docs/react/customize-theme

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

#57

Post by Zalastax »

mxstbr wrote: post #51
Zalastax wrote: post #48

Earlier quoted context omitted.

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 perf…

Would you mind chiming into that issue with what you imagine? I hadn't thought about caching yet, that's a good use-case for a separate CSS file! We also almost have a proper server-side rendering API[0], in case you haven't seen that PR before. Should be released very soon! [0]: https://github.com/styled-components/styled-components/pull/...

I think the work you are doing right can be a stepping stone for something great! The advantages of more traditional methods of creating CSS are ahead-of-time-compilation, splitting/bundling (combine common chunks to achieve low cache invalidation, low transfer size, and high cache hits with few files), and no waiting for the JS-engine to parse and convert your internal data structure. SPA-SSR is in general a lot more CPU-heavy than the more traditional approach of instantiating templates. We need to find ways of minimising the redundant calculations performed by the server to regain the performance we lost in the transition from templates to SPA-SSR. A source code transformation that extracts CSS and removes static JS is one such step. The SSR API is a good start but completely trashes cache + creates a large .html each time you reload. The .html returned can most often not be cached so we should strive to minimise its size. The problem of caching/minimising server load is not the easiest to solve but we should be long on our way if we can analyse/signal what parts are static and which are dynamic.

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

#60

Post by just-boris »

mxstbr wrote: post #37
secoif wrote: 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…

Hello!

I've been using Antd components for the last year in some my project. All components are also available here[0] as single modules for better reusability and customization.

Currently, I have solved all my theming goals with Plain CSS. For each component, that I'd like to customize I created a wrapper

   import Slider from 'rc-slider';

   function StyledSlider(props) {
      return 
   }
Then in CSS

   .my-slider .rc-slider-track {
      background: #FFDF66;
   }
(This is a very simplified example, just shows the way).

I have read about styled-components, but I don't understand how it would help me with theming. I don't think that rewriting every component from LESS to styled-components to make possible to use ThemeProvider will be an option because it doesn't give you any benefits comparing with customization guide[1], that also gives you good enough way to override defaults.

   [0]: https://github.com/react-component/

   [1]: https://ant.design/docs/react/customize-theme
Post reply on HN