|
In a UI, you usually apply some sort of MVC pattern (Model-View-Controller), which means that you have a Model (your data, which usually comes from a server, or can be created by the user interacting with the UI), and the View, which is implemented with some HTML / DOM elements and reflects what the user sees. Then you have some sort of components (playing the role of Controllers) that are responsible (amongst other things) of syncing the Model and the View both ways (when the users interacts, with the view, it might update the data, but also, when the data changes for some reason, it might update the view). The strength of the frameworks (React, View, Angular), is to provide a way to create well-scoped (local/small) components that take care of the Model (the data), the View (generally what is called a template), and have a built-in reactive capability that facilites the sync of the Model and the View. That reactivity is extremely powerful because it "watches" all changes of the Model and knows when a change is impactful for the View. It then refreshes the view automatically so that the user instantly sees the impact of its action or any state change in the application. When you don't have reactivity, it is of course possible to build a UI, however, you will have to rigorously and explicitly update the view yourself. You can use an observer pattern to do so (btw, under the hood, reactivity is provided by an implicit and automated observer pattern, so that all data of the model become "observable"). In any case, when you don't have reactivity, it gets more complicated and you have to really know what you are doing because your UI code can become a big mess really easily. You asked for an example. Imagine you have a UI with the check box and when the user checks it, it shows an input so that the user can enter some text to precise some data. In general, you can implement that behavior really easily with a reactive framework. Here is the pseudo code (not meant to be compiled). The view:
<input type="check" model="checkvalue" /><IF condition="checkvalue"><input type="text" model="textvalue" /></IF> The model:
{ checkvalue: false, textvalue: undefined} The important here is the IF tag, which depends on the checkvalue of the model. When this value is false, the text input does not show and vice-versa. It is fully automatic thanks to reactivity. If you don't have reactivity, you need to refresh the view manually when checkvalue changes, and you can imagine it can become quite messy when the view and the model get bigger :) All that being said, reactivity, if employed poorly, can also become a mess and tigger a lot of unnecessary updates of the views. That's probably why some people complain about framework performances. Of course the role of the framework is also to give you a "frame of work"... if you go out of the frame, that's usually quite bad... And finally, you can completely develop a small UI with no reactivity applying a MVC pattern with explicit update. That would just make the code more verbose, but IMO, it is doable if you know what you are doing. And it can probably be more efficient in some cases because you don't rely on the framework magic (you can decide in your program when to update the view). |