|
| 1 | +--- |
| 2 | +draft: false |
| 3 | +date: 2022-12-07 |
| 4 | +categories: |
| 5 | + - DevLog |
| 6 | +authors: |
| 7 | + - rodrigo |
| 8 | +--- |
| 9 | + |
| 10 | +# Letting your cook multitask while bringing water to a boil |
| 11 | + |
| 12 | +Whenever you are cooking a time-consuming meal, you want to multitask as much as possible. |
| 13 | +For example, you **do not** want to stand still while you wait for a pot of water to start boiling. |
| 14 | +Similarly, you want your applications to remain responsive (i.e., you want the cook to “multitask”) while they do some time-consuming operations in the background (e.g., while the water heats up). |
| 15 | + |
| 16 | +The animation below shows an example of an application that remains responsive (colours on the left still change on click) even while doing a bunch of time-consuming operations (shown on the right). |
| 17 | + |
| 18 | + |
| 19 | + |
| 20 | +In this blog post, I will teach you how to multitask like a good cook. |
| 21 | + |
| 22 | +<!-- more --> |
| 23 | + |
| 24 | + |
| 25 | +## Wasting time staring at pots |
| 26 | + |
| 27 | +There is no point in me presenting a solution to a problem if you don't understand the problem I am trying to solve. |
| 28 | +Suppose we have an application that needs to display a huge amount of data that needs to be read and parsed from a file. |
| 29 | +The first time I had to do something like this, I ended up writing an application that “blocked”. |
| 30 | +This means that _while_ the application was reading and parsing the data, nothing else worked. |
| 31 | + |
| 32 | +To exemplify this type of scenario, I created a simple application that spends five seconds preparing some data. |
| 33 | +After the data is ready, we display a `Label` on the right that says that the data has been loaded. |
| 34 | +On the left, the app has a big rectangle (a custom widget called `ColourChanger`) that you can click and that changes background colours randomly. |
| 35 | + |
| 36 | +When you start the application, you can click the rectangle on the left to change the background colour of the `ColourChanger`, as the animation below shows: |
| 37 | + |
| 38 | + |
| 39 | + |
| 40 | +However, as soon as you press `l` to trigger the data loading process, clicking the `ColourChanger` widget doesn't do anything. |
| 41 | +The app doesn't respond because it is busy working on the data. |
| 42 | +This is the code of the app so you can try it yourself: |
| 43 | + |
| 44 | +```py hl_lines="11-13 21 35 36" |
| 45 | +--8<-- "docs/blog/snippets/2022-12-07-responsive-app-background-task/blocking01.py" |
| 46 | +``` |
| 47 | + |
| 48 | +1. The widget `ColourChanger` changes colours, randomly, when clicked. |
| 49 | +2. We create a binding to the key `l` that runs an action that we know will take some time (for example, reading and parsing a huge file). |
| 50 | +3. The method `action_load` is responsible for starting our time-consuming task and then reporting back. |
| 51 | +4. To simplify things a bit, our “time-consuming task” is just standing still for 5 seconds. |
| 52 | + |
| 53 | +I think it is easy to understand why the widget `ColourChanger` stops working when we hit the `time.sleep` call if we consider [the cooking analogy](https://mathspp.com/blog/til/cooking-with-asyncio) I have written about before in my blog. |
| 54 | +In short, Python behaves like a lone cook in a kitchen: |
| 55 | + |
| 56 | + - the cook can be clever and multitask. For example, while water is heating up and being brought to a boil, the cook can go ahead and chop some vegetables. |
| 57 | + - however, there is _only one_ cook in the kitchen, so if the cook is chopping up vegetables, they can't be seasoning a salad. |
| 58 | + |
| 59 | +Things like “chopping up vegetables” and “seasoning a salad” are _blocking_, i.e., they need the cook's time and attention. |
| 60 | +In the app that I showed above, the call to `time.sleep` is blocking, so the cook can't go and do anything else until the time interval elapses. |
| 61 | + |
| 62 | +## How can a cook multitask? |
| 63 | + |
| 64 | +It makes a lot of sense to think that a cook would multitask in their kitchen, but Python isn't like a smart cook. |
| 65 | +Python is like a very dumb cook who only ever does one thing at a time and waits until each thing is completely done before doing the next thing. |
| 66 | +So, by default, Python would act like a cook who fills up a pan with water, starts heating the water, and then stands there staring at the water until it starts boiling instead of doing something else. |
| 67 | +It is by using the module `asyncio` from the standard library that our cook learns to do other tasks while _awaiting_ the completion of the things they already started doing. |
| 68 | + |
| 69 | +[Textual](https://github.com/textualize/textual) is an async framework, which means it knows how to interoperate with the module `asyncio` and this will be the solution to our problem. |
| 70 | +By using `asyncio` with the tasks we want to run in the background, we will let the application remain responsive while we load and parse the data we need, or while we crunch the numbers we need to crunch, or while we connect to some slow API over the Internet, or whatever it is you want to do. |
| 71 | + |
| 72 | +The module `asyncio` uses the keyword `async` to know which functions can be run asynchronously. |
| 73 | +In other words, you use the keyword `async` to identify functions that contain tasks that would otherwise force the cook to waste time. |
| 74 | +(Functions with the keyword `async` are called _coroutines_.) |
| 75 | + |
| 76 | +The module `asyncio` also introduces a function `asyncio.create_task` that you can use to run coroutines concurrently. |
| 77 | +So, if we create a coroutine that is in charge of doing the time-consuming operation and then run it with `asyncio.create_task`, we are well on our way to fix our issues. |
| 78 | + |
| 79 | +However, the keyword `async` and `asyncio.create_task` alone aren't enough. |
| 80 | +Consider this modification of the previous app, where the method `action_load` now uses `asyncio.create_task` to run a coroutine who does the sleeping: |
| 81 | + |
| 82 | +```py hl_lines="36-37 39" |
| 83 | +--8<-- "docs/blog/snippets/2022-12-07-responsive-app-background-task/blocking02.py" |
| 84 | +``` |
| 85 | + |
| 86 | +1. The action method `action_load` now defers the heavy lifting to another method we created. |
| 87 | +2. The time-consuming operation can be run concurrently with `asyncio.create_task` because it is a coroutine. |
| 88 | +3. The method `_do_long_operation` has the keyword `async`, so it is a coroutine. |
| 89 | + |
| 90 | +This modified app also works but it suffers from the same issue as the one before! |
| 91 | +The keyword `async` tells Python that there will be things inside that function that can be _awaited_ by the cook. |
| 92 | +That is, the function will do some time-consuming operation that doesn't require the cook's attention. |
| 93 | +However, we need to tell Python which time-consuming operation doesn't require the cook's attention, i.e., which time-consuming operation can be _awaited_, with the keyword `await`. |
| 94 | + |
| 95 | +Whenever we want to use the keyword `await`, we need to do it with objects that are compatible with it. |
| 96 | +For many things, that means using specialised libraries: |
| 97 | + |
| 98 | + - instead of `time.sleep`, one can use `await asyncio.sleep`; |
| 99 | + - instead of the module `requests` to make Internet requests, use `aiohttp`; or |
| 100 | + - instead of using the built-in tools to read files, use `aiofiles`. |
| 101 | + |
| 102 | +## Achieving good multitasking |
| 103 | + |
| 104 | +To fix the last example application, all we need to do is replace the call to `time.sleep` with a call to `asyncio.sleep` and then use the keyword `await` to signal Python that we can be doing something else while we sleep. |
| 105 | +The animation below shows that we can still change colours while the application is completing the time-consuming operation. |
| 106 | + |
| 107 | +=== "Code" |
| 108 | + |
| 109 | + ```py hl_lines="40 41 42" |
| 110 | + --8<-- "docs\blog\snippets\2022-12-07-responsive-app-background-task\nonblocking01.py" |
| 111 | + ``` |
| 112 | + |
| 113 | + 1. We create a label that tells the user that we are starting our time-consuming operation. |
| 114 | + 2. We `await` the time-consuming operation so that the application remains responsive. |
| 115 | + 3. We create a label that tells the user that the time-consuming operation has been concluded. |
| 116 | + |
| 117 | +=== "Animation" |
| 118 | + |
| 119 | +  |
| 120 | + |
| 121 | +Because our time-consuming operation runs concurrently, everything else in the application still works while we _await_ for the time-consuming operation to finish. |
| 122 | +In particular, we can keep changing colours (like the animation above showed) but we can also keep activating the binding with the key `l` to start multiple instances of the same time-consuming operation! |
| 123 | +The animation below shows just this: |
| 124 | + |
| 125 | + |
| 126 | + |
| 127 | +!!! warning |
| 128 | + |
| 129 | + The animation GIFs in this blog post show low-quality colours in an attempt to reduce the size of the media files you have to download to be able to read this blog post. |
| 130 | + If you run Textual locally you will see beautiful colours ✨ |
0 commit comments