The document object model (DOM) of the browser is a complicated place Many web applications use DOM elements to store application state. It’s better to store application state in pure Javascript objects to achieve simpler designs with have better performance and less complexity.
| Expand | ||
|---|---|---|
| ||
This video shows the complexity of the Confluence DOM tree versus how I am doing it. |
| Expand | ||
|---|---|---|
| ||
It’s better to represent application state information in Javascript objects which should be the source of truth and then just display this information in the DOM. i.e. Application State In Javascript → rendered into → DOM never DOM → state extracted → Application state. | ||
| Expand | ||
| ||
| For instance if you were writing a tree with expanding nodes then one would want to store information about the nodes in a Javascript tree and then just have some code to display using HTML tags (aka DOM). |
| Expand | ||
|---|---|---|
| ||
You have to get used to the idea of writing some code which manipulates DOM objects and then establishes a simple map back to your object model. So for a tree control for instance when a user clicks on a item in the tree one needs code to traverse the parents and come back with an array of the location in tree. One one has the location address one can then map into the Javascript objects which are your source of truth. |
| Expand | ||
|---|---|---|
| ||
The data model represented in Javascript objects has the actual state. The DOM objects just represent a view of that state. |
...