Requirements & Mock-Up

[00:00:00]
>> Evgenii Ray: So, let's try now to simulate the interview environment and design some complex app from scratch. So, we are going to look at the Twitter-like news feed problem. So, a few things to know about the system design interview is usually that they usually have around 35-45 minutes. To design the app, and it's a very limited timeframe, you'll not be able to handle all the cases and explain every point.

[00:00:31]
So you need to make sure that you commit to requirements that you actually can complete on the board. So make sure that you're not over committing because if you're over committing in terms of things you want to design then it won't look good. So first you always start with the requirements, you need to understand what you're trying to build and design.

[00:00:59]
So since we know the problem, it's the Twitter like news feed, so let's define this requirements here in the board.
>> Evgenii Ray: So first of all, I think it will be useful for us to have some simple mock up of the app that we're trying to build. So let's have a mock up section, and so the newsfeed is basically the list where we render the stories, right, one after another.

[00:01:35]
And the two key characteristics here that the stories are loaded dynamically and we have unlimited number of stories. So let's mock this up, so we have a few stories, story one, story two, story three, and story four. And all the stories are rendered from top to bottom, and that's also mark them as one, as two, as three, and as four.

[00:02:05]
So this can serve us as a mockup, now, let's list all the requirements to our newsfeed. So first of all, we already said that the stories render from top to bottom and they might be an infinite number of stories.
>> Evgenii Ray: So the second one that is infinite number of stories.

[00:02:38]
>> Evgenii Ray: Also, our story can also contain some media content, so we can probably attach some images or the videos. So I would limit this design to image only to make sure that we cover everything. So let's say we want to support the media, and we'll list images as a supported media.

[00:03:02]
>> Evgenii Ray: So this is the basic requirements for the app, you also have a non-functional requirements section where you describe how your application should find, like some additional technical details how your application should function. And let's call it non-functional and the first requirement will be that usually in the news feed, is used on the mobile devices because most of the social network content now is consumed from the mobiles.

[00:03:36]
So we need to make sure that our news feed works properly on the mobile and desktop.
>> Evgenii Ray: And as a result, since we're expected to use our application on a mobile device, we are constrained on the network vendor. We can expect that our user may have a slow 3G connection, so we should be network efficient.

[00:04:14]
>> Evgenii Ray: And last thing I'd like to mention is, since we also use our newsfeed on a mobile, we need to think about the performance of the app. So we need to make sure that our infinitely rendered list doesn't impact the CPU and the memory and we don't consume too much.

[00:04:35]
So this means that we should be CPU and memory efficient.
>> Evgenii Ray: And the last thing that we may add to this design is, usually when you go on a plane or on a train, you may not have the network. But I still want to check my stories that are already loaded, so let's have the offline support
>> Evgenii Ray: Okay, so now we're have all our basic requirements that we want to complete for this design.

[00:05:24]
Let's start with our mock up, and let's try to understand, first, how can we optimize the rendering of this mock up? So first of all, since we expect to have the infinite number of the stories, let me quickly clean this up because we will need some space around here.

[00:05:49]
>> Evgenii Ray: So we expect that we have unlimited number of stories to be rendered on the device. So the one way to achieve that is to implement the virtualization and how the virtualization is done. So we need to register two observers, one at the top and one at the bottom.

[00:06:15]
>> Evgenii Ray: So we're also gonna use the concept of the viewport, this green line will tell us where the view port is. So when we render our stories and the view port touches the bottom observer, this means that we need to load a new page. So, how are we going to implement the virtualization?

[00:06:42]
So the way how we could potentially implement the virtualization is to move this elements out of the normal flow using the absolute positioning. This way we can limit the number of mutations and reflows by moving the Selma to separate stacking context for the absolute positioning. So we've registered two observers now and we moved all our stories to separate stacking context, but now we need to detect the position and render them absolutely.

[00:07:12]
So for that, we're gonna use the CSS transformation because CSS transformation utilizes the optimized reflow pipeline. So, the way we calculate the stories, the story position, is we take the previous y position of the ESFRI then we plus the margin. Which is ESFRI, plus the height of the next story, which is 84.

[00:07:47]
And we use a CSS transformation for that, since we use the CSS transformation, we use we utilize the optimize pipeline. And we make sure that our stories render via GPU, so we select these two stories and recycle them to the bottom. So basically this stories will appear here.

[00:08:22]
>> Evgenii Ray: And now, we need to move our observer, so we'll move our bottom observer to the bottom, and here we're gonna use the top observer, so here now we will have empty space.
>> Evgenii Ray: So, this is the empty area.
>> Evgenii Ray: And the way we can maintain the scroll bar here is by simulating the height of the container.

[00:08:56]
So we always know the Scroll height of the container, so we can use the property scroll height and apply the CSS style to that. CSS styles to the main container, so the main container always knows the styles, the height, yep.
>> Speaker 2: How would this work if you had varying height cards?

[00:09:20]
>> Speaker 2: Is it presumed fixed height?
>> Evgenii Ray: Yeah, no, it would work the same way because since you protest the card one by one, you always take in account the height of the previous card. Because you're in the formula, you use the height of the card, and the card can be different in the size, so it will work for the dynamic sizes too.

[00:09:46]
So the way we can handle the rendering, for instance, if we squeeze the content and now the card increased. In this case we'll have to trigger the rendering off the virtual list so everything is positioned correctly. Okay, now we have the mockup and also we explained how everything will work, so the bottom observer will take the position of the last element in the list.

[00:10:20]
And the top observer will take the position of the first element in the list and they will also be moved using the CSS transformation. So if we look at the data, how the data would look like, so basically we have an array of our data, which is d1, d2, d3, d4, and then we also have a d5 and d6.

[00:10:50]
When we do initial render, we render it the first page of the data and the second page of the data, so this is the page 1, this is the page 2. So when we trigger the bottom observer, so we move the start pointer. Before it was here, here was the start, so we moved it by plus 1, so now it starts in that page 2.

[00:11:18]
And to load this chunk of data removed our end pointer to the page 3, this is how we maintain the sliding window in the memory. So in the memory we'll have our data array and we can basically move. So once we loaded the data, we don't really need to load it one more time.

[00:11:40]
We can utilize the cache data from the global state, do we just move around with the start and end pointers. So this is how we would optimize the virtual list.