Popular posts

I'm not an expert with the fundamentals of stateful design of applications, so I'll try to answer to the best of my knowledge. I'm also not experienced with Vue, so I'll just stick to using React as a reference.

A lot of state management applications, like Redux are independent of UI frameworks, contrary to the popular belief of Redux being tightly coupled with React. It has just been adopted more widely by the React dev community.

You can use Redux together with React, or with any other view library.

( Redux docs )

Managing the state of the application is easier in React since it handles all the required side effects(UI updates, calling methods on state change), enabling you to just call this.setState({newState}) and forgetting about the rest.

To do the same in Vanilla Javascript, you have to:

1. Set up a centralized state which holds all the data, from where the UI derives the data to render itself.
2. Watch for state change and call appropriate update methods (eg: Adding another item to a list in the UI when it is pushed to the state, making API calls to fetch and load user details on user login) whenever the state changes.

For the first, you can use any good state management library, or build your own( For the curious ones)

For the second step, I would recommend using a Reactive Programming library, like RxJs. Again, contrary to popular belief, RxJs is not dependent on Angular; it has just been well adopted by that community. Reactive Programming helps you subscribe to events, by attaching a function to it to be called when that subscribed event is fired. Say, you update your state by pushing another item into a list which is rendered in the UI. With a reactive(don't confuse this with React) library like RxJs, you can watch for that change, fire an event, and respond to it by performing appropriate updates to the UI.

I know there are new terms and jargons, but it had to be there to avoid stretching this answer longer than it already it is.

Hope that helps.