trjhtr

I recently switched to modular JavaScript and really like the idea of having the state of your application in JavaScript and not in the DOM. I want to know if what I am doing is considered best practices or not and how I can avoid re-rendering the entire list after each change.

First, the code:

HTML

<form id="add-user-form">
 <input type="text" placeholder="username" name="username">
 <button>add User</button>
</form>
<hr>
<ul id="user-list"></ul>


<script id="user-template" type="text/html">
  <li data-key="$key">$name</li>
</script>

JavaScript

// lets you get templates from HTML ( as you can see in the HTML above ). 
// This is to avoid writing out HTML inside JavaScript
const Template = 
 cached: ,
  get(templateId, placeholders) 
 let templateHtml = ''
 if (!this.cached[templateId]) 
 templateHtml = document.getElementById(templateId).innerHTML.trim()
 this.cached[templateId] = templateHtml
 
 else 
 templateHtml = this.cached[templateId]
 
   
 for (key in placeholders) 
 templateHtml = templateHtml.replace(new RegExp("\$\s*" + key + "\s*", "g"), placeholders[key]);
 
 return templateHtml
  


const Users = 
 users: ,
 init() 
 this.cacheDom()
 this.bindEvents()
 ,
 cacheDom() 
 this.addUserFormEl = document.getElementById('add-user-form')
 this.userListEl = document.getElementById('user-list')
 ,
 bindEvents() 
 this.addUserFormEl.addEventListener('submit', this.handleAddUser.bind(this))
 ,
 render() 
 // gets the HTML from ALL users of our user list and replaces the current user list
 const userHtml = this.users.map( user => Template.get('user-template', user) ).join('')
 this.userListEl.innerHTML = userHtml
 ,
 handleAddUser(e) 
 e.preventDefault()

 const username = e.currentTarget.elements['username'].value
 if (!username) return
 e.currentTarget.elements['username'].value = ''

 const key = this.users.length // I know I know this is bad practice, please ignore :)

 this.users.push(
 key: key,
 name: username 
 )

 this.render()
 


Users.init()

The code has a form with an input field where you can type in a name that, once the form gets submitted, will be added to the user list below. It would probably be a good idea to seperate the userlist and the userform into seperate concerns, but for the sake of this example I kept it simple.

I want to keep DOM modifications to a minimum so I put them inside the method Users.render. This however has one side-effect. Whenever I add an user, it reloads the entire list. It might work with this amount of data, but lets say I have thousands of records, maybe even with input fields. These would all be emptied again.

I could of course just add the new entry to the DOM inside the Users.handleAddUser method but what if later I also want to delete users? I would have to delete the entry within Users.handleRemoveUser and would then have two methods that handle DOM modifications for the same thing.

I know this all can be easily and beautifully achieved with frameworks such as VueJs that use a vDOM but I am looking for a vanillaJs way of handling this.
(Please note that the code is just an example. Yes Unit testing and typeScript are missing and I am well aware of the fact that the code will not run in browsers that do not support ES6).

Whenever I add an user, it reloads the entire list.

One alternate approach would be to have the handleAddUser() store the newly added user in a property (e.g. recentlyAdded) and then have the render() method look for that property - if it is set (to something other than null) then add the rendered template of the new user and clear that property.

When the page loads, is there an existing list of users that gets added to the list? If so, maybe those could be stored in a different property and the existing code in render() could look for that property for rendering the existing records.

I could of course just add the new entry to the DOM inside the Users.handleAddUser method but what if later, I also want to delete users. I would have to delete the entry within Users.handleRemoveUser and would so already have two methods that handle DOM modifications for the same thing.

Going along with the alternate approach above, one could have the handleRemoveUser method also store the key of the recently removed user, and then the render() method can look for that property too and remove such an element associated with that key - perhaps by adding an id or other data attribute to the template.

You didn't include an implementation for handleRemoveUser so I can only guess as to what it would be: some way of removing the user from the list this.user. If this.users is still an array, then looking for the user to remove might require a loop. However if this.users is an associative-array (i.e. object with keys corresponding to the key of each user) (or a Map), then looking for the user to remove can be achieved without a loop.

See this demonstrated in the snippet below.

// lets you get templates from HTML ( as you can see in the HTML above ). 
// This is to avoid writing out HTML inside JavaScript
const Template = 
 cached: ,
 get(templateId, placeholders) 
 let templateHtml = ''
 if (!this.cached[templateId]) 
 templateHtml = document.getElementById(templateId).innerHTML.trim()
 this.cached[templateId] = templateHtml
 
 else 
 templateHtml = this.cached[templateId]
 
 
 for (key in placeholders) 
 templateHtml = templateHtml.replace(new RegExp("\$\s*" + key + "\s*", "g"), placeholders[key]);
 
 return templateHtml
 


const Users = 
 users: ,
 recentlyAdded: null,
 recentlyRemovedKey: null,
 nextKey: 1,
 init() 
 this.cacheDom()
 this.bindEvents()
 ,
 cacheDom() 
 this.addUserFormEl = document.getElementById('add-user-form')
 this.userListEl = document.getElementById('user-list')
 ,
 bindEvents() 
 this.addUserFormEl.addEventListener('submit', this.handleAddUser.bind(this))
 this.userListEl.addEventListener('click', this.handleListClick.bind(this));
 ,
 render() 
 // gets the HTML from ALL users of our user list and replaces the current user list
 /*const userHtml = this.users.map( user => Template.get('user-template', user) ).join('')
 this.userListEl.innerHTML = userHtml*/
 if (this.recentlyAdded) 
 	this.userListEl.innerHTML += Template.get('user-template', this.recentlyAdded);
 	this.recentlyAdded = null;
 
 if (this.recentlyRemovedKey) 
 	const element = document.getElementById(this.recentlyRemovedKey);
 if (element) 
 	element.remove();
 
 	this.recentlyRemoved = null;
 
 console.log('userlist after render: ',this.users);
 ,
 handleAddUser(e) 
 e.preventDefault()

 const username = e.currentTarget.elements['username'].value
 if (!username) return
 e.currentTarget.elements['username'].value = ''

 const key = this.nextKey++;

 this.users[key] = 
 key: key,
 name: username 
 ;
 this.recentlyAdded = this.users[key];

 this.render();
 ,
 handleListClick(e) 
 const target = e.target;
 	if (target.classList.contains('remove')) 
 	this.handleRemoveUser(target.parentNode.id);
 
 ,
 handleRemoveUser(key) 
 	delete this.users[key];
 this.recentlyRemovedKey = key;
 this.render();
 


Users.init()

.remove:before 
 content: 'X';

<form id="add-user-form">
 <input type="text" placeholder="username" name="username">
 <button>add User</button>
</form>
<hr>
<ul id="user-list"></ul>


<script id="user-template" type="text/html">
 <li data-key="$key" id="$key">$name <button class="remove"></button></li>
</script>

In revision 2 you had this question, altered in revision 5:

As you can see I am not getting the input by ID but by form.elements and then referencing the name.

It is fine to do that, but because the form data doesn't get sent to the server-side, you could also use the id attribute on the input instead of the name attribute, and then fetch that element by id.