How to grab control: 4 tactics used by UI libraries

submited by
Style Pass
2021-09-27 08:30:07

The web does not natively provide a way to describe what the UI should look like. The only thing it offers is a set of instructions to modify the document.

Therefore, if you want something to change on the screen, some code needs to run to make those changes. The browser can’t perform those changes automatically.

Most modern UI libraries let you express your application in a declarative way. Any code written with such library can be boiled down to this:

The library promises that, whenever you make changes to your state, it will take care of updating the view automatically for you.

But remember what we said earlier: The DOM cannot change unless some code runs to modify it. Our code above modified the model, but it did not modify the view. Consequently, the view didn’t get updated with the new state!

The details of how to implement such refresh method aren’t important for this discussion. Suffices to know that it looks for changes in the state, and then make the corresponding modifications to the document using imperative browser API calls.

Leave a Comment