November 23, 2021 (a year ago)
Professional changes recently have exposed me to new thinkers in the React space, which I appreciate. There is so much to a framework ecosystem to explore, and new ways to deliver better products quicker.
We are in a discovery phase of moving away from our previous frameworks, Ant and Spectrum (don't use these), and needed a new component library system to build on. We decided on Chakra UI, and this decision from the team was a fantastic one. I had never heard of Chakra or styled-system libraries before, and it was eye-opening to me. Move over emotion and styled-components, here is a solution for CSS that React should have implemented in the first place -- CSS as props:
<Box position="absolute" width="200px"> </Box>
The other benefit of Chakra is its theming system, which supports themes of custom components.
Chakra, although it is a great framework, has an annoying habit of breaking things without warning on minor or even patch releases (https://github.com/chakra-ui/chakra-ui/issues/4987). Another good choice seems to be Mantine or Rebass, although I haven't used these.
Atomic design is a decent system. Basically, under Atomic Design, components are broken into Atoms (smallest components), Molecules (slightly bigger), Organisms, etc. Sound needlessly chemical? It absolutely is. Atomic Design is a system that sounds like a design kid at school who took a chemistry lesson.
My biggest irk with Atomic Design is that it clashes significantly with feature-driven folders (i.e. Domain-driven development) when parts of a feature are Atoms, and parts are molecules.
Atoms --> nav --> Avatar Molecules --> nav --> Navbar
It is however, very popular, so if you have to do what I did and just accept Atomic Design is an inevitable import, then that is not a bad tradeoff to have to make.
More to come!