We will introduce our first requirement: showing a loading spinner immediately when tasks are going on in the background. We will then break this requirement into more and more specific english sentences, which we will later turn into actual observable stream.
Instructor: [0:00] Our virtual manager comes in and tells us that we need to build a spinner for the app that will show any time there's any task going on. Instead of rushing to implement, let's try and breakdown the problem we're trying to solve. I'll use this drawing of a building as an analogy for obstruction levels.
[0:16] The top floor is our highest level of obstruction and that's where we'll start. What's another way of thinking about the requirement? Well, when the spinner needs to show, show the spinner until it's time to hide it.
[0:29] Because we're at the highest level of obstruction, this way of seeing the problem is the most ambiguous because we still have no idea what any of these three things mean. It's also the closest interpretation to a requirement. If we solve this, we've solved our problem.
[0:45] Let's keep moving down and try to make this more specific by answering some of these questions. When does the loader need to show? Well, when the count of async tasks goes from zero to one. Let's explain this other part now. When does the loader need to hide? It needs to hide when the count goes to zero.
[1:03] Notice how we stayed at the same level of obstruction with these two sentences. We still don't know how we would get the count of async tasks. How do we count? We start from zero and when an async task starts, increase the count by one. When the task ends, decrease the count by one. We'll stop here.
[1:22] Our goal was to start from something that resembles our initial requirement really closely. Something vague that we wouldn't really know where to start solving and break that down into more and more specific problems all the way to this -- a simple counter that we can actually start tackling.
[1:41] If we look closely, we broke down and explained almost everything. We still have some unknown sources like what is async task start or what is task ending or even, what is show the spinner? If we had these free sources, then we could really nicely start going up the building and solve our problem.
[2:03] The nice part about solving problems this way is that we can imagine that we actually do have them. I'll just define task starts as a simple observable for now. I'll do the same for task completions. The same for show spinner. I'll just go ahead and import the observable token.
[2:21] The great thing about breaking down our problems into small chunks like we did with the floors of our building, is that we can define placeholders for any unknown sources and assume they already exist. This keeps us focused on solving our problem, one floor at a time.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!