3 ms·

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

by tony 6y ago

Use it on a few websites (https://www.hskflashcards.com https://www.hskflashcards.com, https://parataxic.org https://parataxic.org). Like it. - TypeScript - WAI ARIA / a11y for accessibility - Passthrough styling props via Styled System: https://styled-system.com/ https://styled-system.com/ - Passthrough responsive conditional props: https://chakra-ui.com/responsive-styles https://chakra-ui.com/responsive-styles - Light / Dark: https://chakra-ui.com/color-mode https://chakra-ui.com/color-mode (but it doesn't work on Gatsby: https://github.com/chakra-ui/chakra-ui/issues/305 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 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 https://www.patreon.com/segunadebayo

founderling 6y ago
What does it give you over simple server-side rendered templates?
- rat9988 6y ago
  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.
- tony 6y ago
  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/ https://jamstack.org/)
dimitropoulos 6y ago
if the above kind of comparison items are interesting to you then you might like https://github.com/dimitropoulos/react-ui-roundup https://github.com/dimitropoulos/react-ui-roundup

by tony 6y ago

founderling 6y ago

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

rat9988 6y ago
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.
tony 6y ago
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/ https://jamstack.org/)

dimitropoulos 6y ago

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