Browse Source

Add illustrations for Concurrent burgers and Parallel burgers (#5277)

pull/5280/head
Sebastián Ramírez 3 years ago
committed by GitHub
parent
commit
0ba0c4662d
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      docs/az/mkdocs.yml
  2. 2
      docs/de/mkdocs.yml
  3. 94
      docs/en/docs/async.md
  4. 5
      docs/en/docs/css/custom.css
  5. BIN
      docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-01.png
  6. BIN
      docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-02.png
  7. BIN
      docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-03.png
  8. BIN
      docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-04.png
  9. BIN
      docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-05.png
  10. BIN
      docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-06.png
  11. BIN
      docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-07.png
  12. BIN
      docs/en/docs/img/async/parallel-burgers/parallel-burgers-01.png
  13. BIN
      docs/en/docs/img/async/parallel-burgers/parallel-burgers-02.png
  14. BIN
      docs/en/docs/img/async/parallel-burgers/parallel-burgers-03.png
  15. BIN
      docs/en/docs/img/async/parallel-burgers/parallel-burgers-04.png
  16. BIN
      docs/en/docs/img/async/parallel-burgers/parallel-burgers-05.png
  17. BIN
      docs/en/docs/img/async/parallel-burgers/parallel-burgers-06.png
  18. 2
      docs/en/mkdocs.yml
  19. 2
      docs/es/mkdocs.yml
  20. 2
      docs/fa/mkdocs.yml
  21. 2
      docs/fr/mkdocs.yml
  22. 2
      docs/he/mkdocs.yml
  23. 2
      docs/id/mkdocs.yml
  24. 2
      docs/it/mkdocs.yml
  25. 2
      docs/ja/mkdocs.yml
  26. 2
      docs/ko/mkdocs.yml
  27. 2
      docs/nl/mkdocs.yml
  28. 2
      docs/pl/mkdocs.yml
  29. 2
      docs/pt/mkdocs.yml
  30. 2
      docs/ru/mkdocs.yml
  31. 2
      docs/sq/mkdocs.yml
  32. 2
      docs/sv/mkdocs.yml
  33. 2
      docs/tr/mkdocs.yml
  34. 2
      docs/uk/mkdocs.yml
  35. 2
      docs/zh/mkdocs.yml

2
docs/az/mkdocs.yml

@ -75,6 +75,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/de/mkdocs.yml

@ -76,6 +76,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

94
docs/en/docs/async.md

@ -102,87 +102,111 @@ To see the difference, imagine the following story about burgers:
### Concurrent Burgers ### Concurrent Burgers
<!-- The gender neutral cook emoji "🧑‍🍳" does not render well in browsers. In the meantime, I'm using a mix of male "👨‍🍳" and female "👩‍🍳" cooks. --> You go with your crush to get fast food, you stand in line while the cashier takes the orders from the people in front of you. 😍
You go with your crush 😍 to get fast food 🍔, you stand in line while the cashier 💁 takes the orders from the people in front of you. <img src="/img/async/concurrent-burgers/concurrent-burgers-01.png" class="illustration">
Then it's your turn, you place your order of 2 very fancy burgers 🍔 for your crush 😍 and you. Then it's your turn, you place your order of 2 very fancy burgers for your crush and you. 🍔🍔
You pay 💸. <img src="/img/async/concurrent-burgers/concurrent-burgers-02.png" class="illustration">
The cashier says something to the cook in the kitchen so they know they have to prepare your burgers (even though they are currently preparing the ones for the previous clients).
<img src="/img/async/concurrent-burgers/concurrent-burgers-03.png" class="illustration">
You pay. 💸
The cashier gives you the number of your turn.
<img src="/img/async/concurrent-burgers/concurrent-burgers-04.png" class="illustration">
While you are waiting, you go with your crush and pick a table, you sit and talk with your crush for a long time (as your burgers are very fancy and take some time to prepare).
The cashier 💁 says something to the cook in the kitchen 👨‍🍳 so they know they have to prepare your burgers 🍔 (even though they are currently preparing the ones for the previous clients). As you are sitting at the table with your crush, while you wait for the burgers, you can spend that time admiring how awesome, cute and smart your crush is ✨😍✨.
The cashier 💁 gives you the number of your turn. <img src="/img/async/concurrent-burgers/concurrent-burgers-05.png" class="illustration">
While you are waiting, you go with your crush 😍 and pick a table, you sit and talk with your crush 😍 for a long time (as your burgers are very fancy and take some time to prepare ✨🍔✨). While waiting and talking to your crush, from time to time, you check the number displayed on the counter to see if it's your turn already.
As you are sitting at the table with your crush 😍, while you wait for the burgers 🍔, you can spend that time admiring how awesome, cute and smart your crush is ✨😍✨. Then at some point, it finally is your turn. You go to the counter, get your burgers and come back to the table.
While waiting and talking to your crush 😍, from time to time, you check the number displayed on the counter to see if it's your turn already. <img src="/img/async/concurrent-burgers/concurrent-burgers-06.png" class="illustration">
Then at some point, it finally is your turn. You go to the counter, get your burgers 🍔 and come back to the table. You and your crush eat the burgers and have a nice time. ✨
You and your crush 😍 eat the burgers 🍔 and have a nice time ✨. <img src="/img/async/concurrent-burgers/concurrent-burgers-07.png" class="illustration">
--- ---
Imagine you are the computer / program 🤖 in that story. Imagine you are the computer / program 🤖 in that story.
While you are at the line, you are just idle 😴, waiting for your turn, not doing anything very "productive". But the line is fast because the cashier 💁 is only taking the orders (not preparing them), so that's fine. While you are at the line, you are just idle 😴, waiting for your turn, not doing anything very "productive". But the line is fast because the cashier is only taking the orders (not preparing them), so that's fine.
Then, when it's your turn, you do actual "productive" work 🤓, you process the menu, decide what you want, get your crush's 😍 choice, pay 💸, check that you give the correct bill or card, check that you are charged correctly, check that the order has the correct items, etc. Then, when it's your turn, you do actual "productive" work, you process the menu, decide what you want, get your crush's choice, pay, check that you give the correct bill or card, check that you are charged correctly, check that the order has the correct items, etc.
But then, even though you still don't have your burgers 🍔, your work with the cashier 💁 is "on pause" ⏸, because you have to wait 🕙 for your burgers to be ready. But then, even though you still don't have your burgers, your work with the cashier is "on pause" ⏸, because you have to wait 🕙 for your burgers to be ready.
But as you go away from the counter and sit at the table with a number for your turn, you can switch 🔀 your attention to your crush 😍, and "work" ⏯ 🤓 on that. Then you are again doing something very "productive" 🤓, as is flirting with your crush 😍. But as you go away from the counter and sit at the table with a number for your turn, you can switch 🔀 your attention to your crush, and "work" ⏯ 🤓 on that. Then you are again doing something very "productive" as is flirting with your crush 😍.
Then the cashier 💁 says "I'm finished with doing the burgers" 🍔 by putting your number on the counter's display, but you don't jump like crazy immediately when the displayed number changes to your turn number. You know no one will steal your burgers 🍔 because you have the number of your turn, and they have theirs. Then the cashier 💁 says "I'm finished with doing the burgers" by putting your number on the counter's display, but you don't jump like crazy immediately when the displayed number changes to your turn number. You know no one will steal your burgers because you have the number of your turn, and they have theirs.
So you wait for your crush 😍 to finish the story (finish the current work ⏯ / task being processed 🤓), smile gently and say that you are going for the burgers ⏸. So you wait for your crush to finish the story (finish the current work ⏯ / task being processed 🤓), smile gently and say that you are going for the burgers ⏸.
Then you go to the counter 🔀, to the initial task that is now finished ⏯, pick the burgers 🍔, say thanks and take them to the table. That finishes that step / task of interaction with the counter ⏹. That in turn, creates a new task, of "eating burgers" 🔀 ⏯, but the previous one of "getting burgers" is finished ⏹. Then you go to the counter 🔀, to the initial task that is now finished ⏯, pick the burgers, say thanks and take them to the table. That finishes that step / task of interaction with the counter ⏹. That in turn, creates a new task, of "eating burgers" 🔀 ⏯, but the previous one of "getting burgers" is finished ⏹.
### Parallel Burgers ### Parallel Burgers
Now let's imagine these aren't "Concurrent Burgers", but "Parallel Burgers". Now let's imagine these aren't "Concurrent Burgers", but "Parallel Burgers".
You go with your crush 😍 to get parallel fast food 🍔. You go with your crush to get parallel fast food.
You stand in line while several (let's say 8) cashiers that at the same time are cooks 👩‍🍳👨‍🍳👩‍🍳👨‍🍳👩‍🍳👨‍🍳👩‍🍳👨‍🍳 take the orders from the people in front of you. You stand in line while several (let's say 8) cashiers that at the same time are cooks take the orders from the people in front of you.
Everyone before you is waiting 🕙 for their burgers 🍔 to be ready before leaving the counter because each of the 8 cashiers goes and prepares the burger right away before getting the next order. Everyone before you is waiting for their burgers to be ready before leaving the counter because each of the 8 cashiers goes and prepares the burger right away before getting the next order.
Then it's finally your turn, you place your order of 2 very fancy burgers 🍔 for your crush 😍 and you. <img src="/img/async/parallel-burgers/parallel-burgers-01.png" class="illustration">
Then it's finally your turn, you place your order of 2 very fancy burgers for your crush and you.
You pay 💸. You pay 💸.
The cashier goes to the kitchen 👨‍🍳. <img src="/img/async/parallel-burgers/parallel-burgers-02.png" class="illustration">
The cashier goes to the kitchen.
You wait, standing in front of the counter 🕙, so that no one else takes your burgers before you do, as there are no numbers for turns.
<img src="/img/async/parallel-burgers/parallel-burgers-03.png" class="illustration">
As you and your crush are busy not letting anyone get in front of you and take your burgers whenever they arrive, you cannot pay attention to your crush. 😞
This is "synchronous" work, you are "synchronized" with the cashier/cook 👨‍🍳. You have to wait 🕙 and be there at the exact moment that the cashier/cook 👨‍🍳 finishes the burgers and gives them to you, or otherwise, someone else might take them.
You wait, standing in front of the counter 🕙, so that no one else takes your burgers 🍔 before you do, as there are no numbers for turns. <img src="/img/async/parallel-burgers/parallel-burgers-04.png" class="illustration">
As you and your crush 😍 are busy not letting anyone get in front of you and take your burgers whenever they arrive 🕙, you cannot pay attention to your crush 😞. Then your cashier/cook 👨‍🍳 finally comes back with your burgers, after a long time waiting 🕙 there in front of the counter.
This is "synchronous" work, you are "synchronized" with the cashier/cook 👨‍🍳. You have to wait 🕙 and be there at the exact moment that the cashier/cook 👨‍🍳 finishes the burgers 🍔 and gives them to you, or otherwise, someone else might take them. <img src="/img/async/parallel-burgers/parallel-burgers-05.png" class="illustration">
Then your cashier/cook 👨‍🍳 finally comes back with your burgers 🍔, after a long time waiting 🕙 there in front of the counter. You take your burgers and go to the table with your crush.
You take your burgers 🍔 and go to the table with your crush 😍. You just eat them, and you are done. ⏹
You just eat them, and you are done 🍔 ⏹. <img src="/img/async/parallel-burgers/parallel-burgers-06.png" class="illustration">
There was not much talk or flirting as most of the time was spent waiting 🕙 in front of the counter 😞. There was not much talk or flirting as most of the time was spent waiting 🕙 in front of the counter. 😞
--- ---
In this scenario of the parallel burgers, you are a computer / program 🤖 with two processors (you and your crush 😍), both waiting 🕙 and dedicating their attention ⏯ to be "waiting on the counter" 🕙 for a long time. In this scenario of the parallel burgers, you are a computer / program 🤖 with two processors (you and your crush), both waiting 🕙 and dedicating their attention ⏯ to be "waiting on the counter" 🕙 for a long time.
The fast food store has 8 processors (cashiers/cooks) 👩‍🍳👨‍🍳👩‍🍳👨‍🍳👩‍🍳👨‍🍳👩‍🍳👨‍🍳. While the concurrent burgers store might have had only 2 (one cashier and one cook) 💁 👨‍🍳. The fast food store has 8 processors (cashiers/cooks). While the concurrent burgers store might have had only 2 (one cashier and one cook).
But still, the final experience is not the best 😞. But still, the final experience is not the best. 😞
--- ---
This would be the parallel equivalent story for burgers 🍔. This would be the parallel equivalent story for burgers. 🍔
For a more "real life" example of this, imagine a bank. For a more "real life" example of this, imagine a bank.
@ -238,7 +262,7 @@ You could have turns as in the burgers example, first the living room, then the
It would take the same amount of time to finish with or without turns (concurrency) and you would have done the same amount of work. It would take the same amount of time to finish with or without turns (concurrency) and you would have done the same amount of work.
But in this case, if you could bring the 8 ex-cashier/cooks/now-cleaners 👩‍🍳👨‍🍳👩‍🍳👨‍🍳👩‍🍳👨‍🍳👩‍🍳👨‍🍳, and each one of them (plus you) could take a zone of the house to clean it, you could do all the work in **parallel**, with the extra help, and finish much sooner. But in this case, if you could bring the 8 ex-cashier/cooks/now-cleaners, and each one of them (plus you) could take a zone of the house to clean it, you could do all the work in **parallel**, with the extra help, and finish much sooner.
In this scenario, each one of the cleaners (including you) would be a processor, doing their part of the job. In this scenario, each one of the cleaners (including you) would be a processor, doing their part of the job.

5
docs/en/docs/css/custom.css

@ -139,3 +139,8 @@ code {
.md-content__inner h1 { .md-content__inner h1 {
direction: ltr !important; direction: ltr !important;
} }
.illustration {
margin-top: 2em;
margin-bottom: 2em;
}

BIN
docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-01.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

BIN
docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-02.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

BIN
docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-03.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

BIN
docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-04.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

BIN
docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-05.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

BIN
docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-06.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

BIN
docs/en/docs/img/async/concurrent-burgers/concurrent-burgers-07.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

BIN
docs/en/docs/img/async/parallel-burgers/parallel-burgers-01.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

BIN
docs/en/docs/img/async/parallel-burgers/parallel-burgers-02.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

BIN
docs/en/docs/img/async/parallel-burgers/parallel-burgers-03.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

BIN
docs/en/docs/img/async/parallel-burgers/parallel-burgers-04.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 214 KiB

BIN
docs/en/docs/img/async/parallel-burgers/parallel-burgers-05.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 181 KiB

BIN
docs/en/docs/img/async/parallel-burgers/parallel-burgers-06.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

2
docs/en/mkdocs.yml

@ -182,6 +182,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/es/mkdocs.yml

@ -85,6 +85,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/fa/mkdocs.yml

@ -75,6 +75,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/fr/mkdocs.yml

@ -90,6 +90,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/he/mkdocs.yml

@ -75,6 +75,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/id/mkdocs.yml

@ -75,6 +75,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/it/mkdocs.yml

@ -75,6 +75,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/ja/mkdocs.yml

@ -117,6 +117,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/ko/mkdocs.yml

@ -85,6 +85,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/nl/mkdocs.yml

@ -75,6 +75,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/pl/mkdocs.yml

@ -78,6 +78,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/pt/mkdocs.yml

@ -100,6 +100,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/ru/mkdocs.yml

@ -76,6 +76,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/sq/mkdocs.yml

@ -75,6 +75,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/sv/mkdocs.yml

@ -75,6 +75,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/tr/mkdocs.yml

@ -78,6 +78,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/uk/mkdocs.yml

@ -75,6 +75,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

2
docs/zh/mkdocs.yml

@ -126,6 +126,8 @@ markdown_extensions:
format: !!python/name:pymdownx.superfences.fence_code_format '' format: !!python/name:pymdownx.superfences.fence_code_format ''
- pymdownx.tabbed: - pymdownx.tabbed:
alternate_style: true alternate_style: true
- attr_list
- md_in_html
extra: extra:
analytics: analytics:
provider: google provider: google

Loading…
Cancel
Save