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

Photo by Domenico Loia on Unsplash

The essentials

Need a solid React stack for your next enterprise-sized application? We’ve setup everything you need to get started into a Github repo available here:

Intro — our R&D culture

When working in Web Development, one question often comes back to mind: what is a viable, modern, extensible and full featured Front end stack that can support one’s ambition in the long run?

Recruiting and React

Right now, at the very least in the Paris area, frontend developers willing to work with Angular are scarce. From our 2019 recruiting campaign, we would say that 70% of the frontend developer candidates we saw branded themselves as React developers, 20% as Vue and 10% as Angular. Being in that situation makes recruiting hard.

  • 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

We spent some time looking at all the possible solutions for each part of our soon-to-be framework, and we narrowed it down to 1 or 2 options. We then organised a 2-day internal hackathon where we gathered 5 developers, with various frontend development expertise, to implement the same application using 2 different stacks.

Developers had 2 days to try out a set of libraries

The results (and rationale for each choice)

After 2 days of hard coding and vigorous debates, we managed to agree on something that everyone felt comfortable with. We’ll try and explain here why:

Routing

State Management

Handling your own state management using Hooks & Context

Simple, quite easy to understand, and it works just fine. Definitely a viable option for a small-to-medium app but probably too “low-level” if you need more state management features for a large app.

Using a state management lib

There are definitely plenty of choices here, but let’s put the spotlight on these 3:

Graphql with the Apollo client cache

When Graphql came out it took the world of Web Development by storm. Working with it on a full Graphql stack feels really smooth, even though the entry cost may seem a bit high if you’ve been used to working with a more classical approach based on REST Apis for a long time.

Decision:

The way Redux managed to incorporate hooks inside their API made using the library much less of pain. Coupled with the very strong community around it and all the existing middlewares (we will be using redux-saga to handle any async actions), we firmly believe Redux is still a very strong choice for an enterprise-sized application in 2020. This article (even though it is from almost 2 years ago) highlights some of the points that helped us take that decision: https://blog.isquaredsoftware.com/2018/03/redux-not-dead-yet/.

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:

Eventually, we decided to go with Ant Design for several reasons:

  • 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:

After working with it for 2 days, everyone agreed that TailwindCSS is really cool. There is a tiny bit of an entry cost if you’re used to write plain CSS but the productivity boost you gain from it is well worth it. Obviously, we cannot use it to customise Ant components so, as said above, we decided to also use Styled Components for that purpose. To sum it up:

  • 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

🥇 Our choice: Jest & Cypress

Bonus: VSCode docker container

Something really cool we found out while doing some research. From the official documentation, this extension allows you to:

Conclusion

When we began this, we thought that plenty of teams would have already done this exercise and written about it. Weirdly enough, it turned out not to be as true as we thought! That’s why we’re happy to share here how this fun experience turned out, and the end results, accessible as a Github repo on our OSS page:

--

--

Views from the software developers, data scientists and other tech experts at Sidetrade — the global AI-powered Order-To-Cash platform: www.sidetrade.com

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

Views from the software developers, data scientists and other tech experts at Sidetrade — the global AI-powered Order-To-Cash platform: www.sidetrade.com