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
11. Hydrating initial state

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 take the data that we're passing down to our home
00:02
controller and pass this down to our scroller component. We, of course, need that state within here so we know which checkboxes need to be checked. Let's pass this down as a plain value, not bind it in.
00:14
And let's output the state in here. And we'll do the same for the count as well. So let's go ahead and grab out the count that we're passing down.
00:23
And let's go ahead and give this a refresh. Great. So our state now is within this scroller component. Let's open up our scroller.
00:31
And we'll use define props to accept this in. So let's say define props. And we have some state here, which is just a string. And we have the count, which is a number.
00:43
Great. Let's just dump this state on the page just so we know that it definitely exists within here. And let's have a look.
00:50
OK, great, yeah. So we've got this representation of all of this data. Now, what we need to do is somehow take each of the binary pieces of data
01:01
within this state, this 0 and 1 data. And we want to apply it to this to show whether this is checked by default or not. For this, we're going to use a bitset JavaScript package,
01:13
which will allow us to set this within a bit array in JavaScript. So let's go ahead and pull this in. And we will get this working.
01:21
So let's find the installation for this. Go ahead and pull this into our project. And let's just start to use this. OK, so to get this working, we need to import it at the top.
01:32
So let's go ahead and import bitset from bitset. And then just somewhere down here, let's go ahead and create out a bitset variable. It doesn't really matter.
01:42
And let's new up a bitset class. Now, with a bitset class, let's just play around with this first of all. It's going to be very similar to how
01:49
this worked within Redis. So for example, we can say bitset set at a particular index and the value. So we could just do that for 1.
02:00
And we could do that for 2, set that to 1. So exactly the same thing. And then if we just console log on bitset and get, we could get this at value 0.
02:13
And if we head over to our console, you can see that this works in exactly the same way. So we can take all of this data, add it to this bitset, and then read on our checked value
02:25
really quickly from this bitset whether this is checked or not. So we effectively want to go over all of the state that we've pulled in and then set each of them bits. Not the most efficient, but it's going to work.
02:38
So let's go ahead and do a for loop here. And let's set i to 0 or x, whatever we want to call it. And we'll say while i is less than or equal to the amount of bits we have, which
02:51
is the length of our state. Then we're going to go ahead and increment i. So now this will iterate possibly 1 million times. What we can then do is use our bitset
03:02
to set the value at i to the character at that position. So what we can do is take from our state the character at i. So if this was 0, it would grab the first character. If it was 500,000, it would grab the 499999 character.
03:22
And then really importantly, we just want to make sure we convert this over to a number. So it can be stored as a 0 or a 1 at the moment. Of course, it's going to be a string.
03:32
So now we should have each of them bits within our bitset. Let's just go over and give this a refresh and make sure we haven't made a mistake. And yes, state is not defined.
03:41
So let's go ahead and grab that directly from our props. So let's say const props. And we'll say prop state length, prop state character at. Great.
03:53
OK, there we go. So we now have this data inside of this bitset. Let's just check the memory usage of this page really quickly.
04:00
And yeah, it doesn't look too bad at the moment. OK, so now for checked, what we can do is we can read from this bit array using bit get, which we've already seen.
04:10
So we can take the index of each of the items we're iterating over, pass that in, and we can add one to it. Let's go over, give this a refresh. And yeah, once again, let's just check our console here.
04:23
Bit is not defined. We call that bitset. And there we go. Great.
04:29
So now all of this data, this initial state, is coming through and it's being shown. Remember we checked the 1 millionth box. So let's go all the way down to the bottom.
04:40
We checked this a little bit earlier and we checked this in the last episode. And there we go. So we now have the initial state output when we reload the page.
16 episodes•1 hr 17 mins

Overview

How do you render one million checkboxes in a browser and keep them synced in realtime?

Well, using a combination of virtual scroll rendering, Redis bitmaps and bi-directional WebSocket communication.

Let’s cover each of these concepts to build up this fun project — you’ll be surprised at how useful these techniques are for your own applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!