What's the best way to implement MVC in frontend JS frameworks?

Frontend
1

Hey everyone,

I’m trying to wrap my head around using the MVC pattern in frontend development with JavaScript frameworks. I’m a bit confused about how it all fits together.

A few things I’m wondering about:

  1. Where does the Model data actually live in a frontend app?
  2. What specific parts of a JS framework would typically represent the Model, View, and Controller?
  3. Are there any good examples of MVC in action with popular frameworks like React or Vue?

I’ve been reading docs and tutorials, but I’m still having trouble picturing how it all works in practice. Any insights or explanations would be super helpful!

Thanks in advance for any advice you can share.

2

mvc in fron-end js is sorta flexible. models live in state managers like redux, and views are simply ui components. controllers kinda blend into the component logic. while react or vue don’t follow strict mvc, they use similar patterns. have u tried flux for a modern twist?

3

hey there! mvc in frontend js can be tricky, right? i’m curious - have u tried any specific implementations yet? it’d be cool to hear what u experminted wt so far. what parts are u finding most confusing? maybe we could brainstorm some ideas together!

4

While traditional MVC doesn’t map perfectly to modern JS frameworks, the core principles still apply. In my experience, state management libraries like Redux or MobX often serve as the Model layer, handling data and business logic. Components in React or Vue act as both View and Controller, rendering UI and managing user interactions. For a practical example, consider a todo app: the Model could be a Redux store with todo items, the View a React component rendering the list, and the Controller the component’s event handlers updating the store. This approach has worked well in several projects I’ve built, providing a clear separation of concerns.