Simple separation of concerns in JS Part 2 
Tags: javascript
Published: 2021-02-11 13:25:58

This is an example of separation of concerns in an app with heavy use of the vanilla DOM manipulation and event handling methods like `document.createElement`, `querySelector`, and `addEventListener`. In JS there are several ways to approach modularity, like the major frameworks and libraries, but this is what worked for me in vanilla JS to take a step forward towards cleaner code in that continuous pursuit of improvement.

## Mixed DOM Manipulation and Event Handling

This type of functions would be taking care of many tasks at the same time a simple example is:

```javascript

function renderPlayButton(){

    let trackBtns = document.getElementById("track-btns")

    let playButton = document.createElement("button")
    playButton.id = "play"
    playButton.className = "playback-button"
    playButton.innerHTML = `<svg class="bi bi-play-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
                            </svg>`

    playButton.addEventListener("click", ()=> { // add event listener to button to play song

        updateNewSong()
        newSong.playSong()
        
    }) 
    trackBtns.appendChild(playButton)

}


```

However, in functions with more lines of code, mixing dom-manipulation and event handling creates low readability.

#Separation of Concerns

### DOM Manipulation Methods

I put all the methods in the app that use `document.createElement` in a file called `DOMHelpers.js`. A sample method would look like:

```javascript
function createPlayButton(){
    let playButton = document.createElement("button")
    playButton.id = "play"
    playButton.className = "playback-button"
    playButton.innerHTML = `<svg class="bi bi-play-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
                            </svg>`
    return playButton
}
```

### Event Handling Methods

The event handling methods would then become cleaner as we use the helpers that create dom elements from an external source.

``` javascript
function playButton(){

    let trackBtns = document.getElementById("track-btns")

    let playButton = createPlayButton()

    playButton.addEventListener("click", ()=> {
      
        updateNewSong()
        newSong.playSong()
        
    })
    trackBtns.appendChild(playButton)

}
```

I think this is a simple but powerful pattern, and it is a great way to make code look cleaner in JS.

[Take a look at the rest of the code here.](https://github.com/SantiagoSalazarPavajeau/chords_beats_frontend)

Feel more than welcome to reach out with any ideas/comments at [Linkedin](https://www.linkedin.com/in/santiago-salazar-pavajeau/) or [Twitter](https://twitter.com/santispavajeau), or check out my [portfolio](https://www.santiagosalazarpavajeau.live).