Comment by tony | Hacker News Reader

Comment by tony | Hacker News Reader

Use it on a few websites (https://www.hskflashcards.com, https://parataxic.org). Like it.

- TypeScript

- WAI ARIA / a11y for accessibility

- Passthrough styling props via Styled System: https://styled-system.com/

- Passthrough responsive conditional props: https://chakra-ui.com/responsive-styles

- Light / Dark: https://chakra-ui.com/color-mode (but it doesn't work on Gatsby: https://github.com/chakra-ui/chakra-ui/issues/305)

- I eschew some of the helper components like <Flex>. You are fine just using plain old Box as the shorthand props in Flex component don't add much. You can just pass display="flex" into a Box.

- Passing hover/active styling requires using PseudoBox (or a component deriving from it), so <Box> - or anything built on top of it - can't have hover colors directly. This means configuration for some components require additional wrappers

- Active! https://github.com/chakra-ui/chakra-ui

- Author is very courteous (if my limited interaction with him on the tracker is any indicator!) If you use Chakra and like it, you can support the creator via https://www.patreon.com/segunadebayo

if the above kind of comparison items are interesting to you then you might like https://github.com/dimitropoulos/react-ui-roundup

What does it give you over simple server-side rendered templates?

I have never found sever side rendered templates simplate on harder and more complex web apps. But that's me, maybe it just does not map with your mental model, or maybe I started php and django with the wrong foot. All I know is that for the moment I find react simpler to reason with. I looked a bit at angular and angular, and they also seemed simpler than SSR templates.

Chakra UI is a widget toolkit, so it's not on the same level of comparison.

React will use JSX and can use all the cool new JS stuff, e.g. module imports, template literals. With webpack there's automated code splitting. The toolchain is under very active development (from react, to webpack, to babel, to new dependencies I've never heard of - aside: a downside is the dependency graph in node can be crazy)

If your site is simple enough, server site templates will do. For anything non-trivial, where there's a lot of reusability and its very async / API heavy, the benefits shift dramatically to including a frontend framework.

Regarding server side templates, there's limitations to how far templates engines (e.g. django templates / jinja2) can take you. Extending templates works when done carefully, as does overriding blocks. Anything non-trivial becomes very hard to manage - there's no type safety, setting variables is burdensome.

On parataxic, there's no server. It's all static files served from cloudfront via Gatsby (to get an idea of this: https://jamstack.org/)

Reply on news.ycombinator.com