Keeping state in the DOM vs. state in a JavaScript object

Yesterday, I shared my latest YouTube video on how to build a modern web app with vanilla Web Components.
If you missed it, the tl;dr is that users can add items to a list (ul) using a form. Then, they click a button to pick item from the list at random.
The code for picking the items looks like this…
/** * Handle click event * @param {Event} event The event object */ onclick (event) { // Get all of the list items let items = Array.


This content originally appeared on Go Make Things and was authored by Go Make Things

Yesterday, I shared my latest YouTube video on how to build a modern web app with vanilla Web Components.

If you missed it, the tl;dr is that users can add items to a list (ul) using a form. Then, they click a button to pick item from the list at random.

The code for picking the items looks like this…

/**
 * Handle click event
 * @param  {Event} event The event object
 */
onclick (event) {

	// Get all of the list items
	let items = Array.from(this.list.querySelectorAll('li')).map(function (item) {
		return item.textContent;
	});

	// Randomize the items
	this.shuffle(items);

	// Show the result
	this.result.textContent = `You picked ${items[0]}`;

}

One viewer asked a question:

Why not store the items as an array instead of getting them from the DOM each time?

It’s a great question!

In most modern JS apps, you’d do something like this instead…

// Get an immutable copy of the items
let items = Array.from(this.items);

// Randomize the items
this.shuffle(items);

// Show the result
this.result.textContent = `You picked ${items[0]}`;

But as Jeremy Keith wrote in his article on HTML Web Components

Try not to bring React’s mindset with you…

Think about composibility with existing materials. Do you really need to invent an entirely new component from scratch? Or can you use HTML up until it reaches its limit and then enhance the markup?

Web Components are very much with the grain of the web.

Storing your data in JavaScript objects is a React convention. It absolutely makes sense in certain situations, but in this app, it would just add more complexity.

If my items were also kept an array, every time I add an item, I also need to update the array. If I delete an item, I need to go back to the array, find that item, and remove it.

It’s simpler and less buggy to let the DOM be the state of the app, and query it when needed.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2024-06-21T14:30:00+00:00) Keeping state in the DOM vs. state in a JavaScript object. Retrieved from https://www.scien.cx/2024/06/21/keeping-state-in-the-dom-vs-state-in-a-javascript-object/

MLA
" » Keeping state in the DOM vs. state in a JavaScript object." Go Make Things | Sciencx - Friday June 21, 2024, https://www.scien.cx/2024/06/21/keeping-state-in-the-dom-vs-state-in-a-javascript-object/
HARVARD
Go Make Things | Sciencx Friday June 21, 2024 » Keeping state in the DOM vs. state in a JavaScript object., viewed ,<https://www.scien.cx/2024/06/21/keeping-state-in-the-dom-vs-state-in-a-javascript-object/>
VANCOUVER
Go Make Things | Sciencx - » Keeping state in the DOM vs. state in a JavaScript object. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/21/keeping-state-in-the-dom-vs-state-in-a-javascript-object/
CHICAGO
" » Keeping state in the DOM vs. state in a JavaScript object." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2024/06/21/keeping-state-in-the-dom-vs-state-in-a-javascript-object/
IEEE
" » Keeping state in the DOM vs. state in a JavaScript object." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2024/06/21/keeping-state-in-the-dom-vs-state-in-a-javascript-object/. [Accessed: ]
rf:citation
» Keeping state in the DOM vs. state in a JavaScript object | Go Make Things | Sciencx | https://www.scien.cx/2024/06/21/keeping-state-in-the-dom-vs-state-in-a-javascript-object/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.