week-3.md

Week 3

Sometimes when I'm writing Javascript I want to throw up my hands and say "this is bullshit!" but I can never remember what "this" refers to

— @bendhalpern

dotJS 2017 Async + Await by @wesbos.

Table of Contents

• Slides
• Theory
• Assignments

Slides

• Lab-3

Theory

In this lesson, we're going to explore the difference between sync and async. We'll learn how promises work, and how we can fetch() a URL to retrieve data from an endpoint. We dive deeper in the syntax of Async/Await, and learn how this is basically syntactic sugar on top of how regular promises work.

Assignments

Sync vs Async

Understand how sync versus async programming works

Synopsis

• Time: 4:00h
• Goals: Subgoal 5
• Period: Before week 4

In-class exercises

Finish the in-class exercises about sync versus async and understand how promises and async programming work.

• MDN. (2022, 22 januari) General asynchronous programming concepts.
• MDN. (2022, 22 januari) Introducing asynchronous JavaScript.
• Eloquent JavaScript) Asynchronous Programming
• Event Loop Visualizer
• Wes Bos Async / Await and Promises notes

Fetch

Understand how API's work and how to fetch data using async programming

Synopsis

• Time: 6:00h
• Goals: Subgoal 5
• Period: Before week 4

In-class exercises

Finish the in-class exercises about API's. Research third-party (data) API's that you can use in your project and see what authentication they use.

Assignment

Implement the API you've researched. Use async programming to fetch data from the API client-side to enhance data in your interface and application. You can also continue working on any part of your progressive enhancement.

Read for week 4: Read these articles regarding coding principles & progressive enhancement

• MDN. Client side Web APi's Introduction
• Public API's on GitHub
• Codepen Example: Pasta Promise by Laurens Aarnoudse
• Codepen Example: Fetch GitHub API

Hand-in

1. Push your changes:
   Commit your progress in your repository on GitHub under your username in your own matching-app repository.

2. Create an issue:
   Mark this assignment as complete by opening an issue on our GitHub issue tracker. Fill in the issue template of week-3.md with the correct information. Include what progress you made in the description of the issue.

3. Feedback:
   Let us know what you thought of the homework, what part you spend a lot of time on and give us any feedback. Your assignment will be reviewed by teachers and student assistants, so expect people to read it and be ready for tips and tops!