Phase 4

Phase 4 has come to an end and with it, a new project week begins!! Or has begun.. & finished. But nonetheless new insights have come my way through this journey and I would love nothing better than to share my newfound knowledge with my cherished readers!

Javascript is tough. There's no real way around it, unless maybe you started with javascript but even then the language is a real mind bender!! The biggest obstacle for me in designing my phase 4 project was where to go, what do do & most importantly HOW TO MANAGE JAVASCRIPT'S SYNCHRONOUS EMBODIMENT.

Before that, I'd love to share this beautiful mantra I learned from a wonderful Flatiron instructor named Ayana Cotton. "When some event happens, I want to make what kind of fetch and then manipulate the Dom in what way?" This helped center my brain onto a one way track from start to finish. Simply add an event listener to the element you wish to expand on, use fetch to manipulate the backend once that event is listened to, and finally, change the dom to reflect that change in the frontend. Easy to remember right?

Now back to synchronous. What this means is that Javascript performs one operation one at a time. But some things take a while.. such as manipulating a backend server. Since you'd rather not have the rest of your application wait one or many specific operations, we use these things called promises. Promises are just like they are in day to day life where you basically tell javascript that we promise to perform the task so everything else can load without a worry. Even in the event that a promise fails, we use catches to catch that failure and do something with it.

Fetch requests make this process a lot easier where the promise syntax is combined into a simple word "fetch" that takes in the url you wish to make the fetch request to. What you wish to do with that returned information only once it is returned is chained on through ".then"s.

To visualize this, here is a fetch request from my application called "iRemind."

 getLists(){
        fetch(this.baseListURL)
        .then(response => response.json())
        .then(lists => {
            lists.data.forEach(list => {
                let newList = new List(list, list.attributes)
                document.querySelector("#list-container").innerHTML += newList.renderList()
            })
            reminderForm.addCreateReminderForm()
        })
    }

Here, I wanted to get all the lists that are stored within my rails api backend.

fetch(this.baseListURL)

this is the fetch request being made where baseListURL is the url to my backend stored in a global constant elsewhere.

.then(response => response.json())

Here is the chained on task once that fetch completed where I tell my program to turn that response to json!

.then(lists => {
            lists.data.forEach(list => {
                let newList = new List(list, list.attributes)
                document.querySelector("#list-container").innerHTML += newList.renderList()
            })
            reminderForm.addCreateReminderForm()
        })
    }

The rest of the code within the final then simply names the jsonified data as lists, which is what I wanted to then manipulate the data as I pleased.

Fetch requests along with the mantra "When some event happens, I want to make what kind of fetch and then manipulate the Dom in what way?" were INTEGRAL to my understanding & really made connecting the dots a lot easier than they would have otherwise. Hopefully this cleared some of the gaps for you too! Until next time.