One Million Checkboxes with Laravel
This episode is for members only

Sign up to access "One Million Checkboxes with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
03. Rendering one million things

Episodes

0%
Your progress
  • Total: 1h 17m
  • Played: 0m
  • Remaining: 1h 17m
Join or sign in to track your progress

Transcript

00:00
Let's quickly experiment with trying to render out 1 million items on the page. And I can tell you now this is probably going to crash the browser.
00:07
Let's go ahead and do this anyway and see what happens. OK, so we're going to get rid of everything inside of our scroller that we set up for the demo. And let's just create out a plain old variable
00:19
with all of these items. So to generate 1 million items, we are going to create out an array. And inside of here, we're going to create an array
00:31
and spread it out with 1 million items. And then we can go ahead and grab the keys. So let's just console log on this and see what this gives us.
00:41
Let's console log items, head back over, and open up our console. And there we go. We've got an array of 1 million items in here.
00:49
So generating these, not too bad. But let's take a look at rendering this out and see what happens. So we'll get rid of the console log.
00:57
And let's just do a plain old div in here. And we'll say v4 item in items. Of course, we'll give this a key, which we don't quite know at the moment.
01:06
So we could pull the index in here just to use that index as the key for now. OK, so I'm going to go ahead and just render out the index inside of here and head over
01:19
and give this a refresh. Now, I'm going to stop this because you can already see that it's hanging around. And things are going to go wrong.
01:25
So this is not a great solution. Let's go over and just quickly get rid of that before anything else goes too wrong. OK, so clearly, that is not going to work.
01:34
We need something like View Virtual Scroller to help us out here. Now, what this will do is it will allow you to pass into a component all of the data
01:44
that you want to render. But as you scroll, it will only render what is currently in view. So let's go ahead and get this set up,
01:53
pass the data in, and see the difference. Now, just before we do that, I'm going to slightly structure out the page that we have here because at the moment, we don't have much structure to this.
02:02
So if we head back over to app.blade.php, let's add a couple of classes on here just to get this in the middle. So we're going to set a max width here of, say, 7xl.
02:13
We'll set some padding on the x-axis of 6 just to space that away. We'll go ahead and set a width of full here and a margin on the x-axis of auto
02:21
so it sits in the middle. And we're going to set flex with flex-col so we can have a header. And then we can have our scroller underneath this.
02:28
And really importantly, we're going to set the height to screen so it fills up the width, the entire height of the screen. What we can also do over in app and CSS is just set the body and HTML to a full height width as well.
02:43
So we can either do that with pure CSS or we could use apply to set our height of full with Tailwind. OK, so now that we've got this, any of the content should now sit in the middle.
02:53
So over in our scroller, let's just output home in there. And there we go. I'm working on a really small viewport here, but that is now sat in the center.
03:03
OK, so now that we've got this structure, let's create out a basic header for our app. So let's go over to home.blade.php, create out a sort of header in here with 1 million checkboxes.
03:16
And let's go ahead and apply some styles to this just so we have some other content on the page. And I'm not just doing this for any reason. It's important so we can get the proportions
03:26
right of the scrollable area with other content on the page as well, or we're going to have issues. So let's go and just set that to a large text with font of bold.
03:35
And we'll go ahead and center this as well. So let's say text center, set a margin on the bottom, and we'll set a margin on the top as well. So we've got our scroller down here and this here.
03:46
Over in app.blade.php, this is set to flex flex col. So inside of our scroller, we basically want an element. And I'm going to set this to a background of blue 500 that fills up the entire width of the screen.
04:00
So if we come over, nothing is happening at the moment. We'll just add some text in there. And we want this to be full height. So this will be the scrollable area.
04:09
And anything up here, we can pretty much do anything we want with. So what we can do with our scroller is set a flex grow to achieve this.
04:17
And that's going to push this right to the bottom of the screen. But it's not going to overlap. And that's really important.
04:22
And it's this element here that we want an overflow on in terms of the scroll axis. So we want this to be able to scroll down. If we were to add a bunch of content in here
04:33
and go ahead and set this to overflow y scroll or overflow y auto, this would go ahead and scroll. We're not going to do that now. Let's go ahead and pull in our scroller
04:45
so we can see how this works. So let's go down to the installation here. And we'll go ahead and pull this into our project. And then really, all we need to do
04:53
is just import this and use it. So we can just import this directly from our view component. So let's go and pull this in at the very top here.
05:02
And let's also import the CSS as well. That's really important. It's going to need some of the base styles to get this to work.
05:09
And we can do this inside of app.js. We can just pull that in at the top. And that will be bundled for us. OK, so let's go ahead and create this component out
05:18
and see how it works. So over in our scroller, this inside of here is now going to become our scroller. Or we could make this entire thing here our scroller.
05:28
So let's go ahead and do that now. So let's pull in the recycle scroller. And let's start to pull these down onto multiple lines because we're going to need a couple of options in here.
05:38
Now, the first and most important thing is going to be the items. So we're just going to bind them items into that items prop. And this will now allow us inside of the template
05:48
within this slot start to iterate through each of the items. So let's do that now just to get them out on the page. And then we'll start to start this up.
05:56
So this is the default slot. And from this, we get each of the items that we have passed in as they're rendered. So let's create out a div in here.
06:05
And let's just output the item on the page and see what happens. OK, let's give this a refresh. And we can't see anything just yet.
06:12
Let's just double check our console. So there's a couple of issues that we have here with this error. The first one is that we don't have a unique ID assigned
06:22
to each of these items. And the second thing is we haven't defined an item size. Let's go ahead and define the item size first of all. And then we'll talk about why we need a unique identifier
06:34
for each of the items. So there's a prop called item size here. We're going to be changing this up when we look at a grid pattern for this scroller,
06:41
which we're going to need for all of our checkboxes. Let's just set that to something like 30 for now and see the difference. OK, so it looks like now this is working.
06:50
If I scroll down, you can see that each of these items is being rendered as we scroll. So we've got a huge list of items only rendered when they are currently in the viewport, which is great.
07:02
So we're now rendering out 1 million items, which of course, when we looked at the start of the episode, we couldn't do. So next up, to make this as efficient as possible,
07:11
we need an ID attached to each of these. It's implied that each of your items that you pass in will have an ID property. In our case, we don't have that.
07:20
We just have a bunch of these numbers or indexes. So let's go ahead and map through. And this is crucial because we need to keep track of our state.
07:29
So in here, let's grab the index out of here and map through each one. And let's return an object in here, which contains the ID, which I'm going
07:38
to take and add one to the index, just so we always start at 1 and go up to 1 million rather than start at 0 and go to 999999. And then in here, we can also set a checked state as well.
07:49
So let's set check to false by default. So now that we've got this, the package can more conveniently work out what it needs to render because it has a unique item that we can use.
07:59
It probably used the index before, but at least we have a ID now. OK, so we've got 1 million items rendered out on the page successfully.
08:09
Now we need to talk about the grid stuff. So we actually need to render out these checkboxes, but we need these in a grid pattern, which is a little bit more tricky.

Episode summary

In this episode, we dive into the challenge (and probably the pain) of, no joke, rendering one million items on a web page. To start, we try the straightforward approach—just creating an array of a million and mapping through it in the DOM—which, as you might expect, quickly pushes the browser to its limits and ends up locking everything up. (Don't worry, we kill it before things get disastrous!)

From here, we pivot to a much smarter technique: using a virtual scroller component. The key idea is to only render the items that are actually visible in the viewport, instead of the whole million at once. We set up some basic styles, polish up the layout, and wire in vue-virtual-scroller to handle this more efficiently. After hooking up the basics, you’ll see that we can suddenly scroll through a ridiculous number of items smoothly—no more browser crashes!

Finally, we talk about making sure each list item has a unique ID (for state tracking and Vue’s internal optimizations), and set up the groundwork for the next big step: showing all these (eventually interactive) checkboxes in a grid instead of just a long column. Stay tuned for that—things get a little more complex from here!

Episode discussion

No comments, yet. Be the first!