DEV Community

Cover image for Front-end development (React in this case) and the SOLID principles
Chris Mathurin
Chris Mathurin

Posted on

Front-end development (React in this case) and the SOLID principles

Having been a full-stack developer for a number of years now, I have mainly seen SOLID mentioned (let alone enforced) when working on back-end code. Maybe a few years ago it was harder to implement, but we have libraries and framework such as Knockout, Angular, Vue and React, which should make this at least a bit easier.

"Is React SOLID?" is a short article about how React allows you to use the SOLID principles. As React is a library, it does not force you to apply any principles...

What does SOLID stand for?*

SOLID is an acronym build by the first letter of 5 object-oriented programming design principles. The basic idea is, if you follow these principles, your software gets better.

Single responsibility principle

Open/closed principle

Liskov substitution principle

Interface segregation principle

Dependency inversion principle

In case you need a reminder, here's a link to a good intro.

The conclusion of the article is:

*"While React doesn't force the principles onto you, at least it often allows you to follow them. Sometimes it gets easier because of JavaScript, sometimes JavaScript makes it harder, but overall it is possible to write SOLID applications with React."

As a C# developer, I definitely find it is much easier to apply SOLID to back-end code, probably because I've spent most of my time working on back-end code.

I am currently learning React, well at least trying... I know that I'll try to follow at least Single Responsibility and Open/Close principle. I am not so sure about Dependency Inversion, as front-end testing makes it much easier to test and mock your code, wherein C# you would be required abstract things using interfaces with the help of some DI mechanism. Liskov substitution perhaps, but Interface segregation probably not.

I did a spike to find out ways to implement dependency injection. Some of the things I looked into were:

  • InversifyJS
  • Redux Observable
  • Using the module system
  • PropTypes
  • Redux

As we are using Redux to manage states, it made sense for us to use it for DI where (and if) required. We are not currently enforcing the use of TypeScript in our current project, but it is something that we want to adopt as we previously trialled it while working on an Angular SPA. Using TypeScript would make applying SOLID much easier and more aligned with C#, which I think is great. C# developers should find it familiar and front-end devs would be exposed to concepts already used in C#. Maybe a good path into full-stack for those interested?

Any SOLID and/or TypeScript fans in the building? If you have used it, what is your experience, good or bad? And are you a full-stack or front-end dev?

*Is React SOLID? (From a fellow member :)

Top comments (0)