So a recent question that’s come up is, when do I need to use a UI framework such as React, Vue, or Ember as opposed to just using Express with Jade or EJS? What are the pros and cons of these frameworks? When do I actually need them, and why.
Keeping the UI in sync with the state is hard.
I just happened to read this article in the past week and your post reminded me of it:
The Deepest Readon Why Modern JavaScript Frameworks Exist
1 Like
What exactly is state, I keep hearing that term but I’m not sure what it means?
That’s a great question which I’m not qualified to answer in a clear way. It took me a while to understand it myself. I think of it as a point in time where data is a. At another point in time data is b. The state has changed between the two points. On initialization your state would be “reset” and over time via user interaction data would change therefore state would change. If your UI depends on data changes (state changes) that can be done by manipulation the DOM yourself or have a framework do it for you. As I said this is a bad explanation but it’s how I visualize it.
2 Likes
To put it in (probably overly) simplified terms - what I’m understanding is that if you use a framework like React and a REST API only data that changes is “re-rendered” where using templates the entire interface is re-rendered, am I correct in saying that?
Yeah correct. I don’t know how they all work, but for React and Vue.js they use a virtual DOM which compares data changes and simply re-render the bare minimum.
1 Like
I’ve been checking out Vue.js - it feels easier to use than React, that’s highly opinionated though.
Example:
Also, in more detail, a good answer to “what is state?”:
State is the information a program keeps around that describes, literally, the state of the system at some point in time. Almost anything useful will need some way of holding onto state (otherwise how would you deal with a user clicking something or typing or moving the mouse or whatever). Normally you use variables to refer to some values, and to keep hold of those values. You can use closures, objects, store the state using some persistence mechanism like a database or a key value store. etc.
For example Redux works by dumping all of the key state in a single object. Then in theory you only have one place where state gets manipulated.
Note REST is stateless, it stores no information about state at all. React is, generally, stateful - it doesn’t have to be but you wouldn’t have a very useful app if you had no state. Functional programming paradigms generally attempt to avoid state as much as possible (Redux is a good example, as it moves all the state to a single controlled location). Conversely, Elixir/Erlang is built so as to make it very easy to construct highly stateful applications (within GenServers et al).
2 Likes
Reading the responses, state is equivalent to using global variables?
Mh…i’m still learning myself, but as far as i can see it’s a different concept: the state is much a representation of the app status ( where / what data are, what you can see and what you can’t etc. syntethized in a couple of values) in a precise moment where a global variable can be used for anything^^
Furthermore, in React he state is something related to a specific component, not a global object reachable from everywhere ( that’s where Redux come in, in the data flow, if i understood it correctly).
State can be stored in a global variable, or it can be stored in a local variable or whatever. Yous are really, really overthinking this. It’s things stored in memory, those things being the state of a program at a particular point in time. Like if your computer starts playing up and someone says restart it, the reason that works is it resets the state of whatever programs were running.
State is important because users can’t do anything useful without it.
Edit: just re storing state: in this computer, state is stored in the beads: 
In this computer, state is stored by just leaving the computer in the same position it was before so a user can refer back to the last thing they calculated: 
1 Like
Regards the original question:
- You want a web application that acts like what users expect an “app” to be like: “single page”, fluid, fast, etc. You want something that acts like a desktop application, rather than a web page.
- You’re fine with a web application that acts like a normal website with web pages: ie it loads a new page every time.
If 1, use a framework. It adds a huge level of complexity, but the frameworks make that complexity vastly easier to handle than just using plain JS.
If 2, don’t use a framework because you don’t need one.