New React

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.

Frameworks

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

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!