Software applications often start out simple and quickly grows big. No matter how small one try to keep it, the code somehow always grows up to be ...
For further actions, you may consider blocking this person and/or reporting abuse
Good article, good implementation of MVVM in React. But in practice you might don't need it in React in most cases.
The core idea behind MVVM is SRP principle. In React we can reach SRP by splitting components to smaller ones. For example instead of splitting Articles page by 4 layers ( Model, ViewModel, Controller, View) we can split it to CreateArticle and ArticlesList components with corresponding responsibilities. It would be simpler and better from SRP perspective.
I totally agree to this, MVVM is not necessary at all. With the component based architecture and tools like Redux and useSWR we do not need a MVVM structure.
And one can argue not to use MVVM in React. Although, lots of backend developers asks about it. The benefit I see with MVVM though is particularly with testing. Testing is many times half of the development time, and for new developers it can be a lot more than that.
The issue with testing components with a lot of mixed logic is that it requires lots of different mocks and assertions for a single component. What happens is often that developers searches through the code in hope of finding similar mocks they can reuse.
By using the MVVM setup I have described in this article, testing is a piece of cake. Each file will have just a few kind of tests that needs to be written. To learn how to test the code, developers will only have to look how it's done in an adjacent file and can quickly write the tests for all code they develop.
In the end, it's just a matter of taste. MVVM is not the mainstream React way, but with this article I wanted to show a way for how to do it :)
From my experience writing tests for components takes much effort and don't provide so much business value.
When there is a peace of complicated logic which need to be tested (for example complicated state transition) I extract it to pure function and test it easily without any mocks.
Couldn't agree more with this. We practice it this way as well. It's so much easier to test (and refactor) when logic is extracted as pure functions.
Good article,
But I would prefer to have a different kind of separation in React such as
Thanks for reading! Let me know if I should post more articles like this by writing a comment or reacting with some of the reactions ❤️🦄 🔥
If you want more memes, you can find those at my Instagram page. Enjoy your day! :)
Thanks I'm new to React but coming from backend frameworks like Laravel
where everything is well structured, I was struggling with large React components with everything included inside the view and it's a pain.
Ya, that's a very common thing, backend developers missing the structure they are used to. I often see the web as the Wild West Web since there are so many ways to implement stuff, everyone have their own way to work (at least in frontend).
Truth is though, there are lots of architectural patterns to follow though, just many of them to choose among. For React, Redux has long time served a good structure for scaling applications. With new hooks, things have changed, new structures have been needed.
I would say it works well using MVVM with React. But to backend developers, I would at least recommend trying to grasp what kinds of structures there are for React. They do work very well after all even if it doesn't look like that at a first glance :)
Awesome article, thank you for taking your time to write it, I've always struggled to understand how some of those design patters could be applied to front-end applications, it was very interesting to see how you ported MVVM to React.
As someone that has worked with both React and Angular, I couldn't help but to think that, at least the View and ViewController is something that Angular does natively, it's actually their implementation of a component, maybe leaning more to the MVC side.
Thanks for the article again,
Cheers!
This is a very useful article. Thanks for posting it. I've been thinking about how to implement this pattern in React to add more structure to my data components but never taken the time to look into it. I found this to be a good introductory guide. And I would appreciate more articles like this one.
Very informative article. Thank you for sharing you knowledge. It has been a constant challenge for me to comprehend the implementation of certain design patterns in front-end applications. Therefore, it was fascinating to observe how you adapted MVVM to React.
Can I get the source code of this project?
I'm sorry to say it doesn't exist. I wrote this article from scratch, by copying and modifying parts from another project. So there's no github repo for this guide.
Thank you for the article!
In my opinion, when using MVVM, the separation should be more explicit. Hooks don't contribute to this.
I like how this is implemented in the React VVM library
yoskutik.github.io/react-vvm/
MVVM is not a standard pattern in React, but you can implement its principles using Hooks and TypeScript. The basic idea is to separate business logic from presentation by using ViewModel components. These components handle data manipulation and state management while the View components focus on rendering the UI.
Hi everyone,
I am seeking feedback on the code for my github.com/valodyapapikyan/publish... project