MVVM architectural pattern for a ReactJS application

Question

I'm a semi-senior react and JavaScript developer, I've made several Universal react application.

Today our CTO told me: Do you use a software architectural pattern for your application?

I've no answer, He points to the Android team which use MVVM for their applications.

I'm searching greedy but not found a trend methodology or example for this situation. I've used Redux, Redux-Saga, React-Context and etc.

I don't know how to explain to our CTO or what is his answer?

Hence: Does a react app really need a software architectural pattern?

Solution

React itself is not particularly opinionated about software architecture. It is a library that facilitates the reusable component paradigm alongside guidelines for managing things like state and data sharing (props). At some point, Facebook described this as the V in MVC but have since moved away from that marketing to call it more abstractly A JavaScript library for building user interfaces.

Of course, the typical tooling associated with React apps does lend itself to something of an architecture when used together.

A couple of potential ways to think about it:

Simple React apps might be just "VVM" or "VC"

MVC is probably the better-known of the two in the development world. The key conceptual difference between a controller (C) and view-model (VM) could be boiled down into: a controller can have many diverse responsibilities, like listening for events and routing them in the right direction. It's the glue that facilitates the functionality of an entire application. A view-model, on the other hand, is simply responsible for gluing the current state of the data to the model.

So Facebook's original use of "V in MVC" could probably just as easily have been "V in MVVM" - the term controller makes more sense in backend development world.

A barebones React app, without Redux, that pulls data directly into components (e.g. fetch's in componentDidMount or leveraging GraphQL) with limited data wrangling of any kind could be called a simple "VVM" model.

View-Model (VM): Component-related code that manages simple state, passes data directly onto View, potentially passes data directly back from View

View (V): How the visuals look (JSX, CSS)

Add some complexity, and you could call it "MVVM"/"MVC"

If you toss in Redux, redux-saga, or even start doing crazy things with simple React component state, you're introducing model operations. There're at least two things this Model (M) can represent:

1. Actual business logic for your application
2. Storing and managing complex behavior in your client

Business logic is sometimes undesirable in practice: for example, if you have control over the server, it might be worth keeping all your business logic in one place (on the server) and just feed the UI what it needs to interact with the user. But if you have limited REST endpoints and need to do some wrangling (e.g. in your sagas, or within components), that'll be business logic.

Client behavior management is likely, especially in complex applications where you might be doing things like displaying different things to the user based on their session (e.g. they're an unregistered user vs. user vs. admin). You're probably doing this in any redux store interactions that are contained to use by only the client.

---

Disclaimer: discussing MVC, MVVM, etc. is likely to lead to many different opinions of exactly what they mean [1]. Above, I tried to draw parallels between common patterns I've seen and how they fit into MVC/MVVM, but there's so many different ways to approach it or more granular ways to think about it. I wouldn't get too hung up on putting a label on it as long as your system is easy to understand: modular, DRY, abstracted, etc. at levels that make sense for your use case and scale of development.

[1] Discussed in the some more length in answers and comments to this question

Comments

[Magne]

React Components can be seen as ViewControllers: stackoverflow.com/a/65969849/380607

[AmerllicA]

I love this part of your answer: A barebones React app, without Redux, that pulls data directly into components (e.g. fetch's in componentDidMount or leveraging GraphQL) with limited data wrangling of any kind could be called a simple "VVM" model.

[Greg Woods]

best explanation of all the MVVCMVCMMVC stuff I've seen in the last 10 years!