Modern 2020 React stack, or how we switched away from Angular

Photo by Domenico Loia on Unsplash

The essentials

Intro — our R&D culture

Recruiting and React

  • We loved the all-in-one aspect of Angular at first. But it comes with a price. And trying to go where Angular does not want you to go is often a tortuous journey. We are looking for a bit more flexibility in our next stack.
  • The overall heaviness of the framework. We should count how many hours we’ve lost fixing the module imports and declarations in our Angular apps but that’s probably more than what we signed up for at the beginning.

How we evaluated — meet the hackathon

Developers had 2 days to try out a set of libraries

The results (and rationale for each choice)

Routing

State Management

Handling your own state management using Hooks & Context

Using a state management lib

Graphql with the Apollo client cache

Decision:

UI Library

  • Do we like the overall look and feel of the library
  • Most importantly, how easy is it to customise everything: the theme, the components, override the default behaviours, etc.
  • Similar to Bootstrap, it still gives a very “Googlish” looking aspect to your application. This might not be an issue for most people, but we would like something more neutral going forward.
  • Deep customisation is hard. Material components come with a lot of stuff around them and, as with Angular, it works well until you need to modify something that was not meant to be modified
  • It’s BIG! And we’re not talking about the bundle size, but the actual components. They all look massive, and it’s often pretty hard to tweak the core CSS to make them not take half of your screen each time (yes we’re looking at you, Outline Text Input).

Decision:

  • Their list of components is ridiculously massive. As a B2B company we don’t really have a strong need for a custom design system (like Storybook) so the more components we can get out of a single lib, the better. Ant Design nails this point, where Chakra UI came a bit shy (not really a lot of “complex” components out of the box)
  • It’s easy to customise. Even though using a custom theme required a bit of hacking around the webpack config, using Styled Components to extend the style of Ant components was really smooth
  • The overall look-and-feel is really nice. It’s all about tastes and colours here, but as we said we wanted to get a bit away from the “Google look” of the Material lib.
  • While not always perfect, the documentation provides us with a ton of different examples and code samples

Styling

Decision:

  • Everything related to the layout and general look & feel of the application: TailwindCSS
  • Customising Ant components: wrap it inside a Styled Component

Forms

i18n

Date Manipulation

Http client

Testing

Bonus: VSCode docker container

Conclusion

--

--

--

AI-powered Order-To-Cash Platform

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sidetrade Tech Hub

Sidetrade Tech Hub

AI-powered Order-To-Cash Platform

More from Medium

Utilizing Typescript In React

The Good HTML Component

How to create nested dynamic routes using React Router v6