"Synchronous basically means that you can only execute one thing at a time. Asynchronous means that you can execute multiple things at a time and you don't have to finish executing the current thing in order to move on to next one."
"The Internet", "The Web", "Web Apps". All of these terms describe something that is interconnected. If you zoom out a bit, the entire internet is basically billions of computers all sharing information and software! But so far your projects have been all alone on your computer :(
Everything you have learned so far happens on the callstack, everything on the callstack executes synchronously. Synchronous means that each line of code will finish executing before the next one starts. Think of infinite loops, your browser freezes because nothing else can happen while the loop is looping!
What makes web development so cool is the ... web. Being able to build applications that connect computers form across the internet. This also introduces some challenges, it can take some time for computers to talk to each other across the internet. You don't want your apps freezing while you wait to hear back from another computer.
Enter asynchronous programming: writing code that tells your browser to start one task and move on to a new task while you wait for the first to finish. This is possible because of the Event Loop.
- Learning Objectives
- Suggested Study
- Sundays & Projects
- Class Recordings
- Curriculum (external)
- HYF Home (external)
How to study the code in this repo.
You will need NPM and nvm on your computer to study this material
Using a browser with good DevTools will make your life easier: Chromium, FireFox, Edge, Chrome
- Install or update the
study-lensespackage globallynpm install -g study-lenses(if you do not have it already)npm update -g study-lenses(if you already have it installed)
- Clone this repository:
git clone git@github.com:HackYourFutureBelgium/asynchronous-programming.git(SSH) (recommended)git clone https://github.com/HackYourFutureBelgium/asynchronous-programming.git(HTTPS)gh repo clone HackYourFutureBelgium/asynchronous-programming(GH CLI)
cdinto the repositorycd asynchronous-programming
- Run the
studycommand from your CLIstudy
- The material will open in your default browser, you're good to go!
If you have a windows computer and get this error:
... /study.ps1 cannot be loaded because running scripts ...follow the instructions in this StackOverflow answer, that should take care of it ; )
- Browser
- Using
setTimeoutandsetIntervalto schedule tasks on the Event Loop - Using
Promiseto write more manageable asynchronous code - Refactoring promises to
async/await - Using
fetchto get and consume data from APIs
- Using
Projects in this module will build on what you learned in the last module by adding in network calls to APIS and scheduled tasks on the event loop.
References and Practice to help you master this module.
expand/collapse
- Coding Nomad - short clear example
- Java Brains - restaurant analogy
- Loupe (+10)
- In the Loop (+10)
- MDN
- flavicops
- javascript.info/settimeout-setinterval
- https://javascript.info/event-loop
- Use case for using setTimeout(0)
- Beau from FCC (timeouts & intervals)
- References
- Practice
- learn-promises
- promise-practice
- JS 30:
- Whack-a-Mole
- Slide in on Scroll
- Countdown Timer
- JS & CSS Clock
- Webcam Fun
- What is JSON?
- APIs 101
- DevTools, the Network Tab:
- What is RESTful
- JSON Placeholder:live, more docs
- restfulapi.net
- Coding Train
- what is CORS?
- References
- Practice
- learn-fetch
- real-world-fetch
- github-api-crash-course tutorial. (hint: avoid pushing your GitHub auth token!)
- Fetching REST
- JS 30: Type Ahead
The Event Loop!
expand/collapse
- ./the-event-loop
- watch a couple of the videos
- step through the timeout examples in jsv9000.app
- ./isolate
labeled-loggerevent-loopexamples
- All Together:
- The Event Loop - restaurant analogy
- ./the-event-loop: timeouts examples
- In Small Groups:
- ./isolate: timeout exercises & sync vs. async
- All Together:
- Callback Hell at the Restaurant
- ./the-event-loop: promises
- In Small Groups:
- ./isolate: promises
individual project
Try to reverse-engineer stopwatch.net 3 times:
- using
setTimeout,setInterval,clearTimeoutandclearInterval - using Promises
- using
asyncandawait
There is not starter repository and you do not need to write a full Single Page App, one JS script for each version is ok. You should focus on the event loop and the user experience.
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- with one page for each version
- each version can be identical for the user, but have different code
- [/planning](https://github.com/_/_/tree/master/planning)
- [ ] constraints
- [ ] backlog
- [ ] wireframe
- [ ] development strategy
- [ ] retrospectiveasync/await, Fetching Data and RESTful APIs
expand/collapse
- Promises
- js.info: 1 -> 4
- Isolate: 3. Promises
- Callbacks, Promises, Async
- APIs & REST
- Restful Routes?
- JSON Placeholder:live, more docs
- Presentation - Javascript Fetch and REST API
- DevTools, the Network Tab:
- ./isolate
returning-promises&async-await: examples
- What is
async/await? Cover some examples together. - APIs - https://jsonplaceholder.typicode.com/users/1
- put this URL into the browser URL bar, what happens?
- now try
fetch("https://jsonplaceholder.typicode.com/users/1")in your console, what do you see? - how can you get the data from the response?
- API Call functions
- examples
- API Call functions
- exercises
individual project
You've made it this far, time to show off a bit! Build yourself a new home page + portfolio to show off what you've built. You will use the GitHub API to fetch data about your profile, your projects, your contributions, whatever you're most proud of. (hint: avoid pushing your GitHub auth token!). Here's some links to get you started:
- Starter Repository
- The Docs - GitHub API documentation
- HamScript (good intro)
- Johnny (intro to fetch)
- Dev By RayRay (build a component)
- Hussein Nasser (long intro with DOM)
- Coding Shiksha (quick demo)
And a checklist:
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- [/planning](https://github.com/_/_/tree/master/planning)
- [ ] constraints
- [ ] backlog
- [ ] wireframe
- [ ] development strategy
- [ ] retrospective
- [ ] [project board](https://github.com/_/_/projects/1)Project week, no new material!
expand/collapse
Take it easy, focus on your portfolio
- Questions and answers + code review
- All together then in small groups
Keep working on your home page. No worries if you don't finish it this week! It's always a work in progress, and you'll have much more to add after next module.
- Students: Here you can find recordings of this module from past classes. Enjoy!
- Coaches: When sending your PR's with links please ...
- Indicate which class you were teaching
- Which week it was (if the module is more than 1 week)
- Give your name
- and a helpful description
- week 1:
- Part 1: The Event Loop
- Part 2: Whack-a-Mole
- week 2:
- Part 1:
fetch& REST - Part 2: Explore Users
- Part 1:
- week 3:
- Part 1:
importandexport - Part 2: Explore Pokemon
- Part 1:
- week 1:
- Part 1: Isolate - The Event Loop
- Part 2: Integrate - Event Loop
- Part 3: Recap & Project Intro
- week 2:
- Part 1: Isolate - Fetch & REST
- Part 2: Integrate - Fetch & REST
- week 3:
- Part 1: Isolate -
async/await - Part 2: Integrate -
async/await - Wednesday Review: Deploying to Heroku
- Part 1: Isolate -
- week 1: Scheduling & The Event Loop.
setTimeout,setInterval - week 2: Promises &
fetch - week 3:
async/await&fetch
- week 1 - by Yoshi and Joel: