Cristobal Lopez: Asynchronous programming, 3 weeks

[alexander-lopez-s]

Learning Objectives

• [ ] 🥚 You understand the JavaScript Event Loop, and can demonstrate this by using setTimeout and setInterval to schedule simple tasks.
• [ ] 🥚 You can explain why Asynchronous Programming is important for programs that have blocking and non-blocking tasks.
• [ ] 🥚 You can explain the basics of the Client/Server model and HTTP requests and can fetch data from RESTful APIs.
• [ ] 🐣 You can break down an asynchronous problem into smaller tasks and solve it using promises. This includes identify which tasks depend on each other and which are independent:
  • [ ] dependent tasks: The return value from one task is required to start the next task, these must be completed in a specific order - .then
  • [ ] independent tasks: These tasks do not use each other's return values, they can be completed at the same time - Promise.allsystem.
• [ ] 🐣 You can fetch data from an API and render it into the DOM using /api-calls, /handlers and async/await syntax.
• [ ] 🐣 You can write unit tests for functions that return promises using async/await syntax.

[alexander-lopez-s]

Week 1

I Need Help With:

• I need help understanding what defines the order in which the tasks will be performed. Let's say that we have 4 functions in a program. 2 of them have 0 as SetTimeOut value, the other two have 2000 milliseconds and 4000 milliseconds respectively. Is the system going to process the functions with the greatest values first and execute the ones with 0 milliseconds last or viceversa? Or does the system read in a descending way?

• Does the system execute all the functions at the same time but prioritises the ones on top and with higher millisecond values?

• How can we print blank spaces in the left side of our code? Ex: innerHTML = " blue";

What went well?

• I practiced the three new functions setInterval, setTimeOut and clearInterval/TimeOut and everything went perfect.

• I can describe what the use of the above mentioned functions is.

• I made a counter using the asynchronous programming methodology. Counter repository

What went less well?

• I was not able to separate all the concerns in my small project, I am still working on it but I cannot figure it out yet.

• I cannot understand what is a promise in the event loop.

Lessons Learned

• I undertand the importance of the Event Loop and I have practiced a lot these functions.

Sunday Prep Work

• I will keep reviewing the study lenses material and try completing as many exercises as possible.

[danielhalasz]

I need help understanding what defines the order in which the tasks will be performed. Let's say that we have 4 functions in a program. 2 of them have 0 as SetTimeOut value, the other two have 2000 milliseconds and 4000 milliseconds respectively. Is the system going to process the functions with the greatest values first and execute the ones with 0 milliseconds last or viceversa? Or does the system read in a descending way?

the number represents the time in milliseconds, how long the delay, or time out shall be to start executing the function, once the event queue is empty..in your example, once the queue is empty, the two with 0, then 2000, then 4000 will be the order in which they will run

[alexander-lopez-s]

Week 2

I Need Help With:

• I do not know how to recall specific information from the API. @samirm00 gave me a hint but I was not able to figure out the rest.

  
  function getUser (id)
  {
  const user =  fetch(`[https://jsonplaceholder.typicode.com/users/${id}](https://jsonplaceholder.typicode.com/users/$%7Bid%7D)`)
  .then( res => 
  {
      // CHECK res STATUS
      if ( res.status === 200)
      {
          return res.json();
      }
      else
      {
          return false;
      }
  
  })
  .catch( err =>  console.error(err)); 
  
  return user;
  }

export default getUser;

-  Why is the difference between `script type="module"` and `script type="text"`?
-  Let's say that I created a list <li> dynamically with JS. Why when I try to use this list inside another function, it cannot be found? It looks like the list only exists within the function where it was created. 
- How can we make our API DATA a global variable to have it available for our entire program without recalling it from the server every time we need it?

## What went well?
-  I was able to undertand how the API works and how to fetch some data.
- I worked in the small project and was able to display all the contact's information from the API.

## What went less well?
-  I understand the separation of concerns in theory but I am having a really hard time separating my files.
- I cannot understand clearly what await does. I might need a basic example but the tutorials are really complex.  

## Lessons Learned
- I learned what promises are in general. 
- I understand a bit about asynchronous programming. 

## Sunday Prep Work
- The exercises are too difficult in study lenses to complete them by myself (since the last 2 modules). I will do my best to resolve them. 

[sammou00]

No worries , I will explain again with examples tomorrow

[alexander-lopez-s]

Week 3

I Need Help With:

• Going back to separation of concerns, is this the standard convention that they follow in companies in real life? Or do they have different ways to distribute the JS code in companies? I am still struggling with this topic.

• Can I see a very simple and basic example of separation of concerns please? I have tried creating a chart to better understand it but I am still confused. (And separations of concerns on Youtube is something different, they associate it to isolating HTML, CSS and JS, I have not found a good tutorial).

What went well?

• I am able to fetch data from the server.
• I can push new data to the server.

What went less well?

• Separation of concerns again. A very difficult topic.
• I do not know how to use the keyword this(), it have seen it many times in many tutorials.

Lessons Learned

• The use of fetch, asynch, and await.

Sunday Prep Work

• I will try finishing my To-Do-List

[danielhalasz]

• Going back to separation of concerns, is this the standard convention that they follow in companies in real life? Or do they have different ways to distribute the JS code in companies? I am still struggling with this topic.

yes, most big codebases are separated.. the way it is done can be different, but the goal is always the same..to separate different sections of the code for easier teamwork and debugging

[danielhalasz]

• Can I see a very simple and basic example of separation of concerns please?

all the examples in the SoC repo

you can also look for HYF final projects..this is one example.. https://github.com/BeHelp/BeHelp/tree/dev/backend https://github.com/BeHelp/BeHelp/tree/dev/frontend

[danielhalasz]

• I do not know how to use the keyword this(), it have seen it many times in many tutorials.

avoid those tutorials :) this is something used in JS classes, that we do not use at all at HYF