Questions From My First JavaScript App Build

Building a JavaScript web application from scratch can be a daunting task. It’s easy to get caught up in the concepts of this beautiful, scripting language, but nothing’s better than getting your hands dirty.

This is a review of a recent project of mine using JavaScript and Rails. I hope to shed some light on a couple JavaScript technologies.

What is asynchronous code?

JavaScript runs code asynchronously in the browser. We could go DEEP down the rabbit hole of asynchronous JavaScript, but I won’t do that. The easiest way for me to understand the execution context of JavaScript is to think of the language as a hustler: it wants to finish the most amount work in the least amount of time.

Synchronous code executes one line after another. Asynchronous code utilizes functions (generally callback functions) that call on other areas of the program to run before the current function is complete i.e. one function depends on another in order to finish its work. Asynchronous programming can speed up the application, allowing for a more friendly user experience.

Why use arrow functions?

What makes these more useful than regular functions? I found a great article that helped me answer this question, but I’ll unpack arrow functions a bit as well.

The main reason for using arrow functions over regular function expressions is that there is no binding of ‘this.’ If you don’t know what this refers to, that’s a story for another day. This “no binding” feature of arrow functions was particularly useful when I was creating my createVenue function:

createVenue = (e) => {
        e.preventDefault()
        const form = e.target
        const data = {
                name: form.querySelector(`#name`).value,
                address: form.querySelector(`#address`).value
        }
        form.reset()
        fetch(`${url}/venues`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body :JSON.stringify(data)
        })
        .then(r => r.json())
        .then(venue => {
            const v = new Venue(venue)
            v.slapOnDom()
        })
    }

With arrow functions, this is lexically bound. That means this is easily accessible from the code that contains the arrow function. Using an arrow function for my createVenue function made it much easier to apply a static method to every Venue object created:

static renderForm(){
        Venue.venueForm.innerHTML += `
            <form id="new-venue-form">
                Venue Name: <input type='text' id='name'>
                Address: <input type='text' id='address'>
                <input type='submit' id='create'>
            </form>
        `
        document.querySelector('#new-venue-form').addEventListener('submit', venueService.createVenue)   
    }

As you can see in my first code example, I called slapOnDom at the very end of the function. This function makes sure to add each object to the DOM upon Venue creation.

Thank you for giving my article a read. I’m at the beginning of my JavaScript journey but very excited to leverage this powerful language. Check back to see how I apply the basics of JavaScript to blockchain development in the future.